Lesson 2.2: Text and Headings

Mastering Content Structure - Make Your Text Meaningful and Beautiful

🕐 50 minutes 🟢 Beginner

📝 Welcome to Text Formatting Mastery!

Text is the heart and soul of most websites. In this lesson, you'll learn how to structure your content properly using headings and format text for both visual appeal and semantic meaning. By the end, you'll create well-organized pages that are easy to read and understand.

Great websites aren't just about looking pretty - they're about organizing information logically so users can easily find what they're looking for.

🏗️ Understanding Heading Hierarchy

HTML provides six levels of headings, from

(most important) to

(least important). Think of it like an outline for a document:

This is a Level 1 Heading (h1)

This is a Level 2 Heading (h2)

This is a Level 3 Heading (h3)

This is a Level 4 Heading (h4)

This is a Level 5 Heading (h5)
This is a Level 6 Heading (h6)

How to Use Headings Properly

🌟 Golden Rule: One h1 Per Page

Every webpage should have exactly one

element - this is your main page title. This helps search engines understand what your page is about.

💻 Building Your First Structured Page

Let's build a simple about page to practice heading structure:

Code Example: About Page

🎯 What This Creates:

A well-structured page where:

  • The h1 clearly states what the page is about
  • Each h2 represents a major section
  • Each h3 represents a subsection under "My Interests"
  • The content flows logically from general to specific

🎨 Text Formatting Elements

Now let's explore how to emphasize and format text within your content:

This text is bold using the tag

This text is italicized using the tag

This text is both bold and italic

This text looks like code using the tag

Code Example: Text Formatting

⚠️ Common Mistakes to Avoid

Mistake 1: Using Headings for Size, Not Meaning

Wrong: Using

just because you want medium-sized text

Right: Using

when it represents a subsection of an

Mistake 2: Multiple h1 Elements

Wrong: Having several

tags on one page

Right: Using only one

as your main page title

Mistake 3: Skipping Heading Levels

Wrong: Going from

directly to

Right: Following the proper hierarchy (h2 → h3 → h4)

🛠️ Hands-On Exercise

Create a new HTML file called "my-hobbies.html" and include:

  1. One h1 - Your page title (like "My Hobbies")
  2. Two or three h2 elements - Major hobby categories
  3. Some h3 elements - Specific hobbies under each category
  4. Paragraphs describing each hobby
  5. Some emphasized text using and

Save it and open it in your browser. Does it look organized and easy to read?

🎯 Semantic HTML vs. Visual Appearance

Here's a crucial concept: HTML elements should describe the meaning of content, not just how it looks. Later, CSS (Cascading Style Sheets) will handle the visual styling.

🔍 Why This Matters

  • Accessibility: Screen readers can understand your content structure
  • SEO: Search engines better understand your page content
  • Maintenance: Easier to update and modify later
  • Future-proofing: Your content structure stays consistent even if styling changes

📚 Paragraphs and Line Breaks

Most of your content will be in paragraphs. Here's how to structure them:

Good vs. Poor Paragraph Structure

When you need a line break within a paragraph (like for addresses), use the
tag:

💡 Use
Sparingly

The
tag is for line breaks within paragraphs. For separate paragraphs, use multiple

tags.

🎉 You're Becoming a Web Developer!

Congratulations! You now have the fundamental tools for structuring content on the web:

✅ What You've Mastered:
  • ✅ Six levels of headings (h1-h6) and when to use each
  • ✅ Proper heading hierarchy and structure
  • ✅ Text formatting with , , and
  • ✅ Creating well-organized paragraphs
  • ✅ The difference between semantic meaning and visual appearance
You now understand how to structure content logically. This skill is essential for every web developer and forms the backbone of well-designed websites.

In our next lesson, we'll learn about links and navigation - the features that make the web a "web" by connecting pages together!

← Back: HTML Structure Next: Links and Navigation →