Day 3: HTML Text Structure: Headings, Paragraphs & Inline Formatting

Yesterday, we built the empty HTML skeleton. Today, we finally get to put words inside it.

I know what some of you might be thinking: “Why do I need heading tags? Can’t I just use CSS to make text big or bold later?”  You absolutely can; and you will. But HTML isn’t about how text looks. It’s about what text means. Browsers, screen readers, and search engines rely on your HTML tags to understand the hierarchy and importance of your content. If you skip the structure now, you’ll spend twice as long fixing accessibility, SEO, and layout issues later.

In this post, we’ll cover how to properly structure headings, paragraphs, and inline emphasis using pure HTML. We’ll also look at line breaks and thematic dividers, and explain why they’re often misused. Links and images get their own dedicated posts coming up next. Today is strictly about building clean, readable text foundations.

🎯 What You’ll Learn Today

By the end of this post, you will:

• Use <h1> through <h6> to create a logical, accessible document outline
• Understand why every block of body text should live inside a <p> tag
• Know the exact difference between <strong> (importance) and <em> (tonal emphasis)
• Use <br> and <hr> correctly without relying on them for spacing
• Build a simple, well-structured text-only HTML page from scratch

1. The Outline Tags: <h1> to <h6>

HTML gives you six heading levels: <h1> to <h6>. Think of them as the table of contents for your webpage. The <h1> is your main topic or page title. You should only use one per page. Everything else flows downward: <h2> for major sections, <h3> for subsections, and so on.

Here’s the most common beginner mistake: treating headings as “text size controls.” You might be tempted to skip from <h1> to <h4> just because the smaller font size looks nice in a place. Don’t do that. Headings aren’t for decoration. They’re structural signals. Screen readers use them to let visually impaired users jump between sections quickly. Search engines use them to figure out what your page is actually about. If your heading hierarchy jumps around randomly, you break both of those tools.

CSS will handle the visual sizing later. HTML’s job is to lay out the logical outline. If you find yourself needing a smaller heading but the outline says it should be an <h2>, stick with <h2> and let your future stylesheet override the font size. Clean structure beats visual shortcuts every time.

2. The Paragraph Tag: <p>

If headings are the outline, paragraphs are the content. The <p> tag is the workhorse of web writing. Every block of prose, every sentence, every caption should be wrapped in <p> tags.

You might notice that browsers will still display raw text even if you forget the <p> tag. That’s because browsers are forgiving. But relying on that forgiveness causes unpredictable rendering, breaks CSS styling, and confuses assistive technologies. When you wrap text properly, you tell the browser exactly how to treat it: as a distinct block of content with consistent spacing and behavior.

Headings and paragraphs should sit side-by-side as siblings, never nested inside each other. A heading introduces a section; paragraphs fill it in. That’s it. Keep it clean, keep it consistent, and your future self will thank you when it’s time to style or debug.

3. Inline Emphasis: <strong> vs <em>

HTML gives you two tags that look like bold and italic text by default: <strong> and <em>. They’re not interchangeable, and mixing them up misses the whole point of semantic markup.

• <strong> signals importance, urgency, or seriousness. When a screen reader encounters it, it often adds vocal stress to the word. Search engines also treat it as a stronger signal than regular text.
• <em> indicates tonal emphasis or contrast. It’s the digital equivalent of stressing a word out loud in conversation. It shifts the meaning slightly without necessarily making it “urgent.”

Compare these:

Both change appearance, but they carry different semantic weight. Use <strong> when the content itself is critical. Use when you want to guide the reader’s tone or highlight a contrast.

4. Line Breaks & Thematic Breaks: <br> & <hr>

Two tags often cause confusion: <br> and <hr>.

<br> forces a line break. It’s useful for addresses, poetry, or form labels where a new line makes sense semantically. But it should never be used to create space between elements. That’s what CSS margins and padding are for. If you find yourself typing <br><br><br>, stop. You’re fighting the tool.

<hr> historically looks like a horizontal line, but semantically, it represents a thematic shift or scene change. It tells readers (and machines) that you’re moving to a new topic or concluding a section. Don’t use it just as a decorative divider. Use it when the content actually pivots. Visual styling? Leave that to CSS.

5. Beginner Pitfalls & Quick Fixes

Let’s address the traps that trip up beginners in their first few weeks:

• Heading jumping: Using <h3> because it “looks right.” → Fix: follow the outline, use CSS for sizing later.
• Unwrapped text: Leaving raw sentences floating outside <p> or headings. → Fix: always wrap prose in block-level tags.
• <br> spam: Adding multiple line breaks for whitespace. → Fix: learn basic CSS margins (we’ll cover this in Week 2).
• Nesting errors: Putting a <p> inside another <p>, or wrapping an <h1> inside a <p>. → Fix: keep block-level elements as siblings, not parents/children.

Quick debugging tip: Open your browser’s DevTools (F12), go to the Elements tab, and expand your <body>. If you see auto-closed tags, missing </p> closures, or headings nested in weird places, the browser is silently fixing your mistakes. That’s helpful for a quick preview, but it’s not a replacement for writing clean markup.

Your Turn: Build a Structured Text Page

Let’s put this into practice. No copy-pasting. Type it out.

1. Create a folder named day-3-practice.
2. Open your code editor and create index.html.
3. Add the HTML5 boilerplate from Day 2.
4. Inside <body>, build a mini layout:
   • One <h1> for the page title
   • Two <h2> sections (e.g., “How This Works” and “What to Expect”)
   • 3–4 <p> tags per section
   • One <strong> and one <em> used meaningfully
   • One <hr> between sections
   • One <br> used correctly (e.g., inside an address or contact line)
5. Save, open in your browser, and inspect it in DevTools.

Stretch prompt: Delete a closing </p> tag and refresh. Watch the Elements panel. Notice how the browser tries to auto-close it for you. That’s browser tolerance—handy, but never rely on it. Good HTML writes its own rules.

Key Takeaways

• Headings (<h1>–<h6>) create a logical document outline, not visual styling.
• Always wrap body text in <p> tags for predictable rendering and accessibility.
• <strong> signals importance; <em> signals tonal emphasis. They’re not interchangeable.
• Use <br> for line breaks within content, and <hr> for thematic shifts. Never use either for spacing.
• Structure always comes before presentation. HTML defines meaning; CSS handles appearance.

What’s Next

In the next post, we’ll tackle HTML Links & Navigation. You’ll learn how to connect pages, navigate between internal and external URLs, secure external links, and write accessible anchor text.

Preview question: If you link to about.html versus https://example.com/about, what’s the technical difference in how the browser resolves each one? Jot down your guess. We’ll verify it next time.