HTML 07 - Semantic HTML5

07 - Semantic HTML5

Chapter 7 — Semantic HTML5

Learning Outcome

Build meaningful, SEO-friendly page layouts using HTML5 semantic elements instead of generic <div> soup.

← 06 - Lists | Next → 08 - Images & Media

7.1 What is Semantic HTML?

Semantic HTML uses tags that describe their meaning and purpose, not just their visual appearance.


Why Semantic HTML Matters

4 Key Benefits

  1. Accessibility — Screen readers navigate by landmarks (<nav>, <main>) and announce element roles to blind users
  2. SEO — Search engines understand content hierarchy and index it correctly
  3. Readability — Other developers understand your code structure at a glance
  4. Maintainability — Easier to update, debug, and style

7.2 Page Layout Semantic Tags

<!DOCTYPE html>
<html lang="en">
<body>

  <header>
    <!-- Site logo, name, main navigation -->
  </header>

  <nav>
    <!-- Primary navigation links -->
  </nav>

  <main>
    <!-- The unique main content of this page (one per page) -->

    <section>
      <!-- A themed grouping of content -->
    </section>

    <article>
      <!-- Self-contained content: blog post, news article -->
    </article>

    <aside>
      <!-- Sidebar: related links, ads, author bio -->
    </aside>

  </main>

  <footer>
    <!-- Copyright, social links, contact info -->
  </footer>

</body>
</html>

7.3 Semantic Tags — Detailed Reference

<header>

Top of the page or a section. Contains logo, site title, or primary nav.

<header>
  <h1>My Portfolio</h1>
  <nav>...</nav>
</header>

<nav>

Navigation links — internal or external. Should contain <a> tags or a <ul> of links.

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

<main>

The dominant content of the <body>. Use only once per page. Skip links target this.

<main id="main-content">
  <!-- Everything important goes here -->
</main>

<section>

A thematic grouping of content with its own heading. Use when content forms a distinct part of the page.

<section>
  <h2>About Us</h2>
  <p>We are a design studio...</p>
</section>

<article>

Self-contained, independently distributable content. Would still make sense if copied elsewhere.

<article>
  <h2>How to Learn HTML in 4 Weeks</h2>
  <time datetime="2025-04-24">April 24, 2025</time>
  <p>Start with the basics...</p>
</article>

<aside>

Content tangentially related to the main content — sidebars, pull quotes, ad panels.

<aside>
  <h3>Related Articles</h3>
  <ul>
    <li><a href="#">CSS Basics</a></li>
  </ul>
</aside>

<footer>

Bottom of page or section — copyright, links, contact info.

<footer>
  <p>&copy; 2025 My Website. All rights reserved.</p>
  <a href="/privacy">Privacy Policy</a>
</footer>

<figure> and <figcaption>

Used for images, diagrams, code blocks with a caption.

<figure>
  <img src="chart.png" alt="Sales grew 40% in Q4">
  <figcaption>Figure 1: Q4 2024 Sales Growth</figcaption>
</figure>

<time>

Machine-readable date/time. datetime attribute provides the standardised format.

<p>Published on <time datetime="2025-04-24">April 24, 2025</time></p>
<p>Class starts at <time datetime="09:00">9:00 AM</time></p>

<address>

Contact information for the nearest <article> or <body>.

<address>
  Written by <a href="mailto:arjun@example.com">Arjun Kumar</a><br>
  Trivandrum, Kerala, India
</address>

7.4 <article> vs <section>

The "Would it make sense alone?" Test

  • <article> — remove it from the page and it still makes sense? Use <article>. (A blog post, a news story, a product review)
  • <section> — it's part of a whole, needs context? Use <section>. (An "About Us" section, a "Skills" section of a portfolio)

7.5 Full Semantic Page Template

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

  <header>
    <h1>The Daily HTML</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/tech">Tech</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>

    <section id="featured">
      <h2>Featured Articles</h2>

      <article>
        <h3>HTML5 Turns 10</h3>
        <time datetime="2025-04-24">April 24, 2025</time>
        <p>A decade of semantic web...</p>
      </article>

      <article>
        <h3>Why Accessibility Matters</h3>
        <time datetime="2025-04-20">April 20, 2025</time>
        <p>Over 1 billion people have disabilities...</p>
      </article>

    </section>

    <aside>
      <h2>Trending Topics</h2>
      <ul>
        <li><a href="#">CSS Grid</a></li>
        <li><a href="#">Web Performance</a></li>
      </ul>
    </aside>

  </main>

  <footer>
    <address>
      Contact: <a href="mailto:editor@dailyhtml.com">editor@dailyhtml.com</a>
    </address>
    <p>&copy; 2025 The Daily HTML</p>
  </footer>

</body>
</html>

🚀 Recommended Projects

Project 1 — News Website Layout

Build a semantic news homepage with:

  • <header> with site title + <nav>
  • <main> containing 3 <article> cards
  • <aside> with trending topics
  • <footer> with copyright and contact

Project 2 — Div-to-Semantic Refactor

Take this div-heavy code and rewrite it semantically:

<div class="header"><div class="logo">...</div></div>
<div class="nav">...</div>
<div class="content"><div class="post">...</div></div>
<div class="sidebar">...</div>
<div class="footer">...</div>

📌 Quick Recall

  • Semantic = tags that describe their meaning, not just their look
  • <header> = top | <nav> = navigation | <main> = main content (once per page)
  • <section> = themed group | <article> = standalone content | <aside> = sidebar
  • <footer> = bottom | <figure> + <figcaption> = image with caption
  • <time datetime="..."> = machine-readable date
  • Article test: "Would it make sense alone?" → yes = <article>, no = <section>


Previous
Last updated: 2026-04-27
Next