HTML Semantic Elements In Hindi

HTML Semantic Elements In Hindi

HTML Semantic Elements.

एचटीएमएल5 में एचटीएमएल वेब डेवलपर के द्वारा कई नए सिमेंटिक टैग और एलिमेंट जोड़े गए है. जो किसी भी वेबपेज या वेबसाइट की सामग्री के डिफ़ॉल्ट स्ट्रक्चर को अधिक कमर्शियल अर्थ प्रदान करता है। ये सिमेंटिक टैग सर्च इंजन, अस्सोसिएटिव टेक्नोलॉजी और वेब डेवलपर्स को वेबपेज के विभिन्न अलग अलग हिस्सों के उद्देश्य को समझने और उन्हें वेब पेज कही भी डिस्प्ले करने में मदद करते हैं। एचटीएमएल5 वेब डेवलपमेंट प्रोसेस में सिमेंटिक टैग या एलिमेंट का उपयोग करने से आपके वेब पेजों की ऑनलाइन और ऑफलाइन पहुंच, मेंटेनेंस और एसईओ-फ्रेंडली आर्टिकल पोस्ट में सुधार होता है।

HTML Semantic Elements In Hindi

So, let us know in detail about the new tags and elements in HTML5.

  • <header> – एचटीएमएल5 में किसी भी वेबपेज वेबसाइट या सेक्शन के टॉप पर इम्पोर्टेन्ट टेक्स्ट इनफार्मेशन या नेविगेशन लिंक के एक सेट इनफार्मेशन को डिस्प्ले किया जाता है।
  • <nav> – एचटीएमएल5 में नेविगेशन लिंक के रूप में वेब पेज में एक पर्टिकुलर सेक्शन का प्रतिनिधित्व करता है. जैसे, वेबपेज वेबसाइट मेनू, लिंक लिस्ट्स, या वेबसाइट टेबल ऑफ़ कंटेंट आदि इनफार्मेशन को डिस्प्ले किया जाता है।
  • <main> – यह टैग एचटीएमएल5 में किसी डॉक्यूमेंट का मुख्य रिसोर्सेज क्षेत्र निर्दिष्ट करता है। मैन टैग के साथ आप अपने वेब पेज के लिए मैन टेक्स्ट या डिजिटल इनफार्मेशन को डिस्प्ले कर सकते है.
  • <article> – एचटीएमएल5 में वेब पेज कंटेंट इनफार्मेश के एक स्व-निहित सेक्शन का प्रतिनिधित्व करता है. जिसे किसी भी वेब पेज में इंडिपेंडेंट रूप से वितरित और पुन: उपयोग किया जा सकता है. जैसे किसी वेब पेज या ब्लॉग पोस्ट या न्यूज़ आर्टिकल इनफार्मेशन आदि।
  • <section> – एचटीएमएल5 में सेक्शन टैग किसी डॉक्यूमेंट के भीतर टेक्स्ट रिसोर्सेज के एक स्टैंडअलोन सेक्शन को परिभाषित करता है। वेब पेज में सेक्शन टैग का अपना टाइटल हो सकता है, और इसमें कई आर्टिकल, टाइटल और अन्य वेब पेज एलिमेंट प्रदर्शित हो सकते हैं।
  • <aside> – एचटीएमएल5 में aside टैग वेब पेज में उस सामग्री का प्रतिनिधित्व करता है. जो डिज़ाइन वेब पेज या उसके आस-पास की सामग्री से स्पर्शरेखा रूप से संबंधित है। एचटीएमएल5 में aside टैग का उपयोग वेब पेज में अक्सर साइडबार, पुल कोट्स, या वेब पेज में विज्ञापनों इनफार्मेशन डिस्प्ले के लिए किया जाता है।
  • <footer> – एचटीएमएल5 वर्शन में किसी वेब पेज या वेबसाइट के सेक्शन या फुटर इनफार्मेशन प्रदर्शित होती है। फुटर टैग के साथ आम तौर पर वेबसाइट कॉपीराइट जानकारी, वेबसाइट कांटेक्ट, या वेबसाइट संबंधित लिंक इनफार्मेशन लिंक प्रदर्शित होती हैं।
  • <figure> and <figurecaption> – एचटीएमएल5 वर्शन में इमेज, डायग्राम या चार्ट, ग्राफ़िक्स, जैसे मल्टीमीडिया वेब पेज डिजिटल सामग्री को समूह और कैप्शन करने के लिए एक साथ उपयोग किया जाता है। एचटीएमएल5 में <figure> एक डिफ़ॉल्ट कंटेनर है, और ऑब्जेक्ट को <figcaption> कैप्शन इनफार्मेशन प्रदान करता है।
  • <time> – एचटीएमएल5 आधारित वेब पेज में टाइम टैग में एक विशिष्ट अवधि या समय की सीमा का प्रतिनिधित्व करता है। टाइम टैग का उपयोग अक्सर वेबसाइट में डेट, टाइम और अवधि के लिए किया जाता है।
  • <mark> – एचटीएमएल5 में किसी या उस टेक्स्ट इनफार्मेशन का प्रतिनिधित्व करता है, जिसे रिफरेन्स या वेब पेज में जोर देने के लिए हाइलाइट या चिह्नित किया गया हो। मार्क टैग का उपयोग आमतौर पर सर्च रिजल्ट और एनोटेशन के लिए किया जाता है।
  • एचटीएमएल5 में वेबसाइट डेवलपमेंट में अतिरिक्त स्ट्रक्चर प्रदान करने के लिए <header>, <footer>, and <nav> जैसे टैग या एलिमेंट का उपयोग किया जाता है।

