✏️ Lesson 5: Text & Headings

Why Text Structure Matters

Open any news article, textbook, or blog post. You'll notice it's not just a wall of text — it has a title, subheadings, and paragraphs that break the content into digestible pieces. That structure isn't just for looks. It serves three audiences:

• Readers can scan headings to find what they need instead of reading everything
• Screen readers use headings to let visually impaired users jump between sections — like a table of contents they can navigate by voice
• Search engines use headings to understand what your page is about, which affects how it appears in search results

In HTML, you don't just make text bigger to create a heading — you use a heading element that tells the browser (and everyone else) "this is a heading." The visual appearance is secondary; the meaning is what counts.

Heading Levels: h1 through h6

HTML provides six levels of headings, from <h1> (the most important) down to <h6> (the least important):

<h1>Main Page Title</h1>
<h2>Major Section</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>
<h5>Minor heading</h5>
<h6>Smallest heading</h6>

By default, browsers render these in decreasing sizes — <h1> is the largest and <h6> is the smallest. But remember: you're not choosing heading levels for their size. You're choosing them for their importance in the page hierarchy. You'll change sizes later with CSS.

The Heading Hierarchy

Think of headings like a document outline. You wouldn't put a sub-sub-section before a section, and you shouldn't skip heading levels either:

Rules of Thumb

Paragraphs

The <p> element defines a paragraph — a block of related text separated from surrounding content by vertical space:

<p>This is a paragraph. It can contain as many
   sentences as you want. The browser will wrap
   the text to fit the window width.</p>

<p>This is a second paragraph. Notice how the
   browser adds space between them automatically.</p>

White Space Collapsing

Here's something that surprises everyone the first time: HTML collapses white space. No matter how many spaces, tabs, or line breaks you put in your source code, the browser treats them all as a single space.

<!-- You type this: -->
<p>Hello      World!

   How    are      you?</p>

<!-- Browser displays: "Hello World! How are you?" -->

All those extra spaces and the blank line between sentences? Gone. The browser collapses them into single spaces and removes the line break entirely. This is called white space collapsing, and it means you can't create visual spacing just by pressing Enter or Space. You'll use CSS for spacing (or the <br> element for intentional line breaks — more on that below).

Emphasis and Importance

Sometimes you need to call attention to specific words within a paragraph. HTML gives you two elements for this:

<em> — Emphasis

The <em> element marks text that has stress emphasis — as if you're stressing that word when speaking aloud:

<p>You need to submit the form <em>before</em> Friday.</p>
<p>I <em>never</em> said that.</p>

Browsers render <em> in italics by default. But the point isn't the italics — it's the meaning. Screen readers change their tone of voice when they encounter <em>, emphasizing the word audibly.

<strong> — Strong Importance

The <strong> element marks text of strong importance — content that is serious, urgent, or critical:

<p><strong>Warning:</strong> Do not delete this file.</p>
<p>The deadline is <strong>absolutely final</strong>.</p>

Browsers render <strong> in bold by default. Again, the styling is secondary — what matters is the semantic meaning.

Nesting <em> and <strong>

You can combine them for text that's both emphasized and important:

<p><strong><em>Do not</em> touch the red button.</strong></p>

Line Breaks and Horizontal Rules

<br> — Line Break

The <br> element forces a line break within a block of text. It's a void element — no closing tag needed:

<p>
    Roses are red,<br>
    Violets are blue,<br>
    HTML is fun,<br>
    And so are you.
</p>

Use <br> when a line break is part of the content itself — poetry, song lyrics, addresses, or anywhere the break carries meaning:

<p>
    123 Main Street<br>
    Springfield, IL 62701<br>
    United States
</p>

<hr> — Horizontal Rule (Thematic Break)

The <hr> element creates a thematic break — a visible horizontal line that signals a shift in topic or section. Like <br>, it's a void element:

<p>That concludes our discussion of headings.</p>

<hr>

<p>Now let's talk about something completely different.</p>

Think of <hr> like the * * * separator you see in novels between scenes. It means "we're changing topics." Don't use it as a decorative line — if you just want a line, use CSS borders.

Putting It All Together

Here's a complete example using every element from this lesson:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Me</title>
</head>
<body>
    <h1>About Alex Johnson</h1>
    <p>Welcome to my personal page! I'm a student learning
       <strong>web development</strong> from scratch.</p>

    <h2>Background</h2>
    <p>I started coding in <em>January 2026</em> with no
       prior experience. My goal is to build a portfolio
       website by the end of this course.</p>

    <p><strong>Fun fact:</strong> I once tried to learn
       HTML from a YouTube video and gave up after 10
       minutes. This course is <em>much</em> better.</p>

    <hr>

    <h2>Contact</h2>
    <p>You can reach me at:</p>
    <p>
        Alex Johnson<br>
        123 Web Dev Lane<br>
        Codeville, TX 75001
    </p>
</body>
</html>

Notice how the document flows naturally: one <h1> for the main title, <h2> headings for sections, paragraphs for content, <strong> and <em> for inline emphasis, <hr> for a topic shift, and <br> for address formatting.

Hands-on Exercise

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Me</title>
</head>
<body>
    <h1>Jordan Rivera</h1>
    <p>Hi there! I'm Jordan, a <strong>web development
       student</strong> who is learning to build websites
       from the ground up.</p>

    <h2>My Interests</h2>
    <p>I spend most of my free time drawing and painting.
       I'm <em>especially</em> interested in digital
       illustration and hope to combine art with code
       someday.</p>

    <p>I also enjoy board games, hiking, and trying out
       new recipes in the kitchen. My latest obsession
       is <em>sourdough bread</em> — my third attempt
       was <strong>finally</strong> edible.</p>

    <hr>

    <h2>Contact</h2>
    <p>
        Jordan Rivera<br>
        456 Pixel Avenue<br>
        Webtown, CA 90210
    </p>
</body>
</html>

Summary

📁 Your Project So Far

my-website/
├── index.html     ← homepage (from Lesson 4)
└── about.html     ← profile page (updated in this lesson)

🚀 What's Next?

You now know how to structure text — but a page with only text and headings would be pretty boring. In the next lesson, you'll learn how to connect pages together with links and make your content visual with images. These two elements are what make the web a web.