शीर्ष 3 HTML तत्व हम भूल गए

नमस्कार, हेब्र! मैं आपके लिए Stas Melnikov द्वारा "टॉप 3 HTML एलिमेंट्स जिन्हें हम भूल गए थे" लेख का अनुवाद प्रस्तुत करते हैं।

मैंने हाल ही में चश्मा पढ़ा और महसूस किया कि हम सीमित HTML तत्वों का उपयोग कर रहे हैं। इसलिए, मैं उन तीन तत्वों के बारे में बात करना चाहूंगा जिन्हें हम भूल गए थे, लेकिन जो हर परियोजना में हैं।

पता तत्व

अक्सर आपको हमारी परियोजनाओं में सामाजिक नेटवर्क या अन्य संपर्क जानकारी के ब्लॉक को चिह्नित करने की आवश्यकता होती है। आमतौर पर, डेवलपर्स निम्नलिखित कोड का उपयोग करते हैं:

<div class="my-social"> <ul> <li><a href="github.com">Fork me on Github</a></li> <li><a href="twitter.com">Follow me on Twitter</a></li> <li><a href="linkedin.com">My LinkedIn</a></li> </ul> </div> 

लेकिन WHATWG विनिर्देश में इस कार्य के लिए एक विशेष पता तत्व शामिल है।

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

इस प्रकार, निम्नलिखित कोड अधिक सच है:

 <address class="my-social"> <ul> <li><a href="github.com">Fork me on Github</a></li> <li><a href="twitter.com">Follow me on Twitter</a></li> <li><a href="linkedin.com">My LinkedIn</a></li> </ul> </address> 

ओल तत्व

हमें ब्रेडक्रंब, पेजिनेशन आदि जैसे नेविगेशन आइटम को चिह्नित करने के लिए सूचियों का उपयोग करना चाहिए। यह आवश्यक है कि स्क्रीन पाठकों को नेविगेशन में वस्तुओं की संख्या पढ़ने में मदद करें।

 <nav class="breadcrumb"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Design Patterns</a></li> <li><a href="#">Breadcrumb Pattern</a></li> </ul> </nav> 

आमतौर पर हम उल तत्व का उपयोग करते हैं। लेकिन विनिर्देश में एक अधिक उपयुक्त टैग है - ol। WHATWG विनिर्देश कहता है:

Ol एलिमेंट उन आइटम्स की एक सूची का प्रतिनिधित्व करता है, जहाँ आइटम को जानबूझकर ऑर्डर किया जाता है ताकि ऑर्डर को बदलने से दस्तावेज़ का अर्थ बदल जाए।

यदि हम ब्रेडक्रंब नेविगेशन में आइटम को फिर से व्यवस्थित करते हैं, तो हम वेबसाइट के मूल्य को बदलते हैं। इस प्रकार, निम्नलिखित कोड अधिक सच है:

 <nav class="breadcrumb"> <ol> <li><a href="#">Home</a></li> <li><a href="#">Design Patterns</a></li> <li><a href="#">Breadcrumb Pattern</a></li> </ol> </nav> 

समय तत्व

हम विभिन्न प्रकाशनों की तारीखों को चिह्नित करने के लिए स्पैन तत्व का उपयोग करते हैं।

 <span>October 5</span> <span>two days ago</span> <span>a Saturday</span> 

लेकिन हम इसके लिए समय टैग का उपयोग कर सकते हैं, जो WHATWG विनिर्देश में निहित है। WHATWG विनिर्देश क्या कहता है:

टाइम एलिमेंट इस सामग्री के मशीन-पठनीय रूप के साथ-साथ डेटाइम विशेषता में इसकी सामग्री का प्रतिनिधित्व करता है। सामग्री विभिन्न तिथियों, समय, समय क्षेत्र और अवधि द्वारा सीमित है।

इसलिए, हमें तारीखों को चिह्नित करने के लिए समय तत्व का उपयोग करना चाहिए।

 <time datetime="2019-10-05">October 5</time> <time datetime="2019-01-29">two days ago</time> <time datetime="2019-09-23">a Saturday</time>