HTML Semantics
In this page:
<header>...</header>
<nav>...</nav>
<main>
<article>...</article>
<section>...</section>
</main>
<footer>...</footer>Semantic बनाम Non-Semantic Elements
Non-semantic elements (जैसे div और span) अपने content के बारे में कोई अर्थ नहीं बताते। Semantic elements (जैसे header, article, और footer) browsers और developers दोनों को अपना अर्थ स्पष्ट रूप से बताते हैं।
उदाहरण: Semantic vs. Non-Semantic Elements
<div>Generic container, no meaning</div>
<header>Semantic container, describes its role</header>section और article से Content को Section में बांटना
section tag content की एक thematic grouping define करता है, आमतौर पर एक heading के साथ। article tag पूरी तरह independent, self-contained content का एक टुकड़ा represent करता है जिसे दूसरी sites पर भी distribute किया जा सकता है।
उदाहरण: Sectioning Content with section and article
<article>
<section>Standalone blog post content</section>
</article>Navigation और Headers
nav element खासतौर पर मुख्य navigation menus के लिए reserved है। अपने header और nav elements को जोड़ने से एक स्पष्ट layout hierarchy बनती है जिसे screen readers तुरंत parse कर सकते हैं।
उदाहरण: Navigation and Headers
<header>
<nav>Main site navigation</nav>
</header>Footers और Sidebars
footer element आपके page या section के closing section को define करता है, जिसमें meta information होती है। aside tag उस content को wrap करता है जो main page flow से थोड़ा-बहुत related है, जैसे advertisements या sidebars।
उदाहरण: Footers and Sidebars
<footer>Contact info</footer>
<aside>Related links</aside>Inline Text Semantics
Semantic layout सिर्फ बड़े structural columns के बारे में नहीं है। time (machine-readable dates के लिए) और mark (search query highlighters के लिए) जैसे inline text tags आपके शब्दों में समृद्ध context जोड़ते हैं।
उदाहरण: Inline Text Semantics
<p>Posted <time datetime="2024-01-15">January 15</time>, results for <mark>HTML</mark>.</p>Article बनाम Section बनाम Div
यह HTML semantics के सबसे उलझाने वाले हिस्सों में से एक है। Article उस self-contained content के लिए है जो अकेले भी अर्थपूर्ण हो, जैसे कोई blog post। Section content की thematic grouping के लिए है। Div बिना किसी semantic अर्थ वाले layout के लिए है।
- खुद से पूछें: अगर इस content को दूसरी website पर कॉपी किया जाए, तो क्या यह फिर भी अर्थ रखेगा?
- अगर हाँ, तो article इस्तेमाल करें।
- अगर नहीं, तो section या div इस्तेमाल करें।
उदाहरण: Article vs Section vs Div
<article>Self-contained blog post</article>
<section>Thematic grouping of related content</section>
<div>Generic layout wrapper</div>main Element
main element page के एक ही, केंद्रीय content को wrap करता है — वह content जो उस page के लिए unique है, header, footer, और sidebars जैसी दोहराई जाने वाली चीज़ों को छोड़कर।
हर page में सिर्फ एक ही दिखने वाला main element होना चाहिए, और screen readers इसे एक landmark के रूप में इस्तेमाल करते हैं ताकि users सीधे मुख्य content पर जा सकें।
उदाहरण: The main Element
<main id="main-content">
Unique page content
</main>Figure और Figcaption
figure element किसी image, diagram, या code snippet को उसके caption के साथ figcaption के जरिए group करता है। इससे visual content और उसकी व्याख्या semantically जुड़ी रहती है, भले ही figure को बाद में layout द्वारा page पर कहीं और move कर दिया जाए।
उदाहरण: Figure and Figcaption
<figure>
<img src="diagram.jpg" alt="Diagram">
<figcaption>System architecture diagram</figcaption>
</figure>time Element
time element dates और times को इस तरह mark up करता है कि इंसान और machine दोनों उन्हें समझ सकें।
datetime attribute में एक machine-readable format होता है, जबकि दिखने वाला text readers के लिए जितना सहज हो, उतने तरीके से लिखा जा सकता है, जैसे 'पिछले मंगलवार' या '3 दिन पहले'।
- Search engines और browser extensions time elements को पहचान सकते हैं और उन्हें calendar reminders में बदल सकते हैं या आने वाले events को highlight कर सकते हैं।
- Accepted attributes:
- datetime — valid date/time string, जैसे 2026-01-15 | 2026-01-15T10:30 | PT2H | 2026
उदाहरण: The time Element
<p>Published <time datetime="2024-03-05">last Tuesday</time></p>address Element
address element किसी page या article के लेखक की contact information, जैसे email address, phone number, या physical mailing address को mark up करता है।
यह खासतौर पर contact details के लिए है, content में दिखने वाले किसी भी random postal address के लिए नहीं।
उदाहरण: The address Element
<footer>
<address>Contact: [email protected]</address>
</footer>Mark और Abbr Elements
mark element text को मौजूदा context के हिसाब से relevant होने के लिए highlight करता है, जैसे किसी query से मेल खाते search results, और browsers इसे default रूप से yellow background के साथ render करते हैं।
abbr element किसी abbreviation या acronym को mark up करता है, और उसका title attribute hover करने पर एक tooltip की तरह पूरा विस्तारित अर्थ बताता है।
उदाहरण: Mark and Abbr Elements
<p>Results for <mark>HTML</mark> and <abbr title="Cascading Style Sheets">CSS</abbr>.</p>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: