3 balises HTML utiles dont vous ignorez peut-être l'existence
Jacek Ludzik
Concepteur de produits
De nos jours, l'accessibilité (A11y) est cruciale à toutes les étapes de la construction de produits logiciels personnalisés. En commençant par la partie conception UX/UI, elle pénètre dans les niveaux avancés de construction de fonctionnalités dans le code. Elle offre des tonnes d'avantages aux développeurs qui travaillent sur l'augmentation de la DX, mais surtout aux utilisateurs finaux. Les balises sémantiques sont l'une des parties les plus avancées du HTML et c'est ce que j'aimerais aborder ici.
Les développeurs frontaux doivent être étroitement familiarisés avec Balises HTML puisqu'il s'agit de leur environnement naturel au quotidien. Je parie que vous connaissez tous quelques étiquettes de base telles que , , et ainsi de suite. Mais, par exemple, saviez-vous que vous pouvez suggérer un moment de rupture de mot en utilisant simplement HTMLsans CSS ?
WBR
Supposons que vous travailliez sur un site web ou une application pour un client allemand. Comme vous le savez, les mots allemands peuvent être très longs. Vous avez donc un design avec du contenu textuel que vous devez reproduire en code et ce contenu doit s'interrompre à des moments très précis. C'est là qu'intervient le pour vous aider.
Geburtstagskuchen
Et voilà ! Avec une balise aussi simple, vous pouvez manipuler le contenu du texte comme vous le souhaitez.
Mais qu'en est-il de la prise en charge des navigateurs ? Pour être honnête, elle est plutôt bonne. La plupart des navigateurs comprendront cette balise, mais Opera sur Android et Safari sur iOS pourraient avoir des problèmes.
MÈTRE
Imaginez que vous construisiez une application de gestion du stockage sur disque. Vous avez besoin d'afficher dans l'interface utilisateur le volume de stockage encore disponible, et vous voulez vraiment le rendre aussi accessible que possible. C'est un cas d'utilisation parfait pour l'outil <meter> tag. Elle ne vous donnera que la valeur comprise dans une fourchette définie. Les attributs de cette balise sont également très intéressants :
low → lorsque la valeur actuelle est inférieure à la valeur basse définie, la barre du compteur devient rouge ;
optimum → lorsque les valeurs actuelles sont supérieures à la valeur optimale de l'attribut, la barre du compteur devient verte ;
high → lorsque la valeur high est inférieure à la valeur maximale et supérieure à la valeur optimale, la barre du compteur est orange. Dans le cas contraire, elle est verte.
Vous connaissez peut-être aussi un mot-clé similaire, le progrès. Quelle est donc la différence entre ces deux balises ? La balise de progression doit être utilisée pour les tâches en cours. En d'autres termes, utilisez la balise de progression lorsque vous traitez une tâche spécifique. La balise meter doit être utilisée pour indiquer l'utilisation du disque ou de la mémoire. Une autre différence est que la balise meter n'est pas supportée par IE et que c'est en fait le seul inconvénient de cette balise.
DEL et INS
Vous êtes-vous déjà demandé comment construire un indicateur accessible des parties supprimées et ajoutées d'un contenu (diff dans GitHub ou notifications par email de Jira lorsque le ticket a été mis à jour) ? Il vous suffit d'envelopper le contenu supprimé avec la baliseétiquette. Par exemple : <del><p>Contenu simplement supprimé</p></del>. Pour n'afficher que la partie ajoutée du contenu, vous pouvez utiliser la fonction de la même manière. Cette balise offre également deux attributs :
cite → uri d'une ressource qui explique pourquoi cette partie a été ajoutée ;
datetime → données et heure de la modification.
Il existe, bien sûr, des outils beaucoup plus utiles en HTML . Je recommande vivement de les utiliser toutes lorsque c'est possible et approprié. Vos clients et les utilisateurs de l'application vous remercieront pour cette approche. Attention toutefois, certaines balises peuvent être obsolètes. Vous pouvez toujours vous assurer qu'une balise moins courante que vous voulez utiliser est toujours valide et qu'elle est bien prise en charge par Documentation MDN.