Semantic HTML: Modern Layouts
header, nav, main, section, article, aside, and footer
Before HTML5, developers built every layout with <div> tags. The result was code that looked like this: <div id="header">, <div id="nav">, <div id="footer"> — divs pretending to have meaning. HTML5 introduced tags that actually have meaning. This is semantic HTML.
Why Semantics Matter
When you use a <section> instead of a <div>, you are telling three audiences simultaneously:
- The browser — how to handle the content structurally
- Screen readers — so blind users can navigate by landmark ("skip to main content")
- Search engines — Google understands
<article>content is the primary subject of the page
The visual result is often identical. The structural meaning is completely different.
<header> — Introductory Content
The <header> tag represents introductory content for a page or a section. It typically contains the site logo, main heading, and navigation.
Think of a newspaper masthead — the top strip that shows "The New York Times," the date, and the price. It tells you what publication you are reading.
<header>
<h1>SkyBrance</h1>
<p>Free coding tutorials, built for clarity.</p>
</header>
Important distinction: <header> (visible page element) is completely different from <head> (invisible metadata section). They are not interchangeable.
A <header> can also appear inside an <article> to contain the article's title and author — not just for the whole page.
<nav> — Navigation
The <nav> tag defines a block of major navigation links. Use it for the main menu, a table of contents, or pagination — not every group of links on the page.
Think of a mall directory. It doesn't list every product; it lists the departments so you can find your way around.
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/courses">Courses</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
Accessibility benefit: Screen reader software can announce "Navigation landmark" and offer a "Skip navigation" option, letting blind users jump straight to the content rather than listening to every link on the page. A <div> provides no such shortcut.
<main> — Core Content
The <main> tag marks the unique content of a page — the part that changes from page to page. It should not contain anything repeated across pages (logos, navigation, footers).
Think of a TV show: the opening credits are repeated every episode (header), the closing credits are repeated every episode (footer), but the actual story of this specific episode is the <main>.
<main>
<h1>Introduction to CSS</h1>
<p>Today we are going to learn how to style web pages...</p>
</main>
Rule: There can only be one <main> per document.
<section> — Thematic Grouping
The <section> tag groups related content that forms a distinct theme. Each section should have its own heading.
Think of textbook chapters: "Chapter 1: The Basics," "Chapter 2: Advanced Topics." Each is a <section>.
<section>
<h2>Our Services</h2>
<p>We design and build fast, accessible websites.</p>
</section>
<section>
<h2>Client Testimonials</h2>
<p>"SkyBrance changed how I think about code." — Priya S.</p>
</section>
<section> vs <div>
| Tag | Purpose |
|---|---|
<div> |
Layout wrapper — purely for styling |
<section> |
Content grouping — carries meaning |
Rule of thumb: if you can give the group of content a meaningful heading (like "Services" or "FAQ"), use <section>. If you just need a box for styling, use <div>.
<article> — Independent Content
The <article> tag marks content that is self-contained — it should make complete sense even if you took it out of the site and published it elsewhere.
Think of a magazine article. If you rip a page out and hand it to a friend, they can read it and understand it perfectly without the rest of the magazine.
<article>
<header>
<h2>The History of HTML</h2>
<p>By Tim B. — Published June 12, 2026</p>
</header>
<p>HTML was invented by Tim Berners-Lee in 1991...</p>
<footer>
<p>Tags: HTML, Web History</p>
</footer>
</article>
Use <article> for:
- Blog posts
- News stories
- Forum comments
- Product cards
- User reviews
<aside> — Sidebar Content
The <aside> tag marks content that is indirectly related to the main content — supplementary but not essential. If you removed it, the main text would still make complete sense.
Think of the glossary box in a textbook. While reading about photosynthesis, there is a small box defining "Chlorophyll" on the side. Helpful — but the main text doesn't depend on it.
<aside>
<h3>About the Author</h3>
<p>Aniket is a web developer and educator from India.</p>
</aside>
Use <aside> for:
- Author bios
- "Related posts" links
- Pull quotes
- Advertisements
- Glossary definitions
<footer> — Closing Content
The <footer> tag defines a footer for a page or a section. It typically contains copyright notices, contact information, and sitemap links — the sign-off at the bottom of a letter.
<footer>
<p>© 2026 SkyBrance Tech Private Limited. All rights reserved.</p>
<p><a href="mailto:contact@skybrance.com">Contact Us</a></p>
</footer>
Like <header>, a <footer> can appear inside an <article> (to show publication date and tags) — not only at the bottom of the whole page.
The Complete Page Structure
Here is how all nine semantic tags come together in a real, professional HTML page. This is the standard structure used by developers worldwide today.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Professional Website</title>
</head>
<body>
<header>
<h1>SkyBrance</h1>
<p>Learn to code, clearly.</p>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#courses">Courses</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<main>
<article>
<header>
<h2>Introduction to HTML</h2>
<p>Posted by Aniket · June 2026</p>
</header>
<section>
<h3>What is HTML?</h3>
<p>HTML is the skeleton of every webpage...</p>
</section>
<section>
<h3>Your First Document</h3>
<p>Every HTML file starts with a DOCTYPE...</p>
</section>
<footer>
<p>Tags: HTML, Beginners, Web Basics</p>
</footer>
</article>
<aside>
<h3>Related Chapters</h3>
<ul>
<li><a href="/html/text-typography">Text & Typography</a></li>
<li><a href="/html/links">Navigation & Links</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 SkyBrance Tech. All rights reserved.</p>
</footer>
</body>
</html>
Bookmark this structure. Every professional website you build starts from exactly this skeleton.