Semantic HTML5 Tags header, nav, article, section, footer

What is Semantic HTML?

Semantic HTML names page regions and content relationships. header, nav, main, article, section, aside, and footer improve structure only when used for their actual roles.

Semantic HTML uses elements that clearly describe their meaning and purpose - both to the browser and to developers. Instead of using <div> for everything, semantic elements like <header>, <nav>, and <article> tell the browser what the content represents.

Semantic markup makes a document easier to understand for search engines, assistive technologies, and other developers. It also helps you build cleaner page structures because the HTML itself explains what each area of the page is supposed to do.

Better SEO - search engines understand your content structure
Better accessibility - screen readers navigate semantic pages more easily
Cleaner, more readable code

Semantic Page Layout

Semantic Layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Semantic Layout</title>
</head>
<body>

    <header>
        <h1>My Website</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>Blog Post Title</h2>
            <p>Published: <time datetime="2024-06-15">June 15, 2024</time></p>
            <p>Article content goes here...</p>

            <section>
                <h3>Section Heading</h3>
                <p>Section content...</p>
            </section>
        </article>

        <aside>
            <h3>Related Posts</h3>
            <ul>
                <li><a href="#">Post 1</a></li>
                <li><a href="#">Post 2</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>© 2024 My Website. All rights reserved.</p>
    </footer>

</body>
</html>

Semantic Elements Reference

Each semantic element has a specific purpose. Choosing the right one improves document structure and makes your code easier to reason about.

Element	Purpose
<header>	Site or section header - logo, site title, top navigation
<nav>	Navigation links - menus, breadcrumbs, table of contents
<main>	The primary content of the page - only one per page
<article>	Self-contained content - blog post, news article, forum post
<section>	A thematic grouping of content with a heading
<aside>	Sidebar content - related links, ads, author bio
<footer>	Site or section footer - copyright, links, contact info
<figure>	Self-contained media (image, diagram, code) with optional caption
<figcaption>	Caption for a <figure> element
<time>	A date/time value - use datetime attribute for machine-readable format
<mark>	Highlighted/relevant text
<details>	Expandable/collapsible content
<summary>	Visible heading for a <details> element
<address>	Contact information for the nearest article or body

figure & figcaption

Some semantic elements are useful inside content rather than as page-level layout containers. Elements like <figure>, <figcaption>, <time>, <details>, and <summary> add meaning to specific pieces of content.

figure & details

<!-- figure with caption -->
<figure>
    <img src="chart.png" alt="Sales chart for Q4 2024">
    <figcaption>Fig 1: Q4 2024 Sales Performance</figcaption>
</figure>

<!-- Expandable content -->
<details>
    <summary>Click to see more</summary>
    <p>This content is hidden until the user clicks the summary.</p>
</details>

<!-- time element -->
<p>Event on <time datetime="2024-12-25">Christmas Day</time></p>

When to Use article, section, and div

One common area of confusion is deciding between <article>, <section>, and <div>. These tags are not interchangeable.

Use <article> for self-contained content that could stand on its own, such as a blog post, product card, forum thread, or news item.
Use <section> for a thematic grouping of related content, usually with its own heading.
Use <div> when there is no meaningful semantic element that fits and you only need a generic container for styling or scripting.

Why Semantic HTML Matters for Accessibility

Screen readers and other assistive technologies rely on semantic structure to understand the page. For example, a <nav> region tells assistive tools that a set of links is intended for navigation, and a <main> element helps users jump directly to the main content.

When semantic HTML is missing, users who rely on assistive tools may have a harder time understanding the page hierarchy or navigating efficiently.

Semantic HTML vs Non-Semantic HTML

A page built entirely with generic <div> elements can still be styled to look correct, but it gives very little meaning to the browser. A semantic page uses descriptive elements so the structure is meaningful even before CSS is applied.

Comparison

<!-- Non-semantic -->
<div class="top">...</div>
<div class="menu">...</div>
<div class="content">...</div>
<div class="side">...</div>

<!-- Semantic -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>

Best Practices

Use the most meaningful element available instead of defaulting to <div> for everything.
Keep one <main> element per page for the primary content.
Use headings inside sections and articles so the structure stays clear.
Use semantic elements together with good heading order and accessible labels.
Do not use semantic tags only for styling if their meaning does not match the content.