L’une des principales caractéristiques qui différencient le HTML 5 de ses prédécesseurs est l’introduction des balises HTML sémantiques.
Les balises sémantiques donnent un sens réel à la page Web et permettent aux utilisateurs et aux moteurs de recherche de distinguer facilement les différentes parties du site Web.
Dans une certaine mesure, cela affecte également le référencement d’une page Web.
Pour en tirer profit, vous devez donc connaître les balises HTML 5 que vous pouvez utiliser pour améliorer votre site Web.
Il existe des balises HTML 5 très utiles, mais peu connues qui peuvent également s’avérer primordiales pour rendre votre site Web plus ergonomique et plus efficace. Ces balises HTML 5 donnent un sens sémantique à votre page Web, apportent plus d’accessibilité et facilitent le processus de développement.
Voici notre liste de 5 balises HTML 5 utiles que vous pourriez utiliser dans la conception de votre site web.
Sommaire
La balise HTML 5 <abbr>
Vous utilisez cette balise lorsque vous souhaitez afficher la forme complète d’une abréviation que vous avez déjà utilisée dans votre page Web.
Par exemple, si vous écrivez un article sur un produit de maison intelligente qui possède également des fonctions d’IA dont vous voulez parler. Il se peut que certains lecteurs occasionnels ne soient pas familiers avec l’abréviation IA. L’utilisation de cette balise abrégée associée à l’attribut « title » affichera aux lecteurs une infobulle contenant le contenu de la balise titre de l’abréviation. Lorsque l’utilisateur survole l’abréviation, cela peut l’aider à apprendre ce que signifie « AI ».
Pensez à tout ce que cela vous épargnera si vous avez un jour envie d’ajouter ce genre de fonctionnalité à votre page Web. Au lieu de bricoler avec les feuilles de style en cascade classiques “CSS”, il vous suffit d’insérer cette balise.
Comment utiliser la balise HTML 5 <abbr> ?
Considérant que vous écrivez un blog et que vous avez accès à la vue HTML. Vous devez entourer le mot abrégé d’un attribut de titre qui contiendra la définition ou la forme complète du mot abrégé. Si tout est bien fait, l’infobulle apparaîtra lorsque l’utilisateur survole l’abréviation avec la souris et montrera le contenu de l’attribut « title ».
La balise HTML 5 <details>
Vous utilisez cette balise pour créer une boîte interactive qui peut s’étendre et se rétrécir lorsque l’utilisateur clique dessus tout en contenant tout le contenu. Elle affiche le texte qu’elle contient en s’élargissant et se referme en se rétrécissant.
Cette balise HTML 5 est souvent utilisée dans des sections comme une « FAQ » ou une « table des matières ». Cela vous donne le support original d’un accordéon sans un seul élément de JavaScript.
Comment utiliser la balise HTML 5 <details> ?
Tout d’abord, il faut commencer par déclarer la balise HTML 5 <details> qui entoure la balise <summary> et votre contenu habituel que vous voulez que l’utilisateur voit quand il en a besoin. Le contenu peut être sous différentes formes, comme un formulaire, un tableau, un paragraphe de texte ou une image.
La balise <summary> mentionnée plus tôt est souvent utilisée avec la balise <details> et spécifie un titre pour le contenu.
Imaginons que vous créez une section FAQ avec cette balise et que vous voulez que le conteneur s’ouvre au chargement de la page pour, par exemple « La question la plus posée ». Pour ce faire, il suffit de donner un attribut « open » à cet accordéon particulier.
La balise HTML 5 <optgroup>
Cette balise vous permettra de catégoriser les options de la liste déroulante dans les formulaires que vous créez.
Lorsque vous voulez construire une liste déroulante dans laquelle les utilisateurs peuvent faire leur choix, utilisez la balise <select>. Mais, souvent, il peut devenir très long et fastidieux pour les utilisateurs de parcourir toute la liste pour trouver les bonnes options.
Le regroupement des options peut s’avérer très utile car les utilisateurs n’auront pas à parcourir toutes les options. Au lieu de cela, ils peuvent simplement naviguer jusqu’à la catégorie dont ils ont besoin. L’expérience utilisateur s’en trouve nettement améliorée.
Comment utiliser la balise HTML 5 <optgroup> ?
Juste avant de disposer toutes les options, déclarez la balise <optgroup> et insérez toutes les options qui appartiennent au même groupe. Vous pouvez le faire pour autant de groupes que vous le souhaitez.
La balise HTML 5 <base>
Les balises HTML 5 <base> vous permettent de modifier l’URL de base pour toutes les URL relatives dans un fichier HTML. Vous devez les inclure dans la balise <head> pour bénéficier de la commodité des URL relatives tout en ayant la flexibilité de changer l’URL de base.
Comment utiliser la balise HTML 5 <base> ?
Il suffit de déclarer cette balise à l’intérieur de la balise <head>, Afin que toutes les URL relatives du document auront la nouvelle URL comme base.
Ce qu’il faut éviter avec la balise <base>
L’utilisation de la balise HTML 5 <base> présente toutefois un inconvénient. Elle ne fonctionne pas bien avec les balises d’ancrage dans la page, comme <a href= »#home »>. Ces types de liens sont plutôt utiles du point de vue de la navigation. Donc, à moins que vous vous serviez du JavaScript pour compenser les balises d’ancrage, cette balise n’est peut-être pas idéale.
La balise HTML 5 <map>
Si vous voulez accrocher une seule image avec plusieurs liens et les mapper en fonction de l’image, la balise HTML 5 <map> est celle qu’il vous faut.
Cette balise vous permet de spécifier les zones d’une image (il peut s’agir d’un rectangle, d’un cercle ou d’une forme irrégulière) et de les associer à différents liens.
Comment utiliser la balise HTML 5 <map> ?
Tout d’abord, il faut déclarer une balise <img> avec l’attribut ‘usemap’ qui a la même valeur que l’attribut ‘name’ de la balise <map>. Il doit être identique car c’est lui qui sera chargé de relier les coordonnées de la carte à l’image.
La balise HTML 5 <map> sera déclarée après cela avec l’attribut ‘name’ qui contient la même valeur que l’attribut ‘usemap’.
La balise HTML 5 entoure également les balises <area> avec les attributs ‘shape’, ‘coords’, ‘alt’ et ‘href’. L’attribut shape spécifie la forme de la zone de la carte, coords définit les coordonnées de la zone de la carte à des fins de cartographie, alt est pour le texte alternatif, et href contient les liens pour les zones respectives.
Voici donc les balises HTML 5 utiles et pratiques que nous voulions partager avec vous ! N’hésitez pas à les utiliser pour peaufiner votre site Web et contribuer à améliorer son référencement.