Warming up the neural circuits...
So far, you've learned that <div> is a generic container. It works — you can build entire websites with just <div>. But a <div> tells the browser nothing about what's inside. Is it a header? A sidebar? A comment?
Semantic uses tags that describe their content:
<header> = "This is the page header"<nav> = "This is navigation"<main> = "This is the main content area"<article> = "This is a complete, standalone piece of content"<section> = "This is a section of content"<aside> = "This is supplementary content (sidebar, advertisement)"<footer> = "This is the page footer"These tags do exactly the same thing as <div> from a layout perspective. They just tell the browser what the content means.
The word "semantic" means "related to meaning." Semantic HTML uses tags that carry meaning — they tell the browser what kind of content is inside, not just that it's a generic container.
People using screen readers (software that reads web pages aloud) rely on semantic tags to navigate:
<!-- ❌ Without semantic tags (confusing for screen readers) -->
<div class="header">
<div class="nav">
<div class="nav-item"><a href="/">Home</a></
Screen reader users can ask: "List all the navigation links on this page." The <nav> tag makes this possible.
Google and other search engines use semantic tags to understand page structure:
<!-- Better for SEO -->
<article>
<h1>How to Learn Web Development</h1>
<p>Here's my guide...</p>
</article>The <article> tag tells search engines: "This is a standalone piece of content — probably important."
When you read HTML six months later:
<!-- What's inside this div? Who knows? -->
<div id="sidebar">...</div>
<!-- Crystal clear -->
<aside>...</aside>Browsers can use semantic tags to build features. For example:
<article> tags and extracts them for a clean reading experience<section> tags<header> — Page HeaderThe header typically contains:
<header>
<h1>My Blog</h1>
<p>Learn web development</p>
</header>Important: A page can have multiple <header> tags (one per article, for example).
<nav> — NavigationWraps navigation links:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href
Use it for main navigation, breadcrumbs, , etc. The <nav> tag signals to screen readers: "Here's how to navigate the site."
<main> — Main ContentThe primary content area of the page. Use exactly one <main> tag per page:
<header>...</header>
<nav>...</nav>
<main>
<h1>Welcome to My Blog</h1>
<p>This is the main content.</p>
</main>
<footer>...</footer>Important: Never nest <main> inside <article>, <nav>, or <footer>.
<section> — A Section of ContentGroups related content. Often has a heading:
<main>
<section>
<h2>Getting Started</h2>
<p>First, you need to learn HTML...</p>
</section>
<section>
<h2>Advanced Topics</h2>
<p>Once you master the basics...</p>
</section
Think of <section> as a "chapter" or "topic area" in your content.
<article> — A Complete Piece of ContentUse <article> for content that makes sense on its own:
<article>
<h1>How to Learn JavaScript</h1>
<p>Published by John Doe on May 4, 2026</p>
<p>Here's my guide to learning JavaScript...</p>
<p>You should start with variables and functions...</p>
</article>The test: Could you copy-paste this content to a different site and it would still make sense? If yes, it's an <article>.
<aside> — Supplementary ContentContent that's related but not essential:
<main>
<article>
<h2>Learning React</h2>
<p>React is a JavaScript library...</p>
</article>
<aside>
<h3>Quick Tip</h3>
<p>Make sure you know JavaScript before learning React!</p>
</aside
Screen readers can skip <aside> if the user chooses. This is useful for experienced users who want just the main content.
<footer> — Page FooterContains supplementary info:
<footer>
<p>© 2026 My Blog. All rights reserved.</p>
<ul>
<li><a href="/privacy">Privacy Policy</a></li>
<li><a href="/terms">Terms
Here's a complete page with semantic tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Tech Blog</title>
</head>
<body>
<!-- Page Header -->
<div> vs Semantic Tags| Situation | Use |
|---|---|
| Wrapping page header, logo, navigation | <header> |
| Navigation links | <nav> |
| Main page content | <main> |
| Grouping related content with a heading | <section> |
| A complete, standalone piece of content | <article> |
| Supplementary info (sidebar, ads) | <aside> |
| Grouping elements for styling/layout (no semantic meaning) | <div> |
| Wrapping multiple paragraphs | <div> or <section> (if grouping related content) |
| Wrapping content inside text | <span> |
If you're unsure whether to use a semantic tag or a <div>, ask: "Does this tag describe what's inside?" If yes, use the semantic tag. If you're just grouping for styling, use <div>.
Mistake 1: Using <header> and <footer> for styling
<!-- ❌ Wrong (div would be better here) -->
<header style="background: blue; padding: 20px;">
Some random styled content
</header>
<!-- ✅ Right (header is for page header) -->
<header>
<h1>My Site Title</h1>
</header>Mistake 2: Putting navigation outside <nav>
<!-- ❌ Wrong -->
<div id="navigation">
<a href="/">Home</a>
<a href="/about">About</a>
</div>
<!--
Mistake 3: Using <article> for every content block
<!-- ❌ Wrong (these are just sections, not standalone articles) -->
<article>
<h3>Step 1</h3>
<p>First, do this...</p>
</article>
<article>
<h3>Step 2</h3>
<p>Then, do this...</p>
Here's what a screen reader announces:
With semantic tags:
Navigation
- Home
- Blog
- Contact
Main content
Article: "How to Learn JavaScript"
Aside: "Related articles"
Footer
With just divs:
(Long list of divs with no structure)Screen reader users can jump between sections, skip navigation, find main content faster. This is powerful.
<header>, <nav>, <main>, <section>, <article>, <aside>, <footer><main> tag per page<article> is for standalone content<div> for layout, semantic tags for meaningNow that your HTML has proper structure: