Semantic Tags: header nav main article footer
Replace meaningless divs with semantic HTML5 elements and understand how they help browsers, search engines, and screen readers.
Semantic Tags: header nav main article footer is a free Frontend Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Is Semantic HTML?
Semantic HTML uses elements that describe the meaning of content, not just its appearance. <article> says "this is a self-contained piece of content". A generic <div> says nothing.
Before Semantics: Div Soup
Early web developers built layouts entirely from <div> and <span> elements. Screen readers couldn't distinguish navigation from content from ads. Search engines had to guess the page structure.
<!-- Old way -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
<div class="footer">...</div><header> — Site or Section Header
The <header> element contains introductory content for the page or a section: typically the logo, site name, and navigation. A page can have multiple headers — one for the site and one per article.
<header>
<a href="/"><img src="logo.svg" alt="CoddyKit"></a>
<nav>...</nav>
</header><nav> — Navigation Links
Use <nav> to wrap sets of navigation links: the main menu, a breadcrumb trail, or a table of contents. Screen readers announce nav landmarks so users can jump directly to or past them.
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/courses">Courses</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav><main> — The Primary Content
There should be exactly one <main> per page. It contains the dominant content unique to this page — not repeated elements like navigation or footer. Assistive technologies let users jump directly to main.
<main>
<h1>Learn Frontend Development</h1>
<p>Start your journey here...</p>
</main><article> — Self-Contained Content
<article> wraps content that makes sense on its own and could be syndicated: a blog post, a news item, a user comment, a product card. Ask: "Would this make sense if I copied it to another site?"
<article>
<h2>Introduction to CSS Grid</h2>
<p>CSS Grid revolutionised web layout...</p>
<time datetime="2025-01-15">January 15, 2025</time>
</article><section> — Thematic Grouping
<section> groups related content that belongs together — chapters, tabs, or topic areas. Each section typically has a heading. If the content could stand alone, use article instead.
<section>
<h2>Core Technologies</h2>
<p>HTML, CSS, and JavaScript...</p>
</section><aside> — Supplementary Content
<aside> contains content tangentially related to the surrounding content: sidebars, pull quotes, advertising, or related links. Screen readers expose it as a complementary landmark.
<footer> — Closing Content
<footer> contains information about its containing element: copyright notices, contact links, related documents. Like header, a page can have multiple footers.
<footer>
<p>© 2025 CoddyKit. All rights reserved.</p>
<nav aria-label="Footer">
<a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
</nav>
</footer>Heading Hierarchy: h1 through h6
Use headings to create a logical document outline. There should be only one <h1> per page. Subheadings use h2, sub-subheadings use h3, and so on. Don't skip levels or use headings just for their visual size.
Why Semantics Matter for SEO and A11y
Search engines use semantic structure to understand page content — a page with proper landmarks and heading hierarchy often ranks better. Screen reader users navigate by landmarks and headings, making semantics a direct accessibility concern.
Quick Check
Which element should wrap the primary unique content of a page (present exactly once)?
Recap: Semantic HTML5 Landmarks
Use <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> to give your document structure that browsers, search engines, and screen readers understand.
Frequently asked questions
Is the “Semantic Tags: header nav main article footer” lesson free?
Yes — the full text of “Semantic Tags: header nav main article footer” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “Semantic Tags: header nav main article footer”?
Replace meaningless divs with semantic HTML5 elements and understand how they help browsers, search engines, and screen readers. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Semantic Tags: header nav main article footer” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Document Structure: DOCTYPE html head body
- Semantic Tags: header nav main article footer
- Text Images Links and Lists
- Forms: input label button