Here’s an example of the HTML5 version of how you can use HTML5 tags in your webpage.

<!DOCTYPE html>

<html>

<head>

    <title>Test Page</title>

</head>

<body>

    <header>

        <h1>Sample Website Title</h1>

        <nav>

            <ul>

                <li><a href=”/”>Home</a></li>

                <li><a href=”/”>Blog</a></li>

                <li><a href=”/”>Post</a></li>

                <li><a href=”/about.htm”>About</a></li>

                <li><a href=”/contact.htm”>Contact</a></li>

                <li><a href=”/disclaimers.htm”>Disclaimers</a></li>

            </ul>

        </nav>

    </header>

    <main>

        <section>

            <h2>Website Article Section</h2>

            <article>

                <h3>Post Title</h3>

                <p>Write your website content here…</p>

            </article>

        </section>

        <aside>

            <h3>Display your adds here</h3>

            <p>Write desire paragraph section here</p>

        </aside>

    </main>

    <footer>

        <p>&copy; 2023 All content copyright by abc company</p>

        <nav>

            <ul>

                <li><a href=”/privacy.htm”>Company Policy</a></li>

                <li><a href=”/terms.htm”>Our terms and condition</a></li>

            </ul>

        </nav>

    </footer>

</body>

</html>

Semantic tags like <header>, <nav>, <article>, <section>, <footer>

एचटीएमएल5 वर्शन में<header>, <nav>, <article>, <section>, और <footer> जैसे नए सिमेंटिक एचटीएमएल5 टैग एलिमेंट का उपयोग वेबपेज और वेबसाइट की सामग्री को अधिक कमर्शियल अर्थ और स्ट्रक्चर प्रदान करने के लिए किया जाता है। ये एचटीएमएल5 वर्शन एलिमेंट या टैग सर्च इंजन, अस्सोसिएटिव टेक्नोलॉजी, और वेब डेवलपर्स को वेबपेज के विभिन्न अलग अलग हिस्सों के उद्देश्य और वेब पेज संगठन को बेहतर ढंग से समझने में काफी मदद करते हैं।

So, let’s use header semantic tag in HTML5 version.

HTML5 <header> tag.

किसी वेब पेज या वेबसाइट के सेक्शन के टॉप पर नेविगेशन लिंक के एक सेट के लिए इंट्रोडक्शन रिसोर्सेज या वेब पेज कंटेनर में मेनू, हैडिंग, लिंक्स, या टेक्स्ट इनफार्मेशन डिस्प्ले का प्रतिनिधित्व करता है।

यहाँ वेबसाइट हैडर लोकेशन में आम तौर पर इसमें वेबसाइट का डिफ़ॉल्ट लोगो, वेबसाइट टाइटल, वेब पेज मुख्य नेविगेशन मेनू, और कभी-कभी वेबसाइट इंट्रोडक्शन टेक्स्ट, इनफार्मेशन डिस्प्ले होती है।

