HTML5 संबोधन तत्व

संबोधन (ग्रीक शब्द से उद्भव) को भाषा के अर्थ का अध्ययन के रूप में परिभाषित किया जा सकता है。

संबोधन एलीमेंट अर्थ वाले एलीमेंट हैं。

संबोधन एलीमेंट क्या है?

संबोधन एलीमेंट ब्राउज़र और डेवलपर को उनके अर्थ को स्पष्ट रूप से समझाते हैं。

नonsensicalएलीमेंट के उदाहरण: <div> और <span> - उनके सामग्री के बारे में कोई जानकारी नहीं देते हैं。

संबोधनएलीमेंट के उदाहरण: <form>、<table> और <img> - उनके सामग्री को स्पष्ट रूप से परिभाषित करते हैं。

ब्राउज़र समर्थन

अरे अरे अरे अरे अरे

सभी आधुनिक ब्राउज़र HTML5 संबोधन एलीमेंट का समर्थन करते हैं。

इसके अलावा, आप पुराने ब्राउज़रों को "अज्ञात एलीमेंट" का संभालन "सहायता" कर सकते हैं。

इस चिपके के बारे में अधिक जानकारी पाने के लिए HTML5 ब्राउज़र का समर्थन देखें。

HTML5 में नए संबोधन एलीमेंट

कई वेबसाइटों में नेविगेशन, हेडर और फुटर के लिए HTML कोड शामिल है, जैसे ये: <div id="nav"> <div class="header"> <div id="footer">。

HTML5 वेब पृष्ठ के विभिन्न भागों को परिभाषित करने वाले नए संबोधन एलीमेंट प्रदान करता है:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

HTML5 संबोधन तत्व

HTML5 संबोधन तत्व

HTML5 <section> एलीमेंट

<section> एलीमेंट दस्तावेज़ में खंड को परिभाषित करता है。

W3C के HTML दस्तावेज़ के अनुसार: "खंड (section) एक विषय वाला सामग्री समूह है जो आमतौर पर एक शीर्षक के साथ होता है"。

साइट के होमपेज को संक्षेप, सामग्री, संपर्क जानकारी आदि खंडों में विभाजित किया जा सकता है。

उदाहरण

<section>
   <h1>WWF</h1>
   <p>द वर्ल्ड वाइड फंड फॉर नेचर (WWF) is....</p>
</section>

स्वयं एक प्रयोग कीजिए

HTML5 <article> एलीमेंट

<article> एलीमेंट एक स्वतंत्र आत्मविराम सामग्री को निर्धारित करता है।

दस्तावेज़ को अपनी अभिव्यक्ति रखता है और वह वेबसाइट के अन्य सामग्री से स्वतंत्र रूप से पढ़ा जा सकता है।

<article> एलीमेंट के उपयोग के दृष्टिकोण:

  • फोरम
  • ब्लॉग
  • समाचार

उदाहरण

<article>
   <h1>WWF क्या करता है?</h1>
   <p>WWF का मिशन है कि हमारे ग्रह के प्राकृतिक वातावरण के अवनतन को रोका जाए,</p>
  और एक ऐसा भविष्य बनाएँ जिसमें मनुष्य प्रकृति के साथ समन्वय में रहते हैं。</p>
</article>

स्वयं एक प्रयोग कीजिए

निहार्य एलीमेंट

HTML5 मानक में, <article> एलीमेंट एक पूर्ण संबंधित एलीमेंट आत्मविराम ब्लॉक को परिभाषित करता है।

<section> एलीमेंट को संबंधित एलीमेंट ब्लॉक के रूप में परिभाषित किया गया है।

हमें इस परिभाषा को इस्तेमाल करके एलीमेंट को कैसे निहार्य करें? नहीं, हम नहीं कर सकते!</p>

इंटरनेट पर, आप <section> एलीमेंट के भीतर <article> एलीमेंट के HTML पृष्ठों और <article> एलीमेंट के भीतर <sections> एलीमेंट के पृष्ठों को भी देखेंगे।

आप एक <section> एलीमेंट के भीतर <section> एलीमेंट को और <article> एलीमेंट के भीतर <article> एलीमेंट को भी देखेंगे।

HTML5 <header> एलीमेंट

<header> एलीमेंट दस्तावेज़ या अध्याय के लिए शीर्षक निर्धारित करता है।

<header> एलीमेंट को परिचयात्मक सामग्री के कंटेनर के रूप में इस्तेमाल किया जाना चाहिए।

एक दस्तावेज़ में कई <header> एलीमेंट हो सकते हैं।

नीचे दिए गए उदाहरण में एक दस्तावेज़ के शीर्षक को परिभाषित किया गया है:

उदाहरण

<article>
   <header>
     <h1>WWF क्या करता है?</h1>
     <p>WWF का मिशन:</p>
   </header>
   <p>WWF का मिशन है कि हमारे ग्रह के प्राकृतिक वातावरण के अवनतन को रोका जाए,</p>
  और एक ऐसा भविष्य बनाएँ जिसमें मनुष्य प्रकृति के साथ समन्वय में रहते हैं。</p>
</article>

स्वयं एक प्रयोग कीजिए

HTML5 <footer> एलीमेंट

<footer> एलीमेंट दस्तावेज़ या अध्याय के लिए पादशीर्ष निर्धारित करता है।

<footer> एलीमेंट को उसके शामिल एलीमेंट के बारे में जानकारी प्रदान करनी चाहिए।

पादशीर्ष आमतौर पर दस्तावेज़ के लेखक, कॉपीराइट जानकारी, उपयोग शर्त लिंक, संपर्क जानकारी आदि को शामिल करता है।

एक दस्तावेज़ में कई <footer> एलीमेंट इस्तेमाल किए जा सकते हैं।

उदाहरण

<footer>
   <p>पोस्ट किया: हेगे रेफ्सनेस</p>
   <p>संपर्क जानकारी: <a href="mailto:someone@example.com">
  <a href="someone@example.com"></a>.</p>
</footer>

स्वयं एक प्रयोग कीजिए

HTML5 <nav> एलिमेंट

<nav> एलिमेंट नेविगेशन लिंक सेट को परिभाषित करता है。

<nav> एलिमेंट विशाल नेविगेशन लिंक ब्लॉक को परिभाषित करने के लिए है। हालांकि, दस्तावेज़ में सभी लिंक <nav> एलिमेंट में होने चाहिए नहीं!</nav>

उदाहरण

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

स्वयं एक प्रयोग कीजिए

HTML5 <aside> एलिमेंट

<aside> एलिमेंट पृष्ठ के मुख्य सामग्री के बाहर की कुछ सामग्री (जैसे साइडबार) है。

एसाइड की सामग्री आस-पास की सामग्री से संबंधित होनी चाहिए。

उदाहरण

<p>मेरा परिवार और मैं इस गर्मी में एपकोट सेंटर की यात्रा की।</p>
<aside>
   <h4>एपकोट सेंटर</h4>
   <p>एपकोट सेंटर फ्लोरिडा, डिज़नी वर्ल्ड में एक थीम पार्क है。</p>
</aside>

स्वयं एक प्रयोग कीजिए

HTML5 <figure> और <figcaption> एलिमेंट

पुस्तकों और समाचार पत्रों में, छवि के साथ शीर्षक बहुत आम हैं。

कैप्शन (caption) का काम छवि को दृश्यमान स्पष्टीकरण देना है。

HTML5 के माध्यम से, छवि और शीर्षक एक साथ जोड़ी जा सकती हैं, <figure> एलिमेंट में:

उदाहरण

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

स्वयं एक प्रयोग कीजिए

<img> एलिमेंट छवि को परिभाषित करता है,<figcaption> एलिमेंट शीर्षक को परिभाषित करता है。

क्यों HTML5 एलिमेंट का उपयोग करें?

यदि आप HTML4 का उपयोग करते हैं, तो डेवलपर उनके पसंदीदा एट्रिब्यूट नामों को उपयोग करके पृष्ठ एलिमेंट के शैली निर्धारित करेंगे:

हेडर, टॉप, बॉटम, फुटर, मेनू, नेविगेशन, मेन, कंटेनर, कंटेंट, आर्टिकल, साइडबार, टॉपनेव, ...

इस तरह, ब्राउज़र वास्तविक वेबसाइट सामग्री को पहचान नहीं पाएगा।

और HTML5 एलिमेंट के माध्यम से, जैसे कि <header> <footer> <nav> <section> <article> का इस समस्या को हल किया जाता है。

W3C के अनुसार, सेमैंटिक नेटवर्क:

“अधिकारियों, उद्योगों और समूहों के बीच डाटा को साझा और पुनर्वापर करने की अनुमति देता है。”

HTML5 में अर्थात्मक एलिमेंट

नीचे, अक्षराक्षर क्रम में वर्गीकृत HTML5 नए अर्थात्मक एलिमेंट दिखाए गए हैं。

ये लिंक पूरे HTML संदर्भ पुस्तक को दिशा देते हैं。

टैग वर्णन
<article> लेख को परिभाषित करें。
<aside> पृष्ठ के सामग्री के बाहर की सामग्री को परिभाषित करें。
<details> उपयोगकर्ता को देखने या छुपाने वाले अतिरिक्त विवरण को परिभाषित करें。
<figcaption> <figure> एलिमेंट के शीर्षक को परिभाषित करें。
<figure> स्वतंत्र सामग्री को परिभाषित करें, जैसे कि चित्र, ग्राफ, फोटो, कोड सूची आदि
<footer> दस्तावेज़ या भाग के फुटर को परिभाषित करें。
<header> दस्तावेज़ या भाग के हेडर को परिभाषित करें。
<main> दस्तावेज़ के मुख्य सामग्री को परिभाषित करें。
<mark> महत्वपूर्ण या बल देने वाले लेख को परिभाषित करें。
<nav> नेविगेशन लिंक को परिभाषित करें。
<section> दस्तावेज़ में एक भाग को परिभाषित करें。
<summary> दस्तावेज़ में <details> एलिमेंट के दृश्यमान शीर्षक को परिभाषित करें。
<time> तारीख/समय को परिभाषित करें。