<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</body>
Two paragraphs, right? Let's see what actually happens...
The Surprising Result!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
What happened? 😱
Browsers compress whitespace! Multiple spaces, tabs, and newlines become a single space.
The Solution: We need HTML elements to structure our text!
The Paragraph Element ¶
The <p> tag creates actual paragraphs!
<body><p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></body>
Result: Two distinct paragraphs with proper spacing!
Quick Practice: Paragraphs 💻
3-Minute Challenge
Open your one-page website and:
Add 3 paragraphs about your topic
Make sure each is wrapped in <p> tags
Check spacing in the browser
VS Code Tip: Type lorem and press Enter for dummy text!
HTML Headings 📰
Six levels of headings: h1 through h6
H1: Main Page Title
H2: Section Heading
H3: Subsection
H4: Sub-subsection
H5: Minor Heading
H6: Smallest Heading
Notice: Larger numbers = smaller text!
Heading Hierarchy Matters!
✅ Good Structure
h1: My Blog
h2: First Post
h3: Introduction
h3: Main Content
h2: Second Post
❌ Bad Structure
h3: My Blog
h1: First Post
h2: Introduction
h6: Main Content
h4: Second Post
Rule: Only ONE h1 per page - it's your main title!
Making Text Bold: <strong> 💪
The <strong> element makes text bold AND
important
<p>This is <strong>very important</strong> text!</p>
This is very important text!
Semantic meaning: Screen readers will emphasize this text!
Adding Emphasis: <em> ✨
The <em> element makes text italic AND emphasized
<p>I <em>really</em> love web development!</p>
I really love web development!
Pro tip: Use <em> for emphasis, not just to make text italic!
Combining Text Elements 🎨
Mix and match for rich text formatting!
<p>Learning HTML is <strong>essential</strong> for
web dev.It's <em>surprisingly</em>
fun!</p><p><strong><em>Warning:</em></strong>This is both bold AND italic!</p>
Learning HTML is essential for web dev. It's surprisingly fun!
Warning: This is both bold AND italic!
Nesting Elements 🪆
Elements can contain other elements - like Russian dolls!
<body><p>This paragraph contains <strong>bold text</strong> and <em>italic text</em>.</p></body>
<!-- This is a comment. Users won't see this! --><p>This text is visible</p><!-- TODO: Add more content here --><!--
Multi-line comments
are also possible!
-->
VS Code Shortcut:Ctrl+/ (Win/Linux) or Cmd+/ (Mac)
Smart Commenting 🧠
Good Uses for Comments:
✅ Explaining complex code sections
✅ TODO reminders
✅ Temporarily disabling code
✅ Section markers in long files
<!-- Navigation Section --><nav><!-- TODO: Add mobile menu --><ul><li>Home</li></ul></nav>
Live Coding Demo 🎬
Let's build a mini blog post together!
We'll create:
A main heading (h1)
Section headings (h2)
Multiple paragraphs
Bold and italic text
Proper nesting and indentation
Helpful comments
Follow along in your own editor!
Your Turn: Blog Article ✍️
15-Minute Challenge
Create a blog article about your one-page website topic:
Use ONE h1 for the article title
Add 2-3 h2 section headings
Include at least one h3 subsection
Write 3+ paragraphs with lorem ipsum
Bold at least 3 important terms
Italicize 2+ words for emphasis
Add comments marking each section
Maintain proper indentation!
Avoid These Text Mistakes! ⚠️
Common Pitfalls:
❌ Multiple h1 tags on one page
❌ Skipping heading levels (h1 → h3)
❌ Using <strong> just for bold styling
❌ Forgetting to close nested tags properly
❌ No indentation (makes code hard to read)
❌ Over-commenting obvious code
Remember: HTML is about meaning, not just appearance!
Homework Assignment 📚
Due: Before Next Class (Thursday)
Your Tasks:
Watch Kevin Powell's HTML Paragraph and Headings Video
Watch Kevin Powell's HTML Bold and Italic Text Video
Create a complete blog article page with:
Proper heading hierarchy
Multiple paragraphs
Bold and italic text
HTML comments
Add AT LEAST 3 different text tags to your one-page website
Push to GitHub and submit link on D2L!
Quick Knowledge Check 🧪
Can you answer these?
How do you create a paragraph in HTML?
What's the difference between h1 and h6?
When should you use <strong> vs <em>?
What are parent and sibling elements?
How do you write an HTML comment?
Why is indentation important?
If you're unsure about any of these, review today's materials!
Additional Resources 📖
From The Odin Project:
MDN: HTML Text Fundamentals
Interactive HTML Text Formatting Article
Semantic HTML Guide
VS Code Tips:
lorem + Enter = Lorem ipsum text
Ctrl/Cmd + / = Comment toggle
Alt + Shift + F = Format document
Remember: Practice makes perfect!
Next Class Preview
Thursday: Lists, Links, and Images
Creating ordered and unordered lists
Building navigation with links
Adding images to your pages
Understanding file paths
Your sites are about to get a lot more interactive! 🚀