Qu'est-ce que c'est et comment l'utiliser correctement

par exemple

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  :

  • La balise d’en-tête définit le contenu qui doit être considéré comme l’information d’introduction d’une page ou d’une section
  • La balise de navigation est utilisée pour les liens de navigation. Il peut être imbriqué dans la balise, mais les balises de navigation secondaire sont également couramment utilisées ailleurs sur la page
  • Cette balise contient le contenu principal (également appelé le corps) d’une page. Il ne devrait y avoir qu’une seule balise par page
  • La balise d’article définit le contenu qui pourrait être indépendant de la page ou du site sur lequel il se trouve. Cela ne signifie pas nécessairement un « article de blog ». Considérez-le davantage comme «un vêtement» – un article autonome qui peut être utilisé dans divers contextes
  • L’utilisation de est un moyen de regrouper le contenu à proximité d’un thème similaire. Une balise de section diffère d’une balise d’article. Il n’est pas nécessairement autonome, mais il fait partie d’autre chose.
  • Un élément de côté définit le contenu qui est moins important. Il est souvent utilisé pour les barres latérales, des zones qui ajoutent des informations complémentaires mais non essentielles
  • 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.

  • (paragraphe)  : un paragraphe de texte autonome
  • (ancre)  : utilisé pour baliser un lien hypertexte d’une page à une autre
    1. (liste ordonnée) : liste d’éléments affichés dans un ordre particulier, en commençant par les puces. Une balise

    2. (é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

      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  :

      • 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é

      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.

    3. Comment bloquer une partie d'une page de l'indexation par les moteurs de recherche
    4. Comment utiliser les balises d'en-tête et les balises H1 pour le référencement
    5. Balises d'image HTML et comment insérer des images pour enrichir vos pages
    6. Les différents types de liens : quand et comment les utiliser

Tags: ,