Semantic HTML
Semantic tags describe meaning: <header>, <nav>, <main>, <section>, <article>, <footer>. They help accessibility and SEO, and make the structure clear.
Appy Says…
What's the difference between <div class="header"> and <header>? Visually, nothing. But browsers, screen readers, and Google know exactly what a <header> is. Semantic HTML makes your pages smarter.
What is Semantic HTML?
Semantic HTML uses tags that describe the meaning of content, not just its appearance. Instead of putting everything in <div>s, you use tags whose names explain what the content is.
- •
<header>— top of page or section (logo, nav) - •
<nav>— navigation links - •
<main>— the primary page content (one per page) - •
<article>— self-contained content (blog post, news story) - •
<section>— a thematic grouping of content with a heading - •
<aside>— sidebar, pull quotes, related links - •
<footer>— bottom of page (copyright, contact links) - •
<figure>/<figcaption>— image with caption
Think of it like labelled storage in Minecraft
Putting everything in unmarked chests works, but it's chaos. Labelled chests (header, main, footer) let everyone — including automated systems — know exactly what's inside without opening them.
How It Works
- •1. Replace
<div id="nav">with<nav> - •2. Replace
<div class="main-content">with<main> - •3. Wrap each blog post in
<article> - •4. Put related grouped content in
<section>with a heading - •5. Screen readers announce landmark regions — users can jump straight to
<main> - •6. Google gives more weight to content in semantic tags (helps SEO)
Real-World Examples
- •The BBC website uses
<article>for each news story - •Wikipedia's sidebar is wrapped in
<aside> - •Every major site uses
<nav>for their navigation bar - •Medium wraps each blog post in
<article>with<header>inside it
Key Facts
- •There are 100+ semantic HTML5 elements — most developers know about 20 of them
- •ARIA (Accessible Rich Internet Applications) extends semantics for complex components
- •Google's Lighthouse accessibility audit checks for semantic HTML usage
- •Semantic HTML reduces the amount of CSS you need to write (less class naming)
Watch Out!
Don't use <section> as a generic wrapper just to avoid <div>. A <section> should always have a heading inside it. If there's no heading, use <div> — it's perfectly fine for styling purposes.
Remember
Use the tag that describes the content's role. If no semantic tag fits, use <div> for layout and <span> for inline styling.
What You Learned
- •Semantic tags like
<header>,<main>,<article>describe content meaning - •Better accessibility, SEO, and code readability vs a sea of divs
- •Unlocks: screen reader navigation, SEO ranking, professional HTML structure
Key Facts
- →There are 100+ semantic HTML5 elements — most developers know about 20 of them
- →ARIA (Accessible Rich Internet Applications) extends semantics for complex components
- →Google's Lighthouse accessibility audit checks for semantic HTML usage
- →Semantic HTML reduces the amount of CSS you need to write (less class naming)
Real-World Examples
Remember
Use the tag that describes the content's role. If no semantic tag fits, use <div> for layout and <span> for inline styling.
Quick Quiz
Which tag is for the main content?