क्विज़: क्या आपके रेज़्यूमे में अभी भी HTML की जगह है?

<ul> टैग एक unordered list बनाता है, जिसमें आइटम आमतौर पर बुलेट्स द्वारा चिह्नित होते हैं।

<dd> एलिमेंट एक डिस्क्रिप्शन लिस्ट में विवरण (description), परिभाषा (definition), या मान (value) को परिभाषित करता है। इसका उपयोग <dl> टैग के भीतर <dt> (Description Term) के साथ जोड़ा बनाने के लिए किया जाता है।

यह की-वैल्यू (key-value) डेटा दिखाने के लिए उपयोगी है। प्रोफाइल जानकारी, सेटिंग्स और आंकड़े इसके सामान्य उदाहरण हैं।

<dl>
<dt>JS</dt>
<dd>Client-side</dd>
<dd>Server-side</dd>

<dt>HTML</dt>
<dd>Client-side</dd>
</dl>

<figure> टैग का उपयोग आमतौर पर इमेज या चार्ट जैसी स्व-निहित (self-contained) मीडिया सामग्री को रैप करने के लिए किया जाता है, साथ ही कैप्शन प्रदान करने के लिए <figcaption> का उपयोग किया जाता है।

यह इमेज, डायग्राम, कोड स्निपेट और बहुत कुछ के लिए उपयोगी है।

<figure>
<img src="../image.jpg" alt="Description of image">
<figcaption>Image caption</figcaption>
</figure>

<article> एलिमेंट का उपयोग कंटेंट के एक स्वतंत्र हिस्से को परिभाषित करने के लिए किया जाता है जिसे स्वतंत्र रूप से वितरित या पुन: उपयोग किया जा सकता है।

इसका उपयोग अक्सर ब्लॉग पोस्ट, समाचार लेख, फ़ोरम पोस्ट या उपयोगकर्ता की टिप्पणियों (comments) के लिए किया जाता है।

आप एक पेज पर कई आर्टिकल्स का उपयोग कर सकते हैं (उदाहरण के लिए, इनफिनिटी स्क्रॉलिंग पेजों के लिए)। या, आप “स्वतंत्र कंटेंट” का पदानुक्रम (hierarchy) बनाने के लिए उन्हें एक-दूसरे के भीतर नेस्ट भी कर सकते हैं।

<article>
<h2>Article Title</h2>
<p>Article content...</p>
<article class="discussion">
<h3>Comment by User</h3>
<p>Comment content...</p>
</article>
</article>

<fieldset> का उपयोग संबंधित फॉर्म कंट्रोल्स को ग्रुप करने के लिए किया जाता है, और <legend> उस ग्रुप के लिए एक शीर्षक या लेबल प्रदान करता है, जिससे एक्सेसिबिलिटी (accessibility) में सुधार होता है।

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

<fieldset>
<legend>Shipping Address</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
...
</fieldset>
<fieldset>
<legend>Payment Details</legend>
<label for="card">Card Number:</label>
<input type="text" id="card" name="card">
...
</fieldset>

<meter> एलिमेंट का उपयोग एक निर्धारित रेंज के भीतर स्केलर (एकल) माप को दर्शाने के लिए किया जाता है, जैसे कि तापमान, डिस्क उपयोग या वोटों की गिनती।

यह <progress> बार के समान लग सकता है, हालांकि प्रोग्रेस बार हमेशा शून्य से शुरू होते हैं। इसलिए <progress> एलिमेंट percent of completion दिखाते हैं, जबकि एक <meter> किसी भी परिभाषित रेंज के भीतर की वैल्यू को दर्शाता है।

<meter min="-60" max="130" value="75" /> 75°F
<meter min="0" max="100" value="75" /> 75%

<source> एलिमेंट का उपयोग उपलब्ध मीडिया फॉर्मेट को निर्दिष्ट करने के लिए किया जाता है।

खास तौर पर इसका उपयोग <video>, <audio>, और <picture> एलिमेंट्स के साथ किया जाता है, जिससे ब्राउज़र सबसे उपयुक्त फॉर्मेट चुन सकता है।

<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

<hgroup> एलिमेंट एक हेडिंग को संबंधित माध्यमिक सामग्री (secondary content) के साथ ग्रुप करता है, जो आमतौर पर एक या अधिक <p> एलिमेंट होते हैं।

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

<article>
<hgroup>
<h1>Frankenstein</h1>
<p>Or: The Modern Prometheus</p>
</hgroup>
<section>
<h2>Chapter 1</h2>
<p>...</p>
</section>
</article>

<menu> कमांड्स या इंटरैक्टिव कंट्रोल्स की एक लिस्ट को दर्शाता है।

यदि आपकी लिस्ट नेविगेशन लिंक्स की है, तो <ul> के साथ <nav> का उपयोग करें। टूलबार जैसे कंट्रोल्स या कमांड लिस्ट के लिए <menu> का उपयोग करें।

<menu>
<li><button type="button">Copy</button></li>
<li><button type="button">Paste</button></li>
</menu>

<details> कोलैप्सिबल कंटेंट की अनुमति देता है, और <summary> उस कंटेंट के लिए एक दृश्य शीर्षक (visible title) निर्दिष्ट करता है।

यह FAQs, कोलैप्सिबल सेक्शन, या किसी भी ऐसे कंटेंट के लिए उपयोगी है जिसे टॉगल (toggle) किया जा सकता है।

<details>
<summary>Click to expand 🤯</summary>
<p>Hidden content! 💥</p>
</details>

<dialog> एलिमेंट का उपयोग पॉप-अप या मोडल्स के लिए किया जाता है, और यह इन इंटरैक्शन के लिए सिमेंटिक मार्कअप, विस्तारित CSS और एक नेटिव API प्रदान करता है।

मोडल डायलॉग के लिए इसे .showModal() के साथ या नॉन-मोडल डायलॉग के लिए .show() के साथ खोलने के लिए JavaScript का उपयोग करें, और इसे .close() या method="dialog" का उपयोग करके फॉर्म सबमिशन के साथ बंद करें।

<dialog>
<h2>Modal Title</h2>
<p>Modal content...</p>
<button>Close</button>
</dialog>

<time> एलिमेंट का उपयोग तारीखों (dates), समय (times), या अवधि (durations) के लिए किया जाता है। इसमें मानव-पठनीय (human-readable) कंटेंट और मशीन-पठनीय (machine-readable) datetime एट्रिब्यूट शामिल हो सकता है। HTML में कोई <date> एलिमेंट नहीं होता है।

ARIA (Accessible Rich Internet Applications) एट्रिब्यूट्स स्क्रीन रीडर्स और अन्य सहायक तकनीकों (assistive technologies) के लिए अतिरिक्त संदर्भ (context) प्रदान करके वेब एक्सेसिबिलिटी को बढ़ाते हैं।

एलिमेंट्स का वर्णन करने के लिए इसमें roles, states और properties का उपयोग किया जाता है।

<button aria-label="Close" aria-expanded="true">X</button>
<main aria-live="polite">...</main>
<dialog
role="alertdialog"
aria-modal="true"
aria-labelledby="dialog_label"
aria-describedby="dialog_desc"
></dialog>

role एट्रिब्यूट सहायक तकनीकों (assistive technologies) को एलिमेंट के उद्देश्य के बारे में बताता है, जिससे एक्सेसिबिलिटी (accessibility) में सुधार करने में मदद मिलती है।