HTML Semantic Tags ऐसे HTML tags होते हैं जो अपने नाम से ही अपने content का अर्थ (meaning) बताते हैं। इनका उपयोग वेबसाइट के अलग-अलग भागों को सही तरीके से व्यवस्थित करने के लिए किया जाता है।

उदाहरण:

• <header> → वेबसाइट का ऊपरी भाग
• <footer> → वेबसाइट का निचला भाग
• <article> → स्वतंत्र लेख या पोस्ट
• <nav> → Navigation links

Semantic tags का उपयोग करने से Browser, Search Engine और Developer को वेबसाइट की structure समझने में आसानी होती है।

Semantic Tags के फायदे

1. SEO (Search Engine Optimization) बेहतर होता है

Search engine वेबसाइट के content को आसानी से समझ पाते हैं।

2. Code Readable बनता है

Developer को पता चलता है कि कौन सा section किस काम के लिए है।

3. Accessibility बेहतर होती है

Screen readers जैसे tools वेबसाइट को आसानी से समझ सकते हैं।

4. Website का Structure अच्छा बनता है

HTML के मुख्य Semantic Tags

1. <header> Tag

Header का use वेबसाइट या किसी section का शुरुआत वाला भाग बनाने के लिए किया जाता है।

इसमें सामान्यतः:

• Logo
• Website Name
• Heading
• Navigation

होते हैं।

Syntax:

<header>
    <h1>My Website</h1>
    <p>Welcome to my website</p>
</header>

2. <nav> Tag

<nav> tag का use Navigation links बनाने के लिए किया जाता है।

Example:

• Home
• About
• Contact

Syntax:

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

---

3. <main> Tag

<main> tag का use वेबसाइट के मुख्य content को दिखाने के लिए किया जाता है।

एक page में सामान्यतः एक ही <main> tag होना चाहिए।

Syntax:

<main>
    <h2>About HTML</h2>
    <p>HTML is a markup language.</p>
</main>

---

4. <section> Tag

<section> tag का use Content को अलग-अलग sections में divide करने के लिए किया जाता है।

Example:

• About section
• Services section
• Contact section

Syntax:

<section>
    <h2>Our Services</h2>
    <p>We provide web development services.</p>
</section>

---

5. <article> Tag

ऐसे content के लिए जो अपने आप में complete हो |

इसका उपयोग आर्टिकल बनाने के लिए किया जाता है |

Example:

• Blog post
• News article
• Product review

Syntax:

<article>
    <h2>HTML Tutorial</h2>
    <p>Learn HTML from basic to advanced.</p>
</article>

---

6. <aside> Tag

Use:
Main content के अलावा extra information दिखाने के लिए किया जाता है।

Example:

• Sidebar
• Related links
• Advertisement

Syntax:

<aside>
    <h3>Related Topics</h3>
    <p>CSS Tutorial</p>
</aside>

---

7. <footer> Tag

Use:
Footer का use Website के अंतिम भाग के लिए किया जाता है।

इसमें:

• Copyright
• Social links
• Contact details

होते हैं।

Syntax:

<footer>
    <p>Copyright © 2026 My Website</p>
</footer

8. <figure> Tag

Use:
Figure tag का use Image और उसके description के लिए किया जाता है।

Syntax:

<figure>
    <img src="image.jpg" alt="Nature">
    <figcaption>
        Beautiful Nature
    </figcaption>
</figure>

Practice Question in Hindi