Semantic HTML Tags: मतलब वाले Tag और SEO
4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
Semantic HTML का मतलब है ऐसे tag इस्तेमाल करना जो बताते हैं कि content क्या है, न कि सिर्फ वह कैसा दिखता है। <article> का मतलब है "यह लिखने का अपने-आप में पूरा टुकड़ा है"। <nav> का मतलब है "यह navigation है"। एक <div> का कोई मतलब नहीं होता। दोनों screen पर बिल्कुल एक जैसे दिख सकते हैं — लेकिन Google और screen reader के लिए वे बहुत अलग हैं।
मुख्य semantic tags
<header>,<footer>— किसी page या section का ऊपर और नीचे का हिस्सा।<nav>— navigation links।<main>— मुख्य content (एक page पर एक)।<article>— blog post, news story, product card।<section>— page के अंदर content का एक themed समूह।<aside>— मुख्य content से जुड़ी side content।<figure>और<figcaption>— caption वाली image।<time>— तारीख या समय, ऐसे format में जिसे machine पढ़ सके।
यह क्यों मायने रखता है
Search engine: Google आपकी page को समझने के लिए semantic tags इस्तेमाल करता है। <article> tag के अंदर वाला article, divs के ढेर के अंदर वाले उसी text से ज़्यादा आसानी से search results में आ सकता है। Accessibility: screen reader इस्तेमाल करने वाला blind visitor पूरी page सुने बिना सीधे <nav> या <main> content पर जा सकता है। Maintenance: छह महीने बाद <article> बता देता है कि code क्या है; <div class="x"> कुछ नहीं बताता।
"Semantic" का मतलब क्या है
Semantic का मतलब है "मतलब वाला"। Semantic tag browser — और Google, और screen reader — को बताता है कि उसकी content क्या है, न कि सिर्फ वह कैसी दिखती है। <article> कहता है "यह लिखने का अपने-आप में पूरा टुकड़ा है"। <nav> कहता है "ये navigation links हैं"। एक <div> कुछ नहीं कहता। Screen पर रूप एक जैसा, नीचे मतलब बिल्कुल अलग।
याद रखने की तरकीब: Tag बोले मतलब, div बोले कुछ नहीं — semantic ही सही पहचान।
मुख्य semantic tags
| Tag | मान | विवरण |
|---|---|---|
<header> | — | किसी page या section का ऊपर का हिस्सा — logo, title, intro। |
<nav> | — | Navigation links का समूह, आमतौर पर main menu। |
<main> | — | Page की मुख्य content। एक page पर सिर्फ एक। |
<section> | — | Content का एक themed समूह, आमतौर पर अपने heading के साथ। |
<article> | — | अपने-आप में पूरा टुकड़ा — blog post, news story, product card। |
<aside> | — | Side content — sidebar, related links, advertisement। |
<figure> / <figcaption> | — | Caption वाली image (या diagram)। |
<footer> | — | किसी page या section का नीचे का हिस्सा — copyright, contact, links। |
Semantic तरीके से बनाई गई blog post पढ़ने में आसान होती है — लोगों के लिए और machines के लिए भी:
<article> <header><h2>My First Post</h2></header> <p>The post text goes here.</p> <footer>Posted on 28 October 2026</footer> </article>
<section> में लगभग हमेशा एक heading होनी चाहिए। अगर आप उसके लिए heading नहीं लिख सकते, तो शायद वह section है ही नहीं — सादा <div> ही सही tag होगा।<article> का इस्तेमाल किसी भी ऐसी चीज़ के लिए करें जो अकेले खड़ी हो सके — blog post, course card, news item। अगर आप उसे RSS feed में अकेले देखने की कल्पना कर सकते हैं, तो वह article है।आम गलतियाँ
- हर चीज़ के लिए
<div>इस्तेमाल करना — header, nav और footer किसी वजह से बने हैं। - दो
<main>element इस्तेमाल करना — एक page, एक main। - एक paragraph को
<section>में लपेटना — section जुड़ी हुई content का समूह होती है, एक line का wrapper नहीं। - Site का menu div में रखना,
<nav>के बजाय — screen reader user तब उस पर नहीं जा सकते।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Semantics</title>
</head>
<body>
<header><h1>KAMALDNP Blog</h1></header>
<nav><a href="#">Home</a> | <a href="#">Blog</a></nav>
<main>
<article>
<h2>How to Learn HTML</h2>
<p>Start with the basics, practise every day…</p>
<time datetime="2026-10-27">27 October 2026</time>
</article>
</main>
<footer><p>© 2026 KAMALDNP Academy</p></footer>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. सेमांटिक एचटीएमएल का क्या अर्थ है?
ऐसे टैग इस्तेमाल करना जो बताएँ कि कंटेंट क्या है, सिर्फ़ यह नहीं कि वह कैसा दिखता है, ताकि गूगल और स्क्रीन रीडर उसे समझ सकें।
2. आर्टिकल और डिव में क्या अंतर है?
आर्टिकल का अर्थ है अपने आप में पूरा लेख, जैसे ब्लॉग पोस्ट, जबकि डिव का कोई अर्थ नहीं होता।
3. सेमांटिक टैग स्क्रीन रीडर की कैसे मदद करते हैं?
स्क्रीन रीडर से पढ़ने वाला सीधे नेव या मुख्य कंटेंट पर जा सकता है, उसे पूरा पेज सुनने की ज़रूरत नहीं पड़ती।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
