📝 Days 6–10 – Forms, Semantics और SEO · दिन 08
दिन 8: Semantic HTML5 Page Layout
⏱ 75 min📶 Intermediate🎯 100% self-study
दिन 8 / 15
✅ आज आप सीखेंगे
- Semantic tags “div soup” से बेहतर क्यों
- header, nav, main, footer landmarks
- section vs article vs aside
- div और span – कब सही हैं
- time, address और पूरा page ढाँचा
🏢 असली दुनिया में
Google, screen readers और भविष्य के आप – सबको समझना है कि Sharma Sweets page का कौन सा हिस्सा menu है, कौन सा blog post और कौन सा footer। Semantic tags page के हिस्सों पर label लगाते हैं – दुकान के अंदर के signboards की तरह।
div soup vs semantic HTML
Div soup
- <div class="top">
- <div class="menu">
- <div class="content">
- Google और screen readers के लिए बेमतलब
Semantic HTML5
- <header>
- <nav>
- <main>
- Landmarks जिन पर users jump कर सकते हैं
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 | किसके लिए | सीधा नियम |
|---|---|---|
| header | Page या section का intro: logo, title | article के अंदर भी हो सकता है |
| nav | मुख्य navigation blocks | हर links के group के लिए नहीं |
| main | Unique मुख्य content | हर page पर ठीक एक |
| section | Heading वाला विषय-समूह | h2/h3 होना चाहिए |
| article | अपने-आप में पूरा: blog post, product card, review | अकेले भी समझ आए |
| aside | जुड़ा पर गौण: sidebar, tips, ads | इसके बिना भी page चले |
| footer | अंतिम जानकारी: copyright, contact, links | article के footer के लिए भी |
section, article या div?
- 1क्या यह अकेले share हो सकता है? → article
- 2क्या यह heading वाला page का विषय-भाग है? → section
- 3क्या यह सिर्फ़ styling/layout के लिए है? → div
- 4क्या यह styling के लिए inline text है? → 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 और दूसरे छोटे 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>💡 time और address क्यों?
datetime मशीनों को सटीक तारीख़ देता है जबकि इंसान “14 July” पढ़ते हैं। Search engines और calendars इसे इस्तेमाल कर सकते हैं। address page के मालिक की contact जानकारी बताता है।
पूरा page ढाँचा
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
✔ HTML5 landmarks से pages का ढाँचा✔ section, article, aside और div में चुनना✔ time और address सही इस्तेमाल करना✔ Skip link और हर page पर एक main
Practice tasks
🏋️ Practice – ख़ुद करें
Task 1: इस div soup को semantic बनाएँ:
<div id="top">Logo</div><div id="links">…</div><div id="post">Blog post</div><div id="bottom">©</div>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: तीन articles वाली news-style blog list बनाएँ, हर एक में heading,
time और “Read more” link।Task 3: कोई बड़ी website खोलें, right-click → Inspect, और list बनाएँ कि वह कौन से landmark tags इस्तेमाल करती है।
Quick quiz
🧠 Quick Quiz – ख़ुद को जाँचें
1. हर page पर कितने main?
Unique मुख्य content।
2. अकेले समझ आने वाला product card सबसे अच्छा…
अपने-आप में पूरा content।
3. Related tips वाला sidebar…
गौण content।
4. Machine-readable date कौन देता है?
datetime में ISO format।
5. div कब लेना चाहिए?
Generic container।
Interview corner
💼 Interview Corner
Semantic HTML क्यों लें?
यह accessibility (screen readers के लिए landmark navigation), SEO (search engines ढाँचा समझते हैं), maintainability (पढ़ने लायक code) और default browser व्यवहार सुधारता है, बिना extra cost के।
section vs article?
article अपने-आप में पूरा और अलग से बाँटने लायक है (post, comment, product)। section content का विषय-आधारित group है, आमतौर पर heading के साथ, page या article के अंदर।
सारांश
- header, nav, main, aside, footer page landmarks हैं।
- article = अपने-आप में पूरा; section = heading वाला विषय-समूह; div/span = कोई अर्थ नहीं।
- time datetime और address machine-readable अर्थ जोड़ते हैं।
- हर page पर एक main और skip link accessibility सुधारते हैं।
➡️ आगे
Day 9: head – meta tags, Open Graph previews, favicon और SEO basics ताकि Google और WhatsApp आपका page सुंदर दिखाएँ।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
क्या semantic tags page का look बदलते हैं?
मुश्किल से – ज़्यादातर div जैसे दिखते हैं। इनकी value अर्थ में है; look CSS से आता है।
क्या कई header और footer हो सकते हैं?
हाँ – एक page के लिए और बाकी articles या sections के अंदर। सिर्फ़ main unique होना चाहिए।
