📝 Days 6–10 – Forms, Semantics & SEO · Day 08
Day 8: Semantic HTML5 Page Layout
⏱ 75 min📶 Intermediate🎯 100% self-study
Day 8 / 15
✅ Today you will learn
- Why semantic tags beat “div soup”
- header, nav, main, footer landmarks
- section vs article vs aside
- div and span – when they are right
- time, address and a full page skeleton
🏢 In the real world
Google, screen readers and your future self all need to understand which part of the Sharma Sweets page is the menu, which is a blog post and which is the footer. Semantic tags label the parts of a page – like the signboards inside the shop.
div soup vs semantic HTML
Div soup
- <div class="top">
- <div class="menu">
- <div class="content">
- Meaningless to Google and screen readers
Semantic HTML5
- <header>
- <nav>
- <main>
- Landmarks users can jump to
The page landmarks
HTML
<style>
body{font-family:system-ui;margin:0;font-size:14px}
header,nav,main,aside,footer,section,article{border:2px dashed;padding:8px;margin:6px;border-radius:8px}
header{border-color:#e34f26} nav{border-color:#2563eb} main{border-color:#16a34a} aside{border-color:#9333ea} footer{border-color:#64748b}
.wrap{display:flex;gap:6px} main{flex:3} aside{flex:1}
b.t{font-size:11px;color:#555;display:block}
</style>
<header><b class="t"><header></b>🍬 Sharma Sweets
<nav><b class="t"><nav></b>Home · Menu · Contact</nav>
</header>
<div class="wrap">
<main><b class="t"><main></b>
<section><b class="t"><section></b>Our bestsellers…</section>
<article><b class="t"><article></b>Blog: How ghewar is made</article>
</main>
<aside><b class="t"><aside></b>Today’s offer</aside>
</div>
<footer><b class="t"><footer></b>© 2026 · Johari Bazaar, Jaipur</footer>| Tag | Use for | Rule of thumb |
|---|---|---|
| header | Intro of the page or of a section: logo, title | Can appear inside article too |
| nav | Major navigation blocks | Not every group of links |
| main | The unique main content | Exactly one per page |
| section | A themed group with a heading | Should have an h2/h3 |
| article | Self-contained piece: blog post, product card, review | Would make sense on its own |
| aside | Related but secondary: sidebar, tips, ads | Page works without it |
| footer | Closing info: copyright, contact, links | Also for an article’s footer |
section, article or div?
- 1Could it be shared/syndicated on its own? → article
- 2Is it a themed part of the page with a heading? → section
- 3Is it only for styling/layout? → div
- 4Is it inline text for styling? → span
HTML
<section aria-labelledby="best">
<h2 id="best">Bestsellers</h2>
<article>
<h3>Kaju katli</h3>
<p>Cashew fudge with silver vark. <span class="price">₹900/kg</span></p>
</article>
<article>
<h3>Ghewar</h3>
<p>Rajasthani monsoon special. <span class="price">₹650/kg</span></p>
</article>
</section>time, address and other small semantics
HTML
<article>
<header>
<h2>How we make ghewar</h2>
<p>By Ramesh Sharma · <time datetime="2026-07-14">14 July 2026</time></p>
</header>
<p>Ghewar needs a cold, humid day …</p>
<footer>Tags: monsoon, Rajasthan</footer>
</article>
<footer>
<address>
Sharma Sweets, Johari Bazaar, Jaipur 302003<br>
<a href="tel:+919829012345">98290 12345</a>
</address>
</footer>💡 Why time and address?
datetime gives machines an exact date even when humans read “14 July”. Search engines and calendars can use it. address marks contact information for the page owner.
The full page skeleton
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sharma Sweets – Fresh Mithai in Jaipur</title>
</head>
<body>
<a href="#content">Skip to content</a>
<header>
<a href="/"><img src="/assets/img/tutorials/html/logo.png" alt="Sharma Sweets home" width="48" height="48"></a>
<nav aria-label="Main"><a href="/">Home</a> · <a href="menu.html">Menu</a> · <a href="contact.html">Contact</a></nav>
</header>
<main id="content">
<h1>Fresh mithai since 1985</h1>
<section><h2>Bestsellers</h2><p>Kaju katli, ghewar, ladoo…</p></section>
<section><h2>Visit us</h2><p>Johari Bazaar, Jaipur. Open 8 AM – 10 PM.</p></section>
</main>
<aside><h2>Diwali offer</h2><p>20% off gift boxes.</p></aside>
<footer><p>© 2026 Sharma Sweets</p></footer>
</body>
</html>🏅 Job skills unlocked today
✔ Structure pages with HTML5 landmarks✔ Choose between section, article, aside and div✔ Use time and address correctly✔ Add a skip link and one main per page
Practice tasks
🏋️ Practice – do it yourself
Task 1: Rewrite this div soup semantically:
<div id="top">Logo</div><div id="links">…</div><div id="post">Blog post</div><div id="bottom">©</div>Show solution
HTML
<header>Logo <nav aria-label="Main"><a href="/">Home</a> · <a href="/blog/">Blog</a></nav> </header> <main> <article><h1>Blog post</h1><p>…</p></article> </main> <footer>© 2026</footer>
Task 2: Mark up a news-style blog list with three articles, each with a heading, a
time and a “Read more” link.Task 3: Open any big website, right-click → Inspect, and list which landmark tags it uses.
Quick quiz
🧠 Quick Quiz – test yourself
1. How many main elements per page?
The unique main content.
2. A product card that makes sense alone is best as…
Self-contained content.
3. Sidebar with related tips is…
Secondary content.
4. Which gives a machine-readable date?
ISO format in datetime.
5. div should be used…
A generic container.
Interview corner
💼 Interview Corner
Why use semantic HTML?
It improves accessibility (landmark navigation for screen readers), SEO (search engines understand structure), maintainability (readable code) and default browser behaviour, with no extra cost.
section vs article?
article is self-contained and independently distributable (post, comment, product). section is a thematic grouping of content, usually with a heading, inside a page or article.
Summary
- header, nav, main, aside, footer are page landmarks.
- article = self-contained; section = themed group with heading; div/span = no meaning.
- time datetime and address add machine-readable meaning.
- One main per page and a skip link improve accessibility.
➡️ Next
Day 9: the head – meta tags, Open Graph previews, favicon and SEO basics so Google and WhatsApp show your page beautifully.
Frequently Asked Questions
Do semantic tags change how the page looks?
Hardly – most look like a div. Their value is meaning; the look comes from CSS.
Can I have several header and footer elements?
Yes – one for the page and others inside articles or sections. Only main must be unique.