किसी भी वेबसाइट में एक वेबपेज पर एकाधिक <header> टैग एलिमेंट हो सकते हैं. लेकिन यहाँ प्रत्येक हैडर टैग को एक अलग सेक्शन का प्रतिनिधित्व करना चाहिए।

Example of HTML5 version header tag.

Html <header> tag example.

<!DOCTYPE html>

<html>

<head>

    <title>Header tag example</title>

</head>

<body>

        <h1>Your Website Title</h1>

    <nav>

        <ul>

            <li><a href=”/”>Home Page</a></li>

            <li><a href=”/”>Blog Page</a></li>

            <li><a href=”/”>Posts Page</a></li>

            <li><a href=”/about.htm”>About</a></li>

            <li><a href=”/contact.htm”>Contact</a></li>

            <li><a href=”/disclaimers.htm”>Disclaimers</a></li>

        </ul>

    </nav>

</header>

</body>

</html>

Html5 <nav> tag.

एचटीएमएल5 वर्शन में नेविगेशन लिंक वेबपेज या वेबसाइट के एक सेक्शन का प्रतिनिधित्व करता है. जैसे वेबसाइट में मेनू, वेबपेज लिंक लिस्ट, या वेबपेज टेबल ऑफ़ कंटेंट, आदि जानकारी को नेविगेशन इनफार्मेशन के रूप में डिस्प्ले कर सकते है।

आमतौर पर नेविगेशन टैग किसी वेबपेज या वेबसाइट के होम पेज में प्राइमरी नेविगेशन मेनू डिज़ाइन करने के लिए उपयोग किया जाता है।

किसी वेबसाइट के उस सेक्शन से संबंधित नेविगेशन मेनू के लिए <header> टैग के अंदर या <footer> टैग के अंदर कही भी रखा या डिस्प्ले किया जा सकता है।

Example of nav tag in HTML5 version.

<!DOCTYPE html>

<html>

<head>

    <title>Navigation tag example</title>

</head>

<body>

  <nav>

    <ul>

        <li><a href=”/”>Home</a></li>

        <li><a href=”/about”>Blog</a></li>

        <li><a href=”/course.htm”>Course</a></li>

        <li><a href=”/about.htm”>About Us</a></li>

        <li><a href=”/contact.htm”>Contact Us</a></li>

    </ul>

</nav>

</body>

</html>

Html5 <article> Tag.

एचटीएमएल5 वर्शन में आर्टिकल टैग वेब पेज रिसोर्सेज के एक स्व-निहित टुकड़े या स्माल पर्टिकुलर टेक्स्ट पैराग्राफ सेक्शन का प्रतिनिधित्व करता है. जिसे किसी भी एचटीएमएल5 वेबपेज में इंडेपेंडेंट रूप से वितरित और कई बार पुन: उपयोग किया जा सकता है। सामान्य आर्टिकल टैग उदाहरणों में वेबसाइट ब्लॉग पोस्ट, न्यूज़ आर्टिकल, या सिंगल पोस्ट टेक्स्ट और वेब उपयोगकर्ता-जनित टेक्स्ट सामग्री को प्रदर्शित किया जाता हैं।

एचटीएमएल5 में आर्टिकल टैग का अपना टाइटल होना चाहिए (आमतौर पर हैडिंग टैग <h1> से <h6>), जो किसी आर्टिकल वेब पेज सामग्री का वर्णन करता हो।

एचटीएमएल5 वेब पेज में <section> टैग के अंदर या सीधे <body> टैग के अंदर कही भी इस्तेमाल किया जा सकता है।

Example of article tag in HTML5 version.

<!DOCTYPE html>

<html>

<head>

    <title>Html5 Article tag example</title>

</head>

<body>

  <article>

    <h2>Webpage first post article</h2>

    <p>write desire web page article here…</p>

    <h2>Webpage second post article</h2>

    <p>write desire web page article here…</p>

</article>

</body>

</html>

Html5 <section> Tag.

एचटीएमएल5 वर्शन में किसी वेब पेज डॉक्यूमेंट के भीतर वेबपेज वेब रिसोर्सेज के एक स्टैंडअलोन सेक्शन को परिभाषित करता है। वेब पेज में सेक्शन टैग का अपना टाइटल हो सकता है, और इसमें किसी वेबपेज कई आर्टिकल, टाइटल और अन्य वेब पेज एलिमेंट डिस्प्ले हो सकते हैं।

