HTML Semantic Elements

शब्दार्थ तत्त्व = वे तत्त्व जिनका कोई अर्थ हो।

शब्दार्थ तत्व क्या हैं?

एक सिमेंटिक तत्व ब्राउज़र और डेवलपर दोनों को इसका अर्थ स्पष्ट रूप से बताता है।

HTML में सिमेंटिक तत्व

कई वेबसाइटें नेविगेशन, हेडर और फ़ुटर निर्दिष्ट करती हैं<div id="nav">, <div class="header">, <div id="footer">जैसे HTML कोड शामिल करें

HTML में कई शब्दार्थ तत्व हैं जिनका उपयोग वेब पेज के विभिन्न भागों को परिभाषित करने के लिए किया जा सकता है:

शब्दार्थ तत्वों का प्रयोग

HTML <section>अंग

<section>एक तत्व किसी दस्तावेज़ में एक अनुभाग को परिभाषित करता है।

जैसिफ़ टीम के HTML दस्तावेज़ीकरण चरण: "एक अनुभाग सामग्री का एक विषयगत संग्रह है, आमतौर पर एक शीर्षक के साथ।"

कहाँ<section>आइए तत्व का उपयोग करें:

• अध्याय
• परिचय
• समाचार आइटम
• संपर्क जानकारी

उदाहरण

एक दस्तावेज़ में दो अनुभाग:

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

HTML <article>अंग

<article>एक तत्व स्वतंत्र, आत्मनिर्भर सामग्री का प्रतिनिधित्व करता है।

एक लेख को अपने आप में अर्थपूर्ण होना चाहिए, और इसे वेबसाइट के अन्य हिस्सों से स्वतंत्र रूप से वितरित करने में सक्षम होना चाहिए।

कहाँ<article>आइए तत्व का उपयोग करें:

• फोरम पोस्ट
• ब्लॉग पोस्ट
• उपयोगकर्ता टिप्पणियाँ
• उत्पाद कार्ड
• अखबारों में लेख

उदाहरण

स्वतंत्र, स्व-निहित सामग्री वाले तीन लेख:

HTML <header>अंग

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

ए<header>तत्व में आमतौर पर निम्न शामिल होते हैं:

• एक या अधिक हेडर तत्व (<h1> - <h6>)
• लोगो या चिह्न
• लेखक की जानकारी

HTML <footer>अंग

<footer>तत्व किसी दस्तावेज़ या अनुभाग के लिए फ़ुटनोट को परिभाषित करता है।

ए<footer>तत्व में आमतौर पर निम्न शामिल होते हैं:

• लेखक की जानकारी
• कॉपीराइट संबंधी जानकारी
• संपर्क जानकारी
• साइट मानचित्र
• शीर्ष पर लिंक
• संबंधित दस्ताबेज़

एक दस्तावेज़ में एकाधिक<footer>तत्व हो सकते हैं.

HTML <nav>अंग

<nav>एक तत्व रूटिंग लिंक के एक सेट को परिभाषित करता है।

किसी दस्तावेज़ के सभी अनुलग्नक<nav>इसका अंग के अंदर होना जरूरी नहीं है।<nav>तत्व महत्वपूर्ण रूटिंग लिंक तक सीमित है।

ब्राउज़र, जैसे कि अक्षम उपयोगकर्ताओं के लिए स्क्रीन रीडर, इस तत्व का उपयोग यह निर्धारित करने के लिए कर सकते हैं कि इस सामग्री के प्रारंभिक प्रतिपादन को छोड़ना है या नहीं।

HTML <aside>अंग

<aside>तत्व उस सामग्री से कुछ सामग्री को परिभाषित करता है जिसमें इसे रखा गया है (साइडबार की तरह)।

<aside>सामग्री अप्रत्यक्ष रूप से आसपास की सामग्री से संबंधित होनी चाहिए।

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

HTML <figure>और<figcaption>तत्वों

<figure>टैग स्व-निहित सामग्री को संदर्भित करता है, उदाहरण के लिए चार्ट, ग्राफ़, फ़ोटोग्राफ़, इंडेक्स इत्यादि।

<figcaption>टैग ए<figure>तत्व के लिए शीर्षक परिभाषित करता है.<figcaption>अंग<figure>में पहले बच्चे या आखिरी बच्चे के रूप में रखा जा सकता है।

चित्रा उदाहरण

चित्र 1 - <आकृति> तत्व को दर्शाने वाला उदाहरण चित्र

शब्दार्थ तत्व क्यों?

जैसिफ़ टीम की राय: "एक सिमेंटिक वेब एप्लिकेशन को संगठनों और समुदायों में डेटा साझा करने और पुन: उपयोग करने की अनुमति देता है।"

अभ्यास

अपने ज्ञान का परीक्षण करने के लिए निम्नलिखित अभ्यास आज़माएँ:

सर्वोत्तम अभ्यास