Module 8: Semantic HTML5

📖 What is Semantic HTML?

Semantic HTML means using tags that describe the meaning of content, not just its appearance. Before HTML5, developers used <div> for everything and added classes like class="header" or class="nav".

HTML5 introduced semantic elements that clearly describe their purpose:

<!-- Old way (HTML4) -->
<div class="header">...</div>
<div class="navigation">...</div>
<div class="content">...</div>
<div class="footer">...</div>

<!-- New way (HTML5) -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>
            

Why Semantics Matter

Accessibility: Screen readers can navigate by landmarks ("Jump to main content")
SEO: Search engines understand page structure better
Developer Experience: Code is easier to read and maintain
Browser Features: Some browsers offer reading modes that rely on semantic structure

🏗️ Semantic Structure Elements

<header>

Introductory content for its nearest ancestor section. Can contain logos, headings, authorship info.

<header>
    <h1>Ethioweb Blog</h1>
    <p>Published on May 13, 2026 by John Doe</p>
</header>
            

<nav>

Major navigation blocks. Not every group of links needs <nav> — only primary navigation.

<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 page. There must be only one <main> per page, and it cannot be inside <article>, <aside>, <footer>, <header>, or <nav>.

<main>
    <h1>Welcome to Ethioweb</h1>
    <p>This is the main content of the page...</p>
</main>
            

<article>

Self-contained, independently distributable content. A blog post, news article, forum post, or product card.

<article>
    <header>
        <h2>Learning HTML in 2026</h2>
        <p>By Jane Smith</p>
    </header>
    <p>HTML continues to evolve...</p>
</article>
            

<section>

Thematic grouping of content, typically with a heading. Use when content naturally belongs together.

<section>
    <h2>Our Services</h2>
    <p>We offer web design, development, and hosting...</p>
</section>
            

💡 article vs. section: Use <article> when content makes sense on its own (like a blog post). Use <section> for thematic groupings within a larger context.

<aside>

Content tangentially related to the main content: sidebars, call-out boxes, advertising, related links.

<aside>
    <h3>Related Courses</h3>
    <ul>
        <li><a href="#">CSS Fundamentals</a></li>
        <li><a href="#">JavaScript Basics</a></li>
    </ul>
</aside>
            

<footer>

Footer for its nearest sectioning content. Contains authorship, copyright, related documents.

<footer>
    <p>© 2026 Ethioweb.net. All rights reserved.</p>
    <p><a href="privacy.html">Privacy Policy</a></p>
</footer>
            

📋 Complete Semantic Page Structure

<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>...</nav>
    </header>

    <main>
        <article>
            <header>
                <h2>Article Title</h2>
            </header>
            <section>
                <h3>Introduction</h3>
                <p>...</p>
            </section>
            <section>
                <h3>Main Points</h3>
                <p>...</p>
            </section>
            <footer>
                <p>Written by Author</p>
            </footer>
        </article>
    </main>

    <aside>
        <h3>Related Links</h3>
        <ul>...</ul>
    </aside>

    <footer>
        <p>© 2026 Company Name</p>
    </footer>
</body>
</html>
            

✏️ Exercise 8.1: Convert to Semantic HTML

Your Task

Create semantic.html and build a blog post page using ONLY semantic HTML5 elements:

<header> with site logo (text) and <nav>
<main> containing:
- An <article> with:
  - <header> with post title and author
  - Two <section> elements with subheadings
  - <figure> with an image and caption
  - <footer> with publish date and tags
An <aside> with "About the Author"
A page <footer> with copyright

Rule: Do not use <div> or <span> for structure — only semantic elements!

📝 Module 8 Quiz

🎯 Module Summary

✅ Semantic HTML describes content meaning, not just appearance
✅ <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> replace generic divs
✅ Only one <main> per page
✅ <article> for standalone content, <section> for thematic groups
✅ Semantic HTML improves SEO, accessibility, and code clarity

← Previous Module Next: Module 9 →