किसी वेबपेज में सामग्री को सार्थक सेक्शंस में व्यवस्थित करने में मदद करता है।

Section tag example in HTML5 version.

<!DOCTYPE html>

<html>

<head>

    <title>Html5 section tag example</title>

</head>

<body>

  <section>

    <h2>Webpage Section Title</h2>

    <p>Webpage content of the section here…</p>

    <article>

        <h3>Web page Subsection Title</h3>

        <p>Web page content of the subsection here…</p>

    </article>

</section>

</body>

</html>

Html5 <footer> Tag.

एचटीएमएल5 वर्शन में किसी सेक्शन या वेबपेज या वेबसाइट के बॉटम पर फुटर टैग या एलिमेंट से फुटर इनफार्मेशन प्रदर्शित की जाती है. जिसमें अक्सर वेबसाइट कॉपीराइट जानकारी, वेबसाइट कांटेक्ट इनफार्मेशन, वेबसाइट रिलेटेड लिंक, या अतिरिक्त वेब वेबपेज नेविगेशन जानकारी प्रदर्शित होती है।

एचटीएमएल5 वर्शन में किसी वेबपेज या वेबसाइट के सेक्शन या कम्पलीट वेबसाइट को बंद करने में फुटर टैग का उपयोग होता है।

Example of footer tag in HTML5 version.

<!DOCTYPE html>

<html>

<head>

    <title>Html5 footer tag example</title>

</head>

<body>

 <footer>

    <p>&copy; 2023 All right reserved by Abc Company! </p>

    <nav>

        <ul>

          <li><a href=”/email”>E-mail</a></li>

            <li><a href=”/contact”>Contact</a></li>

            <li><a href=”/privacy”>Privacy Policy</a></li>

            <li><a href=”/terms”>Terms & condition</a></li>

        </ul>

    </nav>

</footer>

</body>

</html>

Improving accessibility and SEO with semantic HTML

एचटीएमएल5 वर्शन में सिमेंटिक एचटीएमएल टैग का उपयोग करने से आपके वेबपेजों की ऑनलाइन वेब यूजर पहुंच और सर्च इंजन अनुकूलन वेबसाइट वेबपेज (एसईओ) में काफी हद तक सुधार हो सकता है।

So, let’s know how HTML5 tags help you and search engines.

Accessibility.

सिमेंटिक एचटीएमएल5 टैग आपकी वेबपेज सामग्री को एक स्पष्ट और सार्थक रूप से ऑनलाइन वेबपेज स्ट्रक्चर प्रदान करते हैं. जिससे ऑनलाइन स्क्रीन रीडर और सपोर्टेड तकनीक के लिए आपके वेब पेजों की व्याख्या और ऑनलाइन इन्हे नेविगेट करना अधिक आसान हो जाता है।

Title and section.

एचटीएमएल5 वेब पेज में टाइटल्स और सेक्शंस हैंडर्स के लिए हैडिंग (<h1> से <h6>) का उपयोग करने से स्क्रीन रीडर और वेब विजिटर को सामग्री के हायरार्की आर्डर और वेब पेज टेक्स्ट संगठन को समझने में मदद मिलती है।

Labels for form elements.

एचटीएमएल5 <label> टैग एलिमेंट का उपयोग करके फॉर्म एलिमेंट के लिए स्पष्ट ऑब्जेक्ट लेबल प्रदान करना और उन्हें for और id जैसी फॉर्म एट्रिब्यूट का उपयोग करके उनके संबंधित इनपुट के साथ सही ढंग से जोड़ना फॉर्म की ऑनलाइन यूजर पहुंच को बढ़ाता है। एचटीएमएल5 स्क्रीन रीडर वेब विजिटर को प्रत्येक इनपुट के उद्देश्य को समझने में मदद करने के लिए लेबल डिक्लेरेशन करते हैं।

Alternative text for images.

एचटीएमएल5 <img> टैग एलिमेंट में उपयोग इमेज अल्टरनेटिव और संक्षिप्त इमेज वैकल्पिक टेक्स्ट इनफार्मेशन जोड़ने से यह सुनिश्चित होता है कि दृष्टिबाधित वेब विजिटर वेब इमेजेज की सामग्री को अच्छे से समझ सकते हैं।

Lists and tables.

