par exemple
- Le HTML sémantique est l'utilisation de balises pour transmettre la signification et le rôle du contenu.
- Cela améliore l'accessibilité pour les utilisateurs malvoyants, ainsi que le référencement en aidant les robots d'exploration des moteurs de recherche à comprendre le contenu.
- Il existe différentes balises HTML sémantiques pour la structure et le texte, il est important de les utiliser correctement et d'éviter de les utiliser uniquement
Accessibilité
Pour les utilisateurs voyants, il est facile d’identifier les différentes parties d’une page Web. Les en-têtes, les pieds de page et le contenu principal sont tous immédiatement apparents. Cependant, ce n’est pas si facile pour les utilisateurs qui aveugle ou malvoyant et compter sur les lecteurs d’écran. L’utilisation appropriée des balises sémantiques HTML permettra à ces lecteurs de mieux comprendre votre contenu car leurs lecteurs d’écran communiqueront votre contenu avec plus de précision.
référencement
Les balises HTML sémantiques sont importantes pour le référencement (optimisation pour les moteurs de recherche) car elles indiquent le rôle du contenu dans les balises. Ces informations permettent aux robots d’exploration des moteurs de recherche, comme Googlebot, de mieux comprendre votre contenu. Cela augmente les chances que votre contenu soit sélectionné comme candidat au classement sur la page de résultats des moteurs de recherche (SERP) pour les mots-clés pertinents.. Les balises sémantiques peuvent définir différentes parties d’une page Web. Examinons les éléments HTML sémantiques les plus courants, divisés en deux catégories en fonction de leur utilisation :
Balises sémantiques HTML pour la structure
De nombreuses balises HTML sémantiques communiquent la mise en page d’une page. Ces balises « structurelles » ont été introduites lorsque HTML4 a été mis à niveau vers HTML5. C’est pourquoi ils sont également connus sous le nom de balises sémantiques HTML5 ou d’éléments sémantiques HTML5. Voici une liste complète :
Il comprend généralement des informations de contact, des informations sur les droits d’auteur et certaines informations de navigation sur le site
Balises sémantiques HTML pour le texte
Les balises HTML sémantiques pour le texte sont des balises HTML qui, outre la mise en forme, transmettent également la fonction sémantique du texte qu’elles contiennent. Voici quelques exemples les plus courants :
(en-tête) : la balise H1 marque l’en-tête de niveau supérieur. Il n’y a généralement qu’un seul titre H1 par page
à (sous-titres) : les sous-titres de différents niveaux d’importance. Il peut y avoir plusieurs titres de même niveau sur une même page.
- (liste ordonnée) : liste d’éléments affichés dans un ordre particulier, en commençant par les puces. Une balise
- (élément de liste) contient un seul élément de la liste
- (liste non ordonnée) : une liste d’éléments qui n’ont pas besoin d’être affichés dans un ordre particulier, en commençant par des nombres ordinaux. Une balise
- (élément de liste) contient un seul élément de la liste.
blockquote> pour les citations longues et multilignes et pour les citations plus courtes et en ligne
- (emphase) : utilisé pour le texte qui doit être mis en évidence
- (emphase forte) : utilisé pour le texte qui doit être fortement mis en évidence
- Un bloc de code informatique
- Utilisation d’une balise
à pour du texte qui n’est pas un titre dans le but de modifier sa taille de police
- Utiliser
uniquement pour indenter du texte qui n’est pas une citation
- Utiliser ou uniquement pour ajouter du gras ou de l’italique au texte qui n’a pas besoin d’être souligné
Conseils et meilleures pratiques HTML sémantique
/h3>
Bien que les navigateurs Web appliquent un style à de nombreuses balises sémantiques (par exemple, le texte dans une balise est généralement bleu et souligné), cela ne signifie pas que les balises HTML sont censées être utilisées pour styler votre texte. En d’autres termes, tout comme vous n’utiliseriez pas une balise pour un texte « sans lien » juste pour le rendre bleu et souligné, vous ne devriez pas utiliser d’autres balises sémantiques à des fins purement stylistiques. Voici quelques exemples typiques d’utilisation incorrecte des balises sémantiques :
Imbriquer les balises d’en-tête avec la sémantique à l’esprit
d’autres erreurs HTML et les erreurs de référencement sur la page dont votre site pourrait souffrir. Le même conseil – imbriquer les balises par leur sens – s’applique à toutes les autres balises HTML sémantiques. Ce qui nous amène au conseil suivant :
Ne vous contentez pas de copier votre mise en page visuelle
Votre implémentation HTML ne doit pas être une simple copie de la mise en page visuelle. Au lieu de cela, il doit suivre la structure sémantique de la page.
Examinons cet exemple : L’utilisation des balises HTML sur le côté gauche est incorrecte car elle indique que la page contient quatre rubriques différentes, plutôt qu’une rubrique et trois sous-rubriques, comme indiqué sur la droite. Sur le côté droit, nous avons une page correctement construite en utilisant le HTML sémantique. Bien qu’il existe quatre sections distinctes dans la présentation visuelle de la page, les balises HTML sont imbriquées en fonction de la sémantique du contenu.
