जब html नया नया था और ब्राउजर, सर्च इंजन आदि इतने आधुनिक नहीं हुआ करते थे, उस टाइम में html पेज को स्ट्रक्चर कोड करने में कोई डेवलपर ज्यादा ध्यान नहीं दे रहे थे क्युकी हर किसी को बस वेब पेज की दिखावट से मतलब रहता था।
लेकिन जब से टेक्नॉलजी ज्यादा आधुनिक होने लगी है तब से एचटीएमएल को भी नए बदलाव की आवशक्यता आन पड़ी है।
पहले के वक्त में डेवलपर सिर्फ कुछ सामान्य टैग्स जैसे की div, span, p आदि का इस्तेमाल करके पूरी वेबसाईट बना देते थे, लेकिन इस प्रकार से बनाई गई वेबसाईट सामान्य यूजर को तो समझ ने मे आसान होती थी लेकिन ब्राउजर ओर सर्च इंजन बोट्स आदि वेबसाईट के स्ट्रक्चर को आसानी से समझ नहीं पाते थे।
इसी प्रॉब्लेम को ध्यान में रख कर html में सिमेंटिक टैग्स को प्रस्तुत किया गया था।
जो टैग्स डेवलपर को प्रोग्रामिंग के साथ साथ बोट्स को वेबसाईट का स्ट्रक्चर समझाने में भी लाभदायी हो उनको Semantic टैग कहते है, जैसे की header, article, section आदि।w3hindi.in
Semantic Tags in Hindi
अब हम ज्यादा इस्तेमाल में आने वाले Semantic टैग्स के बारे में विस्तृत अध्ययन करेगे,
- <header>
- <nav>
- <main>
- <article>
- <section>
- <aside>
- <footer>
- <figure>
- <figcaption>
- <details>
- <summary>
- <time>
<header>
जैसा की आपको नाम से ही अंदाजा आ गया होगा की header टैग किस इस्तेमाल में आता होगा।
इस टैग में वेबसाईट के वो विभाग होते है जो वेबसाईट को घूमने में मदद प्रदान करते है, इसमे मुख्य पेज और केटेगरी की लिंक्स दी होती है।
इसमे वेबसाईट का लोगों, मेनू आदि चीज़े होती है।
head टैग ब्राउजर कोऔर header टैग यूजर को दिखता है, दोनों का काम अलग अलग है।
उदाहरण:
उदाहरण:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Tag Example</title>
</head>
<body>
<header>
<h1>This is the Header</h1>
<p>Welcome to my website!</p>
</header>
</body>
</html><nav>
ये टैग वेबसाईट के मेनू, महत्व पूर्ण लिंक्स, आदि को दिखा ने के लिए इस्तेमाल होता है, ज्यादातर लोगों को एसा लगता है की ये बस header टैग के साथ ही इस्तेमाल होता है लेकिन एसा नहीं है, आप अपनी जरूर के हिसाब से कही भी इस्तेमाल कर सकते है।
इस टैग में राखी चीजों को सर्च इंजन बोट्स ज्यादा प्रावधान देते है, लेकिन इसका गलत इस्तेमाल आपकी वेबसाईट के SEO को बिगाड़ भी सकता है।
उदाहरण:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Example</title>
</head>
<body>
<header>
<h1>My Website</h1> <!-- Navigation Section -->
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html><main>
वेब पेज के header, footer, sidebar को छोड़ कर जो समझे महत्वपूर्ण कंटेन्ट है उसको main टैग के अंदर लिखना जरूरी है, क्युकी कोई भी बोट को अगर सिर्फ काम की चीज़े देखनी होगी तो वो main टैग में ढूंढेगा।
ये टैग किसी भी वेबपेज के लिए बहुत ज्यादा महत्व रखता है, क्युकी इसके अंदर रखे कंटेन्ट को SEO में इस्तेमाल किया जाता है।
इस टैग के अंदर div, section, article, p आदि टैग्स का इस्तेमाल होता है, जिससे एक ब्लॉग या आर्टिकल बनता है।
उदाहरण:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main Content Example</title>
</head>
<body> <!-- Main Content Section -->
<main>
<section>
<h2>Welcome to Our Website!</h2>
<p>This is the main content of the page.</p>
</section>
<section>
<h2>Latest Articles</h2>
<article>
<h3>Article Title 1</h3>
<p>Content of the first article...</p>
</article>
</section>
</main>
</body>
</html><article>
ये टैग वेबसाईट में रखी जानकारी को बताने के लिए इस्तेमाल होता है, ये ज्यादा ब्लॉग, फोरम, न्यूज आदि वेबसाईट में इस्तेमाल होता है।
इसमे रखी जानकारी को सर्च इंजन महत्व देता है, इसके जरिए बोट्स को वेबसाईट के कंटेन्ट को समझने में आसानी होती है।
ये टैग दर्शाता है की इसके अंदर रखा गया कंटेन्ट आर्टिकल प्रणाली का है।
उदाहरण:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Article Example</title>
</head>
<body>
<main>
<article>
<h2>Exploring HTML Article Tag</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
</article>
</main>
</body>
</html><section>
कोई भी वेब पेज या आर्टिकल को सही से समझने या समझाने के लिए लिए उसको अलग अलग विभाग(section) में विस्तृत करना बहुत जरूरी है।
इस टैग की मदद से आप कंटेन्ट को अपने अपने विभाग में अलग कर सकते है, जिससे समझने में आसानी रहे और कंटेन्ट मिक्स ना हो।
उदाहरण:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Section Example</title>
</head>
<body>
<main> <!-- Section 1: Introduction -->
<section>
<h2>Welcome to Our Website!</h2>
<p>This is the introduction section of our website.</p>
</section> <!-- Section 2: Services -->
<section>
<h2>Our Services</h2>
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Digital Marketing</li>
</ul>
</section>
</main>
</body>
</html><aside>
जो विभाग वेब पेज के मुख्य कंटेन्ट के साथ साइड में दिखाया जा रहा हो, और वो मुख्य कंटेन्ट के साथ कुछ न कुछ संबंध रखता हो, उसे aside टैग में रखा जाता है।
ये टैग sidebar, रिलेटेड पोस्ट्स आदि जैसे कंटेन्ट को दिखाने के लिए इस्तेमाल होता है।
main और article टैग के बाद बोट्स सबसे ज्यादा इस टैग पर ध्यान देते है।
उदाहरण:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aside Tag Example</title>
</head>
<body>
<main>
<article>
<h2>Main Content</h2>
<p>This is the main content of the website...</p>
</article>
</main> <!-- Aside Section -->
<aside>
<h2>Related Links</h2>
<ul>
<li><a href="#news">Latest News</a></li>
<li><a href="#ads">Advertisements</a></li>
<li><a href="#social">Social Media</a></li>
</ul>
</aside>
</body>
</html><footer>
footer टैग वेबसाईट के एक्स्ट्रा कंटेन्ट को संभालता है जैसे के contact, about, privacy पेज आदि की लिंक्स, वेबसाईट के पोपुलर कंटेन्ट की लिंक्स, newsletter आदि।
सामान्य रूप से देखा जाए तो, <aside> और <footer> टैगों के बीच बहुत कम अंतर होता है, लेकिन <aside> में अतिरिक्त सामग्री हो सकती है जो वेब पेज की आवश्यकताओं के आधार पर बदल सकती है, जबकि <footer> में सामग्री हमेशा एक ही रहती है।
उदाहरण:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Tag Example</title>
</head>
<body>
<main>
<article>
<h2>Main Content</h2>
<p>This is the main content of the website...</p>
</article>
</main>
<!-- Footer Section -->
<footer>
<p>© 2023 My Website. All rights reserved. | <a href="#privacy">Privacy Policy</a> | <a
href="#contact">Contact Us</a> </p>
</footer>
</body>
</html>तो दोस्तों इस आर्टिकल पर से हमे समझ आता है की इस मॉडर्न वक्त में टेक्नॉलजी को हमारे वेबसाईट के बारें में समझाने के लिए semantic टैग्स बहुत जरूरी है।
इसके सही इस्तेमाल से सर्च इंजन में रैंकिंग बढ़ती है और वेबसाईट का ट्राफिक भी बढ़ता है।
हमें आशा है की आपको हमारा ये ब्लॉग जरूर पसंद आया होगा, धन्यवाद।
Semantic Tags HTML के ग्लोबल ऐट्रिब्यूट सपोर्ट करते है।
और ज्यादा एचटीएमएल(HTML) टैग्स के बारे में जानने के लिए नीचे दिया गया ब्लॉग जरूर पढ़े,
