Semantic HTML: Why It Matters

Introduction

You've written HTML to make things look right. But semantic HTML is about making things mean something.

The problem: When you use <div> for everything, or use <h1> just to make text bigger, or stack <br> tags for spacing—your HTML works visually but loses meaning. A screen reader, a search engine, another developer—they can't tell what your content actually is.

Semantic HTML solves this by using tags that describe their purpose: <header>, <nav>, <main>, <section>, <article>. The browser, search engines, and assistive technologies understand the structure. Everyone wins.

Learning Objectives

• Understand what semantic HTML is and why it matters
• Identify common mistakes
• Practice writing clean, accessible HTML

Core Concept: What is Semantic HTML?

Semantic HTML uses tags that describe what your content is, not just how it looks.

Example: <br> adds a line break visually, but tells nothing about meaning. <section> says "this is a thematic grouping." A screen reader understands the difference.

Quick landmark map for most pages: use <header>, <nav>, one <main>, and <footer>.

Common mistakes you might make:

• Choosing heading levels by visual size instead of page structure. Headings are for document outline, not styling.
• Using multiple <h1> tags on a page without a good reason. HTML allows it, but best practice is one page-level <h1>, then <h2>, <h3> in order.
• Skipping heading levels (<h1> straight to <h3>).
• Forgetting that a page should have only one <main> landmark.
• Overusing <div> for everything. It's like writing a book with only paragraphs and no chapters or sections. It works, but it's hard to follow.
• Using <br> tags for spacing. <br> is for line breaks inside one block of text (like poetry or an address), not layout spacing. Use CSS margins instead.
• Mixing up links and buttons. Links navigate to places. Buttons do actions.
• Missing <label> tags on form fields.
• Missing alt text on images.

Hands-On Examples

Example 1: Page Structure

<!-- ❌ Bad: Meaningless divs -->
<div>
  <h1>About Us</h1>
  
  <!-- ❌ Bad: Using <br> for spacing -->
  <br /><br /> 
  
  <div>We're awesome!</div>
</div>

<!-- ✅ Good: Semantic structure -->
<header>
  <h1>About Us</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
</header>
<main>
  <section>
    <p>We're awesome!</p>
  </section>
</main>

<nav> is for major navigation links (like a main menu), not every random group of links.

Checkpoint: Head over to MDN's HTML Elements Reference. For each element above, explain in your own words what it means and why it is the right choice in this example.

Quick chooser:

• Use <article> for content that could stand on its own (like a blog post or news card).
• Use <section> for grouped content on the current page.
• Use <div> when you need a wrapper and no semantic tag fits.

The <article> HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

Source: MDN

The <section> HTML element represents a standalone section — which doesn't have a more specific semantic element to represent it — contained within an HTML document. A section, in this context, is a thematic grouping of content, typically with a heading.

Source: MDN

As a "pure" container, the <div> element does not inherently represent anything. Instead, it's used to group content so it can be easily styled using the class or id attributes...

Source: MDN

Example 2: Heading Levels Are Structure, Not Style

<!-- ❌ Bad: Heading levels used for looks, not structure -->
<h1>Student Portfolio</h1>
<h3>Projects</h3>
<p>My JavaScript work...</p>
<h1>Contact</h1>

<!-- ✅ Good: One page-level h1, then descend in order -->
<h1>Student Portfolio</h1>
<h2>Projects</h2>
<p>My JavaScript work...</p>
<h2>Contact</h2>

Use headings to show content hierarchy. Use CSS to make text bigger or smaller.

Heading outline self-check (30 seconds):

• Do I have one clear page-level <h1>?
• Do my headings go in order (<h1> → <h2> → <h3>), without skipping?
• If I remove CSS, do the heading titles still describe the page structure clearly?

Do not use heading elements to resize text. Instead, use the CSS font-size property. Do not skip heading levels: always start from <h1>, followed by <h2> and so on.

Source: MDN

While using multiple <h1> elements on one page is allowed by the HTML standard (as long as they are not nested), this is not considered a best practice. A page should generally have a single <h1> element that describes the content of the page

Source: MDN

Example 3: Forms Need Labels

<!-- ❌ Bad: Placeholder is not a label -->
<input type="text" placeholder="Your name" />

<!-- ✅ Good: Proper label association -->
<label for="name">Your name:</label>
<input type="text" id="name" />

See that for attribute? It ties the label to the input. Screen readers can now announce "Your name" when the user focuses on the input. for and id work together to create that connection.

Checkpoint: There are several types of form inputs: text, email, password, checkbox, radio, select dropdowns, and more. Write out the HTML for a simple form that includes at least three different types of inputs, making sure to use proper <label> tags for each one. Reference MDN's Form Elements to ensure you're using the correct syntax for each input type.

Example 4: Links vs Buttons

<!-- ❌ Bad: Link used for an action -->
<a href="#">Delete item</a>

<!-- ✅ Good: Button for actions, link for navigation -->
<button type="button">Delete item</button>
<a href="/items">View all items</a>

Use <a> when the user is going somewhere. Use <button> when the user is doing something.

Example 5: When <br> Is Actually Correct

<!-- ✅ Poetry / lyrics -->
<p>
  Roses are red,<br />
  Violets are blue,<br />
  Semantic HTML helps,<br />
  Screen readers too.
</p>

<!-- ✅ Postal address -->
<address>
  SWIC<br />
  2500 Carlyle Ave<br />
  Belleville, IL 62221
</address>

Use <br> when you need a real line break inside one piece of content. In other words, the br IS part of the actual content, and not just decorative spacing.

For example, in poetry or addresses, <br> is appropriate. It is customary to include a hard line break after the street address and before the city, state and zip. Do not use <br> to push sections farther down the page. Use CSS margins for that.

Use <address> for contact information for a person or organization (not just any random location text).

The <br> HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.

Note: Do not use <br> to create margins between paragraphs; wrap them in <p> elements and use the CSS margin property to control their size.

Source: MDN

Best Practices

1. Use semantic tags for structure. <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>
2. Use headings for structure, not styling. Prefer one page-level <h1>, then <h2>, <h3> in order—don't skip levels.
3. Use one <main> landmark per page.
4. Forms need <label> tags. Tie each label to its input using for and id.
5. Images need alt text. Describe the image's purpose; if it's decorative, use alt="".
6. Use CSS for looks, not semantic tags. Don't use <h1> just to make text bigger.
7. Match element to behavior. Links navigate. Buttons trigger actions.
8. Use <nav> for major navigation areas, like your main site menu.
9. Use <br> only for real line breaks inside one piece of content (like poetry or addresses), not for layout spacing.

Wrap-Up & Reflection

Key takeaway: Semantic HTML makes your content accessible and understandable to browsers, search engines, and assistive technologies.

Reflect on these:

1. Where have you used <br> or meaningless <div> tags before? How would you fix them now?
2. Do you have experience with screen readers? What surprised you about how they work?
3. What's one semantic mistake you'll avoid going forward?