एचटीएमएल5 में लिस्ट्स एलिमेंट के लिए सिमेंटिक लिस्ट टैग एलिमेंट (<ul>, <ol>, <dl>) और हेडर के लिए <th> और कैप्शन के लिए <caption> के साथ उचित रूप से संरचित एचटीएमएल5 टेबल्स का उपयोग यह सुनिश्चित करता है कि स्क्रीन रीडर लिस्ट आइटम और टेबल की संरचना और संबंधों को बताते हैं।

Semantic elements.

अन्य एचटीएमएल5 <header>, <nav>, <main>, <article>, <section>, and <footer> जैसे सिमेंटिक टैग एलिमेंट सहायक तकनीकों को प्रासंगिक जानकारी प्रदान करते हैं. जिससे वेब विजिटर उपयोगकर्ताओं को सामग्री के उद्देश्य और वेब पेज संगठन को बेहतर रूप से समझने में मदद मिलती है।

Search Engine Optimization (SEO) in HTML5.

Semantic structure.

किसी वेब पेजों या वेबसाइट की सामग्री और रिफरेन्स को बेहतर ढंग से समझने के लिए सर्च इंजन सिमेंटिक एचटीएमएल टैग का उपयोग करते हैं। किसी भी वेबपेज या वेबसाइट में टाइटल्स, पैराग्राफों, लिस्ट्स और अर्थ संबंधी एलिमेंट के साथ उचित रूप से स्ट्रक्चर सामग्री सर्च इंजन आपके वेबपेज या वेबसाइट में सर्च रैंकिंग पर सकारात्मक प्रभाव डाल सकती है।

Keyword placement.

किसी वेबपेज या वेबसाइट में सिमेंटिक एचटीएमएल आपको वेबपेज पोस्ट से रिलेटेड कीवर्ड और वाक्यांशों को टाइटल्स और पैराग्राफ जैसे इम्पोर्टेन्ट एलिमेंट को सार्थक स्थानों पर आपके वेबसाइट पोस्ट में कीवर्ड रखने की अनुमति देता है। इससे ऑनलाइन आपके वेबपेज या वेबसाइट की सर्च इंजन रिजल्ट में आपकी सामग्री की रैंक या दृश्यता में सुधार हो सकता है।

Link text.

एचटीएमएल वेब पेज में उपयोग इमेज में इमेज लिंक टेक्स्ट (<a> एलिमेंट का उपयोग करके) सर्च इंजनों को लिंक की गई ग्राफ़िक्स सामग्री के विषय और प्रासंगिकता को निर्धारित करने में मदद करता है. जिससे संभावित रूप से आपके वेबपेज इमेज पृष्ठों की ऑनलाइन सर्च इंजन रैंकिंग में सुधार होता है।

Image alt text.

एचटीएमएल वेबपेज में <img> टैग एलिमेंट में वैकल्पिक टेक्स्ट न केवल आपके इमेज उपयोग के पहुंच को बढ़ाता है. बल्कि ऑनलाइन गूगल और अन्य सर्च इंजनों को बहुमूल्य जानकारी भी प्रदान करता है, खासकर ऑनलाइन इमेज सर्च रिजल्ट के बारे में जानकारी प्रदर्शित करना आदि।

Structured data.

सिमेंटिक एचटीएमएल टैग का उपयोग वेबपेज या वेबसाइट स्कीमा मार्कअप (उदाहरण के लिए, JSON-LD) के संयोजन में संरचित डेटा प्रदान करने के लिए किया जा सकता है. जिसका उपयोग ऑनलाइन सर्च इंजन समृद्ध सर्च परिणाम, जैसे समृद्ध स्निपेट या ज्ञान पैनल उत्पन्न करने के लिए कर सकते हैं।

Better user experience.

एचटीएमएल5 वर्शन से आपके वेबपेज की अच्छी पहुंच-योग्यता प्रथाएं है. जो सिमेंटिक एचटीएमएल टैग से निकटता से संबंधित हैं, अक्सर ऑनलाइन वेब विजिटर के अनुभव को बेहतर बनाती हैं। एचटीएमएल5 टैग वेब विजिटर को संतुष्टि और सहभागिता अप्रत्यक्ष रूप से वेबसाइट बाउंस रेट को कम करके और आपकी साइट पर वेब यूजर द्वारा बिताए गए समय को बढ़ाकर आपकी वेबसाइट एसईओ में काफी योगदान कर सकती है।

Rate this post

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top