1. HTML Semantic Elements क्या होते हैं?
Semantic Elements वे HTML tags होते हैं जो अपने नाम से ही यह बता देते हैं कि उनके अंदर का content किस प्रकार का है।
यानि:
- Browser को structure समझ आता है
- Search Engine को content का meaning पता चलता है
- Developers को code पढ़ने में आसानी होती है
Non-Semantic vs Semantic Example
❌ Non-Semantic:
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
✅ Semantic:
<header></header>
<main></main>
<footer></footer>2. Semantic Elements क्यों ज़रूरी हैं?
1️⃣ SEO के लिए
Search engines semantic tags से यह समझ पाते हैं कि:
- कौन सा हिस्सा main content है
- कौन सा navigation है
- कौन सा footer है
2️⃣ Accessibility के लिए
Screen readers semantic tags से visually impaired users को सही जानकारी देते हैं।
3️⃣ Clean & Readable Code
Code self-explanatory बनता है।
3. HTML में मुख्य Semantic Elements की List
| Tag | उपयोग |
|---|---|
<header> | Header section |
<nav> | Navigation links |
<main> | Main content |
<section> | Section / group |
<article> | Independent content |
<aside> | Side content |
<footer> | Footer area |
<figure> | Media content |
<figcaption> | Media caption |
<details> | Expandable content |
<summary> | Details heading |
<mark> | Highlighted text |
<time> | Date / time |
4. <header> Element
Purpose:
Page या section का introductory content रखने के लिए।
Example:
<header>
<h1>My Website</h1>
<p>Learn Web Development</p>
</header>
📌 <header> page में multiple बार हो सकता है।
5. <nav> Element
Purpose:
Navigation links रखने के लिए।
Example:
<nav>
<a href="#">Home</a>
<a href="#">Tutorials</a>
<a href="#">Contact</a>
</nav>
🚫 Non-navigation links को <nav> में नहीं रखना चाहिए।
6. <main> Element
Purpose:
Page का main content रखने के लिए।
Rules:
✔ Page में सिर्फ एक <main> होना चाहिए
❌ <header> या <footer> के अंदर नहीं होना चाहिए
Example:
<main>
<h2>HTML Tutorial</h2>
<p>This is the main content area.</p>
</main>
7. <section> Element
Purpose:
Related content को group करने के लिए।
Example:
<section>
<h2>HTML Basics</h2>
<p>HTML stands for HyperText Markup Language.</p>
</section>
📌 Section में हमेशा heading होना best practice है।
8. <article> Element
Purpose:
Independent & reusable content के लिए।
Examples:
- Blog post
- News article
- Forum post
<article>
<h2>What is HTML?</h2>
<p>HTML is used to create web pages.</p>
</article>
👉 Article को अलग page पर भी publish किया जा सकता है।
9. <aside> Element
Purpose:
Main content से related side information।
Example:
<aside>
<h3>Related Links</h3>
<ul>
<li>CSS Tutorial</li>
<li>JavaScript Guide</li>
</ul>
</aside>
10. <footer> Element
Purpose:
Footer information जैसे:
- Copyright
- Author info
- Terms & privacy links
<footer>
<p>© 2025 MyWebsite</p>
</footer>
11. <figure> और <figcaption>
Purpose:
Image, diagram या media के साथ caption जोड़ना।
<figure>
<img src="html.png" alt="HTML Logo">
<figcaption>HTML5 Logo</figcaption>
</figure>
12. <details> और <summary>
Purpose:
Expandable / collapsible content।
<details>
<summary>What is HTML?</summary>
<p>HTML is a markup language.</p>
</details>
✔ User interaction friendly
✔ No JavaScript required
13. <mark> Element
Purpose:
Text highlight करना।
<p>HTML is <mark>easy to learn</mark>.</p>
14. <time> Element
Purpose:
Date और time define करना (SEO friendly)
<time datetime="2025-01-01">1 January 2025</time>
15. Complete Semantic Page Layout Example
<!DOCTYPE html>
<html>
<head>
<title>Semantic HTML</title>
</head>
<body>
<header>
<h1>My Blog</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
<main>
<article>
<h2>HTML Semantic Elements</h2>
<p>They improve structure and SEO.</p>
</article>
<aside>
<p>Related Tutorials</p>
</aside>
</main>
<footer>
<p>© 2025 My Blog</p>
</footer>
</body>
</html>
16. Semantic vs Non-Semantic Summary
| Semantic | Non-Semantic |
|---|---|
<header> | <div> |
<nav> | <div> |
<article> | <div> |
<footer> | <div> |
17. Important Interview Notes 💡
✔ Semantic HTML improves SEO
✔ HTML5 introduced semantic elements
✔ <main> only once per page
✔ <article> can be inside <section>