Semantic elements: header, footer, article, section, nav, aside in hindi
एचटीएमएल5 में मॉडर्न रेस्पॉन्सिव वेब पेज वेबसाइट कंटेंट लेआउट को प्रॉपर स्ट्रक्चर करने के लिए एचटीएमएल हाइपरटेक्स्ट वेब डेवलपमेंट स्क्रिप्ट में नए सिमेंटिक टैग को लांच किया गया है। जहा एचटीएमएल5 में पेश अलग अलग सिमेंटिक टैग को मल्टीप्ल वेब डेवलपमेंट टास्क के लिए उपलब्ध कराया गया है। जो की एचटीएमएल5 वेब पेज को क्लाइंट वेब ब्राउज़र में इजी टू यूज़ सर्च इंजन फ्रेंडली इसके साथ सर्च इंजन क्रॉलिंग और इंडेक्सिंग में हेल्पफुल है।
So, let’s know the popular semantic tags in HTML5 web development script.
HTML5 <header> tag.
एचटीएमएल5 वेब पेज डिज़ाइन में <header> टैग एलिमेंट किसी पर्टिकुलर वेब पेज वेबसाइट में हैडर मेनू, हैडर टेक्स्ट, और डिजिटल इनफार्मेशन के साथ वेब पेज नेविगेशन मेनू और टेक्स्ट लिंक को डिस्प्ले करने में उपयोग करते है।
Header tag usage in HTML5.
- पर्टिकुलर वेब पेज में टॉप हैडर में मेनू और लिंक को डिस्प्ले करेगा।
- किसी वेबसाइट में हैडर में इम्पोर्टेन्ट लिंक और इनफार्मेशन को रिप्रेजेंट करता है।
- वेबसाइट में <nav> टैग के साथ नेविगेशनल लिंक क्रिएट और डिस्प्ले करता है।
Header tag examples in HTML5.
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Html5 Header Tag</h1>
<nav>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>Pages</a></li>
<li><a href=”#”>Links</a></li>
</ul>
</nav>
</header>
</body>
</html>
HTML5 <footer> tag.
एचटीएमएल5 में पेश <footer> टैग या एलिमेंट किसी पर्टिकुलर वेब पेज, वेबसाइट में कस्टमाइज फुटर टेक्स्ट, लिंक या डिजिटल इनफार्मेशन के साथ मल्टीप्ल फुटर टेक्स्ट लिंक को डिस्प्लै करता है। सामान्यता, फुटर टैग से किसी वेबसाइट में वेब डेवलपर नाम, वेबसाइट कॉपीराइट इन्फो, और वेबसाइट कांटेक्ट इनफार्मेशन, के साथ स्पेशल सिंबल और टेक्स्ट जानकारी डिस्प्ले होती है।
Uses of Footer Tag in HTML5.
- वेब डेवलपर का नाम या या इंडिविजुअल कंपनी आर्गेनाइजेशन टेक्स्ट इन्फो डिस्प्ले होती है।
- किसी पर्टिकुलर या इंडिविजुअल वेबसाइट कॉपीराइट नोटिस इन्फो डिस्प्ले होती हैं।
- वेबसाइट ऑथर नाम और वेबसाइट लीगल राइट इनफार्मेशन डिस्प्ले होती हैं।
- पर्टिकुलर वेबसाइट कांटेक्ट इनफार्मेशन और लिंक डिस्प्ले होते है।
Footer tag examples in HTML5.
<!DOCTYPE html>
<html>
<body>
<footer>
<p>© Vcanhelpsu 2024, All Right Reserved By Vcanhelpsu.com.</p>
<p>Email us – <a href=”mailto:vcanhelpsu@gmail.com”>vcanhelpsu@gmail.com</a></p>
</footer>
</body>
</html>
HTML5 <article> tag.
एचटीएमएल5 में पेश <article> टैग एलिमेंट एक सेल्फ टेक्स्ट इनफार्मेशन वेबपेज डिजिटल टेक्स्ट और इनफार्मेशन को होल्ड या डिस्प्ले करता है, सामान्यता आर्टिकल टैग स्माल और इंडिविजुअल वेब पेज वेबसाइट ब्लॉग पोस्ट, न्यूज़ पोस्ट, ग्रुप पोस्ट, फोरम पोस्ट के रूप में स्माल सेल्फ-कॉन्टैन टेक्स्ट ब्लॉक या पैराग्राफ की तरह उपयोग होते है। वेब डेवलपर जरूरत के अनुसार एक से अधिक आर्टिकल टैग में स्माल पोस्ट क्रिएट कर सकता है।
Uses of Article Tag in HTML5.
- जरूरत के अनुसार स्माल ग्रुप ब्लॉग पोस्ट टेक्स्ट इनफार्मेशन को डिस्प्ले करते है।
- पर्टिकुलर डिजिटल टेक्स्ट ब्लॉक, आर्टिकल इंडिविजुअल ग्रुप पोस्ट सेक्शन को बना सकते है ।
Article tag examples in HTML5.
<!DOCTYPE html>
<html>
<body>
<article>
<h2>Html5 Header Tag</h2>
<p>Header Tag Used To Display Website Header Top Links, Navigation Menu, And Other Text Info.</p>
</article>
<article>
<h2>Html5 Footer Tag</h2>
<p>Footer Tag Used To Display Website Important Footer Info, Like Copyright, Contact, And Other Important Links.</p>
</article>
</body>
</html>
HTML5 <section> tag.
एचटीएमएल5 में पेश <section> टैग एलिमेंट किसी पर्टिकुलर वेब पेज में इंडिविजुअल ब्लॉक और सेक्शन टेक्स्ट कंटेंट इनफार्मेशन को स्माल सेक्शन में डिवाइड कर डिस्प्ले करने में होता है, यदि आपको किसी वेब पेज में वेबसाइट इनफार्मेशन को स्माल ब्लॉक में डिवाइड कर स्माल ब्लॉक पोस्ट या सेक्शन में तोड़ कर अलग अलग एक ही वेब पेज में दर्शाना हो, तब सेक्शन टैग का इस्तेमाल किया जाता है।
Uses of Section Tag in HTML5.
- किसी पर्टिकुलर वेब पेज बड़े टेक्स्ट पैराग्राफ में स्माल ब्लॉक सेक्शन में डिवाइड कर ग्रुप में डिस्प्ले किया जाता है।
- सेक्शन टैग को बड़े पैराग्राफ या टॉपिक कंटेंट को स्माल ब्लॉक सेक्शन में डिस्प्ले कर ग्रुप में लिंक कर क्विक एक्सेस किया जाता है।
Section tag examples in HTML5.
<!DOCTYPE html>
<html>
<body>
<section>
<h2>Html5</h2>
<p>Html5 Is The Modern Web Development Web Structure Design Hypertext Script.</p>
</section>
<section>
<h2>Css</h2>
<p>Css Abbreviated As Cascade Style Sheet, Used For Website Simultaneously Modification. </p>
</section>
<section>
<h2>JavaScript</h2>
<p>Modern Web Development Script, Which Enable Web Developer To Used Enhanced Multimedia, Animation, And Other Features In Html.</p>
</section>
</body>
</html>
HTML5 <nav> tag.
एचटीएमएल5 में <nav> टैग एलिमेंट किसी भी वेबसाइट में नेविगेशनल मेनू या लिंक सेक्शन को क्रिएट कर डिस्प्ले करने में होता है। एचटीएमएल5 नेविगेशन टैग को स्पेशली वेबसाइट में कही भी नेविगेशन मेनू सेक्शन या ग्रुप नेविगेशन वेब साइट लिंक इनफार्मेशन को डिस्प्ले करने में उपयोग करते है, जो इंटरनेट यूजर को किसी वेबसाइट में उपलब्ध नेविगेशनल लिंक के माध्यम से आसानी से नेविगेट या एक्स्प्लोर करने में हेल्प करते हैं।
Uses of Nav Tag in HTML5.
- वेबसाइट या वेबपेज में कही भी नेविगेशनल लिंक आइटम इनफार्मेशन को क्रिएट कर डिस्प्ले कर सकते है।
- यदि कोई वेब पेज ब्लॉग पोस्ट डॉक्यूमेंट आकर में बहुत बड़ा है, तो उसी वेब पेज में उपलब्ध टेक्स्ट इनफार्मेशन को अलग अलग लिंक कर सेक्शन में डिवाइड कर नेविगेशनल ब्लॉक में डिस्प्ले कर इमीडियेट एक्सेस किया जा सकता है।
Nav tag examples in HTML5.
<!DOCTYPE html>
<html>
<body>
<nav>
<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#blog”>Blog</a></li>
<li><a href=”#pages”>Pages</a></li>
<li><a href=”#contact”>Contact</a></li>
<li><a href=”#disclaimers”>Disclaimers</a></li>
</ul>
</nav>
</body>
</html>
HTML5 <aside> tag.
एचटीएमएल5 में <aside> टैग एलिमेंट ऐसी वेब कंटेंट इनफार्मेशन को रिप्रेजेंट करता है, जो aside टैग से रिलेटेड वेब कंटेंट या इनफार्मेशन के रूप में जुडी होती है। सामान्यता aside टैग का उपयोग वेबसाइट वेबपेज में साइडबार, पुल कोट्स को डिजिटल इनफार्मेशन को एक्सेस करने में होता है।
Uses of Aside Tag in HTML5.
- किसी पर्टिकुलर वेब पेज में aside टैग साइडबार या अतिरिक्त डिजिटल इनफार्मेशन को रिप्रेजेंट करता है।
- aside टैग में वेबसाइट वेबपेज रिलेटेड लिंक, विज्ञापन या ऑथर बायोस जैसे वेब एलिमेंट डिस्प्ले होते हैं।
Aside tag examples in HTML5.
<!DOCTYPE html>
<html>
<body>
<aside>
<h2>Explore Links</h2>
<ul>
<li><a href=”#”>Html Links</a></li>
<li><a href=”#”>Css Links</a></li>
<li><a href=”#”>Php Links</a></li>
<li><a href=”#”>Javascript Links</a></li>
</ul>
</aside>
</body>
</html>
Semantic tag explanation in HTML5.
- HTML5 <header> tag – वेबसाइट में हैडर लिंक या नेविगेशनल मेनू टेक्स्ट के लिए।
- HTML5 <footer> tag – वेबसाइट फ़ुटर इनफार्मेशन, वेबसाइट कॉपीराइट और कांटेक्ट इनफार्मेशन के लिए।
- HTML5 <article> tag – वेबपेज ब्लॉग पोस्ट में नई आर्टिकल ब्लॉग या पोस्ट में सेल्फ-कॉन्टैन इनफार्मेशन डिस्प्ले के लिए।
- HTML5 <section> tag – पर्टिकुलर वबपेज लिंक पैराग्राफ को ब्लॉक या इंडिविजुअल सेक्शन में डिवाइड करने के लिए।
- HTML5 <nav> tag – वेब पेज नेविगेशन लिंक क्रिएट और रिप्रेजेंट करने के लिए।
- HTML5 <aside> tag – वेबपेज पूरक या स्पर्शरेखीय सामग्री रिप्रेसन्ट करता है।
