🧠 Chapter Roadmap
1 Meaningful Tags
The word "Semantic" simply means "Meaning". A semantic HTML element clearly describes its meaning to both the web browser and the developer writing the code.
📦 Non-Semantic (Blank Box)
Tags like <div> and <span> are non-semantic. They are like plain, blank cardboard boxes. They tell you absolutely nothing about what is inside them.
<div id="nav"> ... </div>
🏷️ Semantic (Labeled Box)
Tags like <form>, <table>, and <nav> are semantic. They are clearly labeled boxes. You instantly know what type of content goes inside them!
<nav> ... </nav>
2 Why use Semantic HTML?
Before HTML5, developers used <div> for absolutely everything. It made websites messy. Today, using Semantic tags is a strict requirement for two major reasons:
Search engines like Google read your code to figure out what your website is about. If you use <article> and <header>, Google can easily find your most important content and rank you higher!
Blind users use "Screen Reader" software that reads websites out loud to them. Semantic tags tell the screen reader exactly where the navigation is, and where the main story begins.
3 The Modern HTML5 Layout
HTML5 gave us specific tags to divide our website into logical sections. Here is what a standard, modern website layout looks like using Semantic tags:
(Sidebar & Ads)
4 Dictionary of Semantic Tags
-
<header>
The introductory area at the top of a page. Usually contains the logo, main heading, and sometimes a search bar.
-
<nav>
A set of Navigation links (the main menu of the website).
-
<main>
Specifies the dominant, main content of the document. There should only be ONE <main> tag per page!
-
<article>
Independent, self-contained content that makes sense on its own (like a News Story, Blog Post, or Forum Comment).
-
<section>
A thematic grouping of content, typically with a heading. (e.g., A "Contact Us" section, or an "About Our Team" section).
-
<aside>
Content related to the main story, but placed on the side. Often used for Sidebars, Advertisements, or "Read More" links.
-
<footer>
The bottom area of a page or section. Contains Copyright info, terms of service, and contact details.
-
<figure>
Used to wrap an image (or diagram) along with a
<figcaption>(a text caption directly underneath it).