مرحبا يا هبر! أقدم إليكم ترجمة المقال
"أهم 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>
رأ عنصر
يجب أن نستخدم القوائم لترميز عناصر التنقل مثل breadcrumb ، ترقيم الصفحات ، إلخ. يعد ذلك ضروريًا لمساعدة قارئات الشاشة على قراءة عدد العناصر في التنقل.
<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>
عادة نستخدم عنصر ul. لكن المواصفات تحتوي على علامة أكثر ملاءمة - رأ. مواصفات 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 للاحتفال بتواريخ المنشورات المختلفة.
<span>October 5</span> <span>two days ago</span> <span>a Saturday</span>
ولكن يمكننا استخدام علامة الوقت لهذا ، والتي يتم تضمينها في مواصفات WHATWG. هذا ما تقول مواصفات WHATWG:
يمثل عنصر الوقت محتوياته إلى جانب النموذج القابل للقراءة آليًا لهذه المحتويات في السمة datetime. يقتصر المحتوى على تواريخ وأوقات ومناطق زمنية مختلفة.
لذلك ، يجب أن نستخدم عنصر الوقت لتمييز التواريخ.
<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>