Bonjour, Habr! Je vous présente la traduction de l'article
"Top 3 des éléments HTML que nous avons oubliés" par Stas Melnikov.
J'ai récemment lu les spécifications et réalisé que nous utilisons un ensemble limité d'éléments HTML. Par conséquent, je voudrais parler des trois éléments que nous avons oubliés, mais qui sont dans chaque projet.
Élément d'adresse
Souvent, vous devez baliser un bloc de réseaux sociaux ou d'autres informations de contact dans nos projets. En règle générale, les développeurs utilisent le code suivant:
<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>
Mais la spécification WHATWG contient un élément d'adresse spécial pour cette tâche.
L'élément d'adresse représente les informations de contact de l'article parent ou de l'élément parent le plus proche. S'il s'agit d'un élément de corps, les informations de contact s'appliquent à l'ensemble du document.
Ainsi, le code suivant est plus vrai:
<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>
Élément Ol
Nous devrions utiliser des listes pour baliser les éléments de navigation tels que le fil d'Ariane, la pagination, etc. Cela est nécessaire pour aider les lecteurs d'écran à lire le nombre d'éléments dans la navigation.
<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>
Habituellement, nous utilisons l'élément ul. Mais la spécification contient une balise plus appropriée. La spécification WHATWG dit:
L'élément ol représente une liste d'éléments où les éléments sont délibérément ordonnés de sorte que le changement de l'ordre changera la signification du document.
Si nous réorganisons les articles dans la navigation du fil d'Ariane, nous modifions la valeur du site Web. Ainsi, le code suivant est plus vrai:
<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>
Élément de temps
Nous utilisons l'élément span pour marquer les dates de diverses publications.
<span>October 5</span> <span>two days ago</span> <span>a Saturday</span>
Mais nous pouvons utiliser la balise temporelle pour cela, qui est contenue dans la spécification WHATWG. Voici ce que dit la spécification WHATWG:
L'élément time représente son contenu avec la forme lisible par machine de ce contenu dans l'attribut datetime. Le contenu est limité par différentes dates, heures, fuseaux horaires et durées.
Par conséquent, nous devons utiliser l'élément time pour marquer les dates.
<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>