Week 1

Introduction to HTML

Semantic HTML

Forms

Accessibility (a11y)

DOM Manipulation

DevTools Basics

Practice

Assignment

Back to Track

Why Semantic HTML Matters

Now that you know the basic HTML elements, let's talk about using them meaningfully. "Semantic" HTML means choosing elements that describe the purpose of your content, not just its appearance. Before HTML5, developers built entire websites using just <div> and <span> elements with descriptive class names:

<!-- Old way (pre-HTML5) -->
<div class="header">
  <div class="nav">
    <a href="/">Home</a>
    <a href="/about">About</a>
  </div>
</div>

<!-- Modern semantic HTML -->
<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

(Although you will probably find the “old way” in existing codebases too. But now you know better and can help your colleagues fix it to make the markup more semantic! 💪)

This works visually, but machines can't distinguish between different sections. Is this <div> a navigation menu? A sidebar? A footer? The browser has no idea.

Both examples render identically in the browser, but the semantic version provides crucial benefits:

1. Accessibility Screen readers announce landmarks like "navigation region" or "main content" to help visually impaired users navigate your page efficiently. Users can jump directly to the main content without hearing the entire navigation menu first.

2. SEO (Search Engine Optimization) Search engines understand page structure and can prioritize content in <main> over sidebars or footers. They know that content in <article> is more important than content in <aside>.

3. Maintainability When you or another developer opens your HTML file six months later, semantic elements make the structure immediately clear. No need to read class names or comments to understand what each section does.

4. Future-proofing New browser features and assistive technologies can leverage semantic meaning in ways we haven't imagined yet.

The Core Structural Elements

HTML5 provides semantic elements for common page structures. Here's how they work together:

<header> - Introductory content

The <header> element represents introductory content for its section. It typically contains headings, logos, navigation, or search forms. You can have multiple headers on a page - one for the overall page and others within articles or sections.

<!-- Page header -->
<header>
  <img src="logo.svg" alt="Company Logo">
  <h1>Welcome to Our Site</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/products">Products</a>
    <a href="/contact">Contact</a>
  </nav>
</header>

<!-- Article header -->
<article>
  <header>
    <h2>Understanding Semantic HTML</h2>
    <p>Published on February 28, 2026 by HackYourFuture</p>
  </header>
  <p>Article content goes here...</p>
</article>

<nav> - Navigation links

The <nav> element defines major navigation blocks. Not every group of links needs <nav> - reserve it for primary site navigation.

When to use <nav>:

When NOT to use <nav>:

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

<aside> ⚠️

Warning Don't wrap every link in <nav>. Footer links to privacy policies, social media icons, or inline article references don't need <nav>. Use it for primary navigation that helps users move through your site's main sections.

</aside>

<main> - Primary content

The <main> element contains the dominant content of the page: what's unique to this specific page, excluding headers, footers, and sidebars that repeat across pages.

<main>
  <h1>About Our Company</h1>
  <p>We've been building web applications since 2010...</p>
  
  <section>
    <h2>Our Mission</h2>
    <p>To make the web accessible to everyone...</p>
  </section>
</main>

Rules for <main>:

<article> - Self-contained content

The <article> element represents a self-contained composition that could be independently distributed or reused. Ask yourself: "Could this content stand alone if I removed it from the page?"

<article>
  <header>
    <h2>5 Tips for Writing Better CSS</h2>
    <p>By HackYourFuture • March 15, 2026</p>
  </header>
  
  <p>Clean CSS makes maintenance easier and your stylesheets more performant...</p>
  
  <section>
    <h3>1. Use CSS Custom Properties</h3>
    <p>Custom properties (CSS variables) make themes easier...</p>
  </section>
  
  <footer>
    <p>Tags: CSS, Web Development, Best Practices</p>
  </footer>
</article>

Common uses for <article>:

<section> - Thematic grouping

The <section> element groups related content under a thematic heading. It's more specific than <div> but more general than <article>.

<main>
  <h1>Our Services</h1>
  
  <section>
    <h2>Web Development</h2>
    <p>We build modern, responsive websites...</p>
  </section>
  
  <section>
    <h2>Mobile Apps</h2>
    <p>Native and cross-platform mobile solutions...</p>
  </section>
</main>

<aside> ⌨️

Hands On Create a simple HTML file with a blog post structure. Use <header>, <main>, <article>, and at least two <section> elements. Open it in your browser and use "Inspect Element" to see how the semantic structure appears in DevTools.

</aside>

<footer> - Closing content

The <footer> element represents closing content for its section. Like <header>, you can have multiple footers throughout a page.

<!-- Page footer -->
<footer>
  <nav>
    <a href="/privacy">Privacy Policy</a>
    <a href="/terms">Terms of Service</a>
  </nav>
  <p>&copy; 2026 HackYourFuture. All rights reserved.</p>
</footer>

<!-- Article footer -->
<article>
  <h2>Article Title</h2>
  <p>Content...</p>
  <footer>
    <p>Author: HackYourFuture • Published: Feb 28, 2026</p>
    <p>Tags: HTML, Accessibility, Web Development</p>
  </footer>
</article>

Heading Hierarchy

Headings (<h1> through <h6>) create a document outline. Use them in order - don't skip levels:

<!-- Correct -->
<h1>Main Title</h1>
  <h2>Section 1</h2>
    <h3>Subsection 1.1</h3>
    <h3>Subsection 1.2</h3>
  <h2>Section 2</h2>
    <h3>Subsection 2.1</h3>

<!-- Incorrect - skips from h1 to h4 -->
<h1>Main Title</h1>
  <h4>Don't skip levels!</h4>

When to Use Semantic Elements vs <div>

Choosing between semantic elements and generic <div> containers can be confusing. Here's a decision tree:

Ask yourself:

  1. Is this navigation? → Use <nav>
  2. Is this the main content unique to this page? → Use <main>
  3. Is this self-contained content that could stand alone? → Use <article>
  4. Is this a thematic grouping with a natural heading? → Use <section>
  5. Is this introductory content? → Use <header>
  6. Is this closing/footer content? → Use <footer>

<aside> 🎉

Celebration You now understand semantic HTML, document structure, and how browsers turn your code into visual experiences! You're not just writing markup - you're creating accessible, well-structured documents that machines and humans can both understand.

</aside>

Additional Resources

Videos

Reading

Interactive

The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0

CC BY-NC-SA 4.0 Icons

*https://hackyourfuture.net/*

Found a mistake or have a suggestion? Let us know in the feedback form.