Home / HTML / Semantics

HTML Semantics

What are Semantic Elements?

Semantic elements are HTML elements that clearly describe their meaning in a human- and machine-readable way. HTML5 introduced many new semantic elements that replace generic <div> containers with elements that provide meaning. Semantic HTML improves accessibility, SEO, and code maintainability.

Why Use Semantic Elements?

Benefits of semantic HTML:

Better accessibility: Screen readers can better understand page structure
Improved SEO: Search engines better understand content meaning
Easier maintenance: Code is more readable and self-documenting
Better styling: Semantic elements provide natural styling hooks
Future-proof: Makes code more maintainable as standards evolve

HTML5 Semantic Elements

HTML5 introduced several semantic elements for better document structure:

<header>

Represents introductory content or navigational aids. Typically contains the site logo, title, and main navigation:

Example

<header>
    <h1>Website Title</h1>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
    </nav>
</header>

<nav>

Represents a section with navigation links. Use for main navigation menus, table of contents, or pagination:

Example

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

<main>

Represents the main content of the document. There should only be one <main> per page:

Example

<main>
    <h1>Main Content</h1>
    <p>This is the main content of the page.</p>
</main>

<section>

Represents a standalone section of content, typically with a heading:

Example

<section>
    <h2>Introduction</h2>
    <p>Introduction content...</p>
</section>
<section>
    <h2>Main Content</h2>
    <p>Main content...</p>
</section>

<article>

Represents independent, self-contained content that could be distributed separately (e.g., blog post, news article):

Example

<article>
    <header>
        <h2>Article Title</h2>
        <p>Published on <time datetime="2025-01-15">January 15, 2025</time></p>
    </header>
    <p>Article content goes here...</p>
    <footer>
        <p>Written by John Doe</p>
    </footer>
</article>

<aside>

Represents content aside from the main content (like a sidebar):

Example

<main>
    <section>
        <h2>Main Content</h2>
        <p>Main content here...</p>
    </section>
    <aside>
        <h3>Sidebar</h3>
        <p>Related links and information...</p>
    </aside>
</main>

<footer>

Represents footer content, typically containing copyright, contact info, or site links:

Example

<footer>
    <p>© 2025 My Website. All rights reserved.</p>
    <nav>
        <a href="#">Privacy Policy</a>
        <a href="#">Terms of Service</a>
    </nav>
</footer>

<figure> and <figcaption>

The <figure> element represents self-contained content, typically images, diagrams, or code listings, with an optional caption:

Example

<figure>
    <img src="diagram.jpg" alt="Diagram">
    <figcaption>Figure 1: System Architecture Diagram</figcaption>
</figure>

<time>

The <time> element represents a specific period in time. The datetime attribute provides a machine-readable format:

Example

<p>The event is on <time datetime="2025-06-15T10:00">June 15, 2025 at 10:00 AM</time>.</p>
<p>Published on <time datetime="2025-01-15">January 15, 2025</time>.</p>

Complete Semantic Layout

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Semantic HTML Page</title>
</head>
<body>
    <header>
        <h1>Website Title</h1>
        <nav>
            <a href="#">Home</a>
            <a href="#">About</a>
        </nav>
    </header>
    <main>
        <article>
            <header>
                <h2>Article Title</h2>
                <p>Published on <time datetime="2025-01-15">January 15, 2025</time></p>
            </header>
            <section>
                <h3>Introduction</h3>
                <p>Introduction content...</p>
            </section>
            <section>
                <h3>Main Content</h3>
                <p>Main content...</p>
            </section>
            <footer>
                <p>Author: John Doe</p>
            </footer>
        </article>
        <aside>
            <h3>Related Articles</h3>
            <ul>
                <li><a href="#">Article 1</a></li>
                <li><a href="#">Article 2</a></li>
            </ul>
        </aside>
    </main>
    <footer>
        <p>© 2025 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

Semantic Elements vs. Div

While <div> is still useful, semantic elements provide meaning:

Generic (Div)	Semantic (HTML5)
`<div class="header">`	`<header>`
`<div class="nav">`	`<nav>`
`<div class="main">`	`<main>`
`<div class="section">`	`<section>`
`<div class="article">`	`<article>`
`<div class="aside">`	`<aside>`
`<div class="footer">`	`<footer>`

Best Practices

Use semantic elements first: Prefer semantic HTML5 elements over generic divs
One main element per page: Use only one <main> element
Logical structure: Organize content in a logical hierarchy
Use div when needed: Div is still useful for styling containers
Combine semantic elements: You can nest semantic elements (e.g., article in section)
Accessibility: Semantic HTML improves screen reader support

← Computer Code HTML Entities →