अपने बेनाम div को उन टैग से बदलें जो आपकी संरचना को अर्थ देते हैं।
इस पाठ को Kodokon में खोलेंपूरी तरह div एलिमेंट से बना पेज काम तो करता है, लेकिन वह कुछ कहता नहीं: न स्क्रीन रीडर से, न सर्च इंजन से, और न उस सहकर्मी से जो छह महीने बाद आपका कोड संभालेगा। सिमैंटिक टैग हर क्षेत्र की भूमिका बताते हैं: header, nav, main, article, section, footer।
<body>
<header>
<nav aria-label="Main navigation">
<a href="/">Home</a>
<a href="/articles">Articles</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<h1>The blog for curious devs</h1>
</main>
<footer>
<p>© 2026 Kodokon. All rights reserved.</p>
</footer>
</body>header पेज के शीर्ष (लोगो, नेविगेशन) को समूहबद्ध करता है, footer समापन जानकारी (कानूनी सूचनाएं, द्वितीयक लिंक) को। main में मुख्य सामग्री होती है और वह पेज पर अद्वितीय होना चाहिए। nav एक नेविगेशन क्षेत्र को चिह्नित करता है: मुख्य नेविगेशन, एक ब्रेडक्रम्ब या विषय-सूची।
सबसे पेचीदा भेद: article बनाम section। अंगूठे का नियम: अगर ब्लॉक संदर्भ के बाहर भी अर्थ रखता है (एक ब्लॉग पोस्ट, एक टिप्पणी, एक प्रोडक्ट कार्ड), तो वह article है। अगर वह किसी सामग्री के भीतर, अपने स्वयं के शीर्षक के साथ, एक विषयगत समूह है, तो वह section है।
<main>
<article>
<h1>Understanding semantic HTML</h1>
<section>
<h2>Accessibility</h2>
<p>Screen readers rely on the
structure to navigate.</p>
</section>
<section>
<h2>SEO</h2>
<p>Search engines understand the page better.</p>
</section>
</article>
</main>मानसिक अभ्यास: किसी ई-कॉमर्स प्रोडक्ट पेज पर, आप ग्राहक समीक्षाओं की सूची को कैसे मार्कअप करेंगे? हर समीक्षा में एक लेखक, एक तारीख़ और अपने आप में खड़ी रहने वाली सामग्री होती है: इसलिए हर समीक्षा एक article है, और उन्हें समूहबद्ध करने वाला "Customer reviews" ब्लॉक, अपने शीर्षक के साथ, एक section है।