HTML Semantics

“Semantics” का मतलब होता है — meaning (अर्थ)। यानी HTML में Semantic Tags वे टैग हैं जिनका नाम ही उनके काम को बताता है। ये टैग browser और search engine दोनों को बताते हैं कि उस हिस्से में क्या प्रकार की जानकारी है। उदाहरण:

<header>हेडर सेक्शन</header>
<nav>नेविगेशन मेनू</nav>
<article>आर्टिकल या पोस्ट</article>
<footer>फुटर</footer>

इन टैग्स को देखकर ही समझ आता है कि कौन-सा भाग हेडर है, कौन आर्टिकल, कौन फुटर आदि।

Semantic Tags क्यों ज़रूरी हैं?

1. SEO (Search Engine Optimization) के लिए बहुत ज़रूरी - सर्च इंजन semantic tags को देखकर समझ पाता है कि आपकी साइट की संरचना क्या है।
2. Accessibility Friendly - Screen readers (blind users के लिए software) semantic tags को पढ़कर बताएँगे कि कौन सा भाग हेडर है, कौन कंटेंट।
3. Clean Code Structure - कोड समझने और maintain करने में आसान।
4. Modern HTML Standard - HTML5 ने इन semantic elements को लाकर structure को और standard बनाया।

Non-Semantic vs Semantic HTML

Non-Semantic	Semantic

<div>, <span> <header>, <footer>, <article>, <section>

Meaningless (सिर्फ layout के लिए)

Meaningful (काम भी बताता है)

Example:

<!-- ❌ Non-semantic layout -->
<div id="top"></div>
<div id="menu"></div>
<div id="content"></div>
<div id="bottom"></div>

<!-- ✅ Semantic layout -->
<header></header>
<nav></nav>
<main></main>
<footer></footer>

Common Semantic HTML Tags और उनका उपयोग

टैग	उपयोग
<header>	पेज या सेक्शन का हेडर (logo, title, nav आदि)
<nav>	Navigation links या menu के लिए
<main>	पेज का मुख्य content
<section>	कंटेंट का एक group या topic
<article>	स्वतंत्र content (blog post, news item)
<aside>	साइडबार या अतिरिक्त जानकारी
<footer>	पेज या सेक्शन का नीचे वाला हिस्सा
<figure>	किसी image, diagram या code snippet को represent करने के लिए
<figcaption>	<figure> के अंदर caption के लिए
<mark>	Highlight किए हुए टेक्स्ट के लिए
<time>	Date/Time दिखाने के लिए
<details>	Collapsible content के लिए
<summary>	<details> का heading
<address>	Contact या author info के लिए

Example: Semantic Structure वाला Webpage

<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8">
  <title>HTML Semantics Example</title>
  <style>
    header, footer, nav, main, article, section, aside {
      border: 1px solid #ccc;
      margin: 5px;
      padding: 10px;
      border-radius: 5px;
    }
    header, footer {
      background: #f0f0f0;
      text-align: center;
    }
    nav {
      background: #333;
      color: white;
    }
    nav a {
      color: white;
      margin-right: 10px;
      text-decoration: none;
    }
    article {
      background: #fafafa;
    }
    aside {
      background: #e0e0e0;
    }
  </style>
</head>
<body>

  <header>
    <h1>My Semantic Website</h1>
    <p>HTML सीखिए आसान भाषा में</p>
  </header>

  <nav>
    <a href="#">Home</a>
    <a href="#">Tutorials</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

  <main>
    <section>
      <article>
        <h2>HTML Semantics क्या है?</h2>
        <p>Semantic tags वे HTML elements हैं जो अपने अर्थ को खुद बताते हैं।</p>
      </article>

      <article>
        <h2>Semantic tags का महत्व</h2>
        <p>इनसे SEO बेहतर होता है और कोड structure साफ रहता है।</p>
      </article>
    </section>

    <aside>
      <h3>Related Topics</h3>
      <ul>
        <li>HTML Layout</li>
        <li>HTML Head</li>
        <li>HTML Accessibility</li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>© 2025 My Semantic Website | Designed by CodeKeet</p>
  </footer>

</body>
</html>

Output: एक साफ-सुथरा semantic layout जो user और search engine दोनों के लिए readable है।

Extra Semantic Tags Example

<figure>
  <img src="sunset.jpg" alt="Beautiful Sunset">
  <figcaption>यह तस्वीर एक सुंदर सूर्यास्त की है।</figcaption>
</figure>

<mark> Example:

<p>HTML5 में <mark>Semantic Tags</mark> बहुत important हैं।</p>

<time> Example:

<p>Last updated on <time datetime="2025-10-26">26 October 2025</time></p>

<details>
  <summary>HTML Semantics का महत्व?</summary>
  <p>Semantic tags से कोड को meaning मिलता है और SEO बेहतर होता है।</p>
</details>

Semantic Tags vs Accessibility

Semantic tags screen readers को बताते हैं कि
कौन सा section header है
कौन content है
कौन navigation links हैं

इससे visually impaired users को वेबसाइट नेविगेट करना आसान होता है।

Semantic Tags और SEO

सर्च इंजन semantic HTML structure को पढ़कर समझते हैं —
पेज में कौन सी जानकारी important है
कौन सा भाग heading है
कौन related content है
इससे आपकी वेबसाइट Google पर बेहतर rank करती है।

Summary

Tag	अर्थ
`<header>`	Header section
`<nav>`	Navigation links
`<main>`	Main content area
`<section>`	Content का group
`<article>`	स्वतंत्र content
`<aside>`	Side info
`<footer>`	Footer section
`<figure>` / `<figcaption>`	Image और caption
`<mark>`	Highlight text
`<time>`	Date/Time
`<details>` / `<summary>`	Collapsible info

Practice Task

<header>, <nav>, <main>, <aside>, <footer> का उपयोग हो
एक <figure> में image और <figcaption> caption दें
<mark>, <time>, और <details> टैग भी जोड़ें
और semantic layout को सुंदर बनाने के लिए CSS लागू करें