🏗️ Lesson 9: Semantic HTML

What Is Semantic HTML?

The word "semantic" means "relating to meaning." A semantic element clearly describes its purpose to both the browser and the developer. A non-semantic element tells you nothing about what's inside it.

<!-- Non-semantic — what is this? A header? A sidebar? A footer? -->
<div>
    <div>My Website</div>
    <div>
        <div>Welcome!</div>
        <div>This is my page.</div>
    </div>
</div>

<!-- Semantic — instantly clear what each part is -->
<header>
    <h1>My Website</h1>
</header>
<main>
    <h2>Welcome!</h2>
    <p>This is my page.</p>
</main>

Both versions look identical in the browser. But the semantic version communicates what each part is — and that matters for three important reasons:

• Accessibility: Screen readers use semantic elements as landmarks. A visually impaired user can jump directly to <nav>, <main>, or <footer> instead of listening to the entire page from top to bottom.
• SEO: Search engines give more weight to content inside <main> and <article> than content in a generic <div>. They can also distinguish navigation from actual content.
• Maintainability: When you (or another developer) read the code six months later, <header> is instantly understandable. <div class="top-bar-wrapper"> requires detective work.

Page-Level Structure

Most web pages share a common layout: a header at the top, navigation links, a main content area, and a footer at the bottom. HTML5 has dedicated elements for each of these:

<header>

Represents introductory content, typically at the top of a page or section. A page header usually contains the site name, logo, and primary navigation:

<header>
    <h1>My Personal Website</h1>
    <p>A place for my projects and writing.</p>
</header>

You can have multiple <header> elements — one for the page, and one inside an <article> or <section>. It doesn't have to be at the top of the page; it just marks introductory content for its parent.

<nav>

Contains a set of navigation links — the main menu, breadcrumbs, or table of contents:

<nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="recipe.html">Recipes</a>
    <a href="contact.html">Contact</a>
</nav>

Not every group of links is a <nav>. Use it for major navigation blocks — the site menu, sidebar navigation, or pagination. A few links in a paragraph don't need a <nav>.

<main>

Contains the dominant content of the page — the content that's unique to this page and not repeated on other pages (like the sidebar or footer). There should be only one <main> per page:

<main>
    <h2>Welcome to My Site</h2>
    <p>This is the main content of my homepage...</p>
</main>

<footer>

Contains closing information — copyright notices, related links, contact details, or social media icons:

<footer>
    <p>&copy; 2026 Alex Johnson. All rights reserved.</p>
    <nav>
        <a href="privacy.html">Privacy Policy</a>
        <a href="terms.html">Terms of Use</a>
    </nav>
</footer>

Like <header>, a <footer> can appear inside an <article> or <section> too — not just at the bottom of the page.

Content Organization Elements

Inside your <main> content area, three semantic elements help organize the content itself:

<article>

Represents a self-contained, independently distributable piece of content. The test: could this content make sense on its own if you pulled it out of the page? If yes, it's an article.

<article>
    <h2>How I Learned to Code</h2>
    <p>Published on March 15, 2026</p>
    <p>It all started when I discovered HTML...</p>
</article>

Common uses: blog posts, news articles, product cards, forum posts, user comments, social media posts.

<section>

Represents a thematic grouping of content, typically with its own heading. Unlike <article>, a section usually doesn't make sense on its own — it's part of a larger whole:

<section>
    <h2>My Skills</h2>
    <p>I'm learning HTML, CSS, and JavaScript.</p>
</section>

<section>
    <h2>My Projects</h2>
    <p>Here are some things I've built...</p>
</section>

Think of <section> as a chapter in a book. Each chapter has a title and groups related content, but a single chapter doesn't stand alone as a complete work.

<aside>

Contains content that is tangentially related to the surrounding content — something that enhances the main content but could be removed without losing the core message:

<aside>
    <h3>Fun Fact</h3>
    <p>The first website ever created is still online.
       It was published in 1991 at CERN.</p>
</aside>

Common uses: sidebars, pull quotes, related links, "did you know" boxes, advertising, glossary definitions.

Figures and Captions

The <figure> element wraps self-contained content that is referenced from the main flow — typically an image, diagram, chart, or code example — along with an optional caption:

<figure>
    <img src="images/sunset.jpg"
         alt="A golden sunset over the Pacific Ocean">
    <figcaption>Sunset at Venice Beach, March 2026.</figcaption>
</figure>

• <figure> — wraps the content and its caption as a single unit
• <figcaption> — the visible caption (can go before or after the content inside the figure)

A <figure> isn't limited to images. You can use it for any referenced content:

<!-- A code example -->
<figure>
    <pre><code>console.log("Hello, World!");</code></pre>
    <figcaption>The classic first program in JavaScript.</figcaption>
</figure>

<!-- A quote -->
<figure>
    <blockquote>
        The best way to predict the future is to invent it.
    </blockquote>
    <figcaption>— Alan Kay</figcaption>
</figure>

The Generic Containers: div and span

After learning all these semantic elements, where do <div> and <span> fit in?

<div> — Block-Level Container

A <div> is a generic block-level container with no semantic meaning. It starts on a new line and takes up the full available width:

<div class="card">
    <h3>Featured Post</h3>
    <p>Check out our latest article...</p>
</div>

<span> — Inline Container

A <span> is a generic inline container. It flows within text without breaking to a new line:

<p>My favorite color is <span class="highlight">blue</span>.</p>

When to Use Them

Use <div> and <span> only when no semantic element fits. They're styling hooks — containers for applying CSS — not content descriptors. If you can use <section>, <article>, <nav>, or another semantic element, always choose that first.

Choosing the Right Element

With all these elements available, how do you decide which one to use? Here's a flowchart to help:

A complete page skeleton using all these elements together:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Blog</title>
</head>
<body>
    <header>
        <h1>My Blog</h1>
        <nav>
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
            <a href="contact.html">Contact</a>
        </nav>
    </header>

    <main>
        <article>
            <header>
                <h2>My First Post</h2>
                <p>Published April 10, 2026</p>
            </header>

            <section>
                <h3>Getting Started</h3>
                <p>I decided to learn web development...</p>
            </section>

            <section>
                <h3>What I've Learned</h3>
                <p>So far, I've covered HTML basics...</p>
            </section>

            <footer>
                <p>Tags: HTML, Beginners, Web Dev</p>
            </footer>
        </article>

        <aside>
            <h2>About the Author</h2>
            <p>Alex is a student learning to code.</p>
        </aside>
    </main>

    <footer>
        <p>&copy; 2026 Alex Johnson</p>
    </footer>
</body>
</html>

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>My First Website</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <a href="index.html">Home</a> |
            <a href="about.html">About</a> |
            <a href="recipe.html">Recipes</a> |
            <a href="contact.html">Contact</a>
        </nav>
    </header>

    <main>
        <section>
            <h2>About This Site</h2>
            <p>This is my first properly structured website.
               I'm learning HTML and CSS from scratch!</p>

            <figure>
                <img src="images/sunset.jpg"
                     alt="A golden sunset over the ocean"
                     width="600" height="400">
                <figcaption>A sunset photo from my collection.</figcaption>
            </figure>
        </section>

        <section>
            <h2>What I'm Learning</h2>
            <ul>
                <li>HTML structure and semantic elements</li>
                <li>Links, images, and forms</li>
                <li>How to connect pages together</li>
            </ul>
        </section>

        <aside>
            <h2>Fun Fact</h2>
            <p>The first ever website is still live at
               info.cern.ch. It was published in 1991!</p>
        </aside>
    </main>

    <footer>
        <p>&copy; 2026 Alex Johnson. All rights reserved.</p>
        <nav>
            <a href="about.html">About</a> |
            <a href="contact.html">Contact</a>
        </nav>
    </footer>
</body>
</html>

Summary

📁 Your Project So Far

my-website/
├── images/
│   └── sunset.jpg
├── index.html         ← refactored with semantic elements
├── about.html
├── recipe.html
└── contact.html

🎓 Module 2 Complete!

Congratulations — you've finished Module 2: HTML Essentials! You now know how to structure any web page using headings, text, links, images, lists, tables, forms, and semantic elements. That's the entire foundation of HTML.

🚀 What's Next?

Your pages have great structure but look plain — everything is in the browser's default styling with Times New Roman text and blue links. It's time to change that. In Module 3: CSS Essentials, you'll learn how to control colors, fonts, spacing, layout, and responsiveness. Your first CSS lesson will show you how to connect a stylesheet and transform your page's appearance with just a few lines of code.