Qu'est-ce que le HTML sémantique et pourquoi l'utiliser

Un principe important dans la conception Web est l'idée d'utiliser des éléments HTML pour indiquer ce qu'ils sont réellement, plutôt que comment ils peuvent apparaître dans le navigateur par défaut. C'est ce qu'on appelle l'utilisation du HTML sémantique.

Qu'est-ce que le HTML sémantique?

Le HTML sémantique ou le balisage sémantique est du HTML qui introduit un sens à la page Web plutôt qu'une simple présentation. Par exemple, un

 La balise indique que le texte inclus est un paragraphe. C'est à la fois sémantique et présentationnel car les gens savent ce que sont les paragraphes et les navigateurs savent comment les afficher.

Au revers de cette équation, des balises telles que  et  ne sont pas sémantiques. Ils définissent uniquement l'apparence du texte (gras ou italique) et ne fournissent aucune signification supplémentaire au balisage.

Voici des exemples de balises HTML sémantiques:

  • Balises d'en-tête

     à travers

Il existe de nombreuses autres balises HTML sémantiques à utiliser lorsque vous créez un site Web conforme aux normes.

instagram viewer

Pourquoi vous devriez vous soucier de la sémantique

L'avantage d'écrire du HTML sémantique découle de ce qui devrait être l'objectif moteur de toute page Web: le désir de communiquer. En ajoutant des balises sémantiques à votre document, vous fournissez des informations supplémentaires sur ce document, ce qui facilite la communication. Plus précisément, les balises sémantiques indiquent clairement au navigateur la signification d'une page et de son contenu. Cette clarté est également communiquée aux moteurs de recherche, garantissant que les bonnes pages sont livrées pour les bonnes requêtes.

Les balises HTML sémantiques fournissent des informations sur le contenu de ces balises qui vont au-delà de leur apparence sur une page. Le texte qui est inclus dans le  tag est immédiatement reconnu par le navigateur comme un type de langage de codage. Au lieu d'essayer de restituer ce code, le navigateur comprend que vous utilisez ce texte comme exemple de code aux fins d'un article ou d'un didacticiel en ligne.

L'utilisation de balises sémantiques vous donne également beaucoup plus d'accroches pour styliser votre contenu. Peut-être qu'aujourd'hui vous préférez que vos exemples de code s'affichent dans le style de navigateur par défaut, mais demain, vous voudrez peut-être les appeler avec une couleur d'arrière-plan grise; plus tard encore, vous voudrez peut-être définir la famille de polices à interligne précis ou pile de polices à utiliser pour vos échantillons. Vous pouvez faire toutes ces choses facilement en utilisant un balisage sémantique et un CSS intelligemment appliqué.

Utiliser correctement les balises sémantiques

Lorsque vous utilisez des balises sémantiques pour transmettre un sens plutôt qu'à des fins de présentation, veillez à ne pas les utiliser de manière incorrecte simplement pour leurs propriétés d'affichage communes. Certaines des balises sémantiques les plus couramment utilisées à mauvais escient comprennent:

  • citation de bloc — Certaines personnes utilisent le balise pour indenter le texte qui n'est pas une citation. C'est parce que les guillemets sont indentés par défaut. Si vous souhaitez simplement mettre en retrait du texte qui n'est pas un guillemet, utilisez plutôt des marges CSS.
  • p — Certains éditeurs Web utilisent (un espace insécable contenu dans un paragraphe) pour ajouter un espace supplémentaire entre les éléments de la page, plutôt que de définir des paragraphes réels pour le texte de cette page. Comme dans l'exemple précédent, vous devez utiliser la propriété de style margin ou padding à la place pour ajouter de l'espace.
  • ul - Comme avec
    , englobant le texte à l'intérieur d'un
       tag indente ce texte dans la plupart des navigateurs. Il s'agit à la fois d'un code HTML sémantiquement incorrect et invalide, car seul
    •  les balises sont valides dans un
        étiqueter. Encore une fois, utilisez la marge ou le style de remplissage pour mettre le texte en retrait.
    • h1, h2, h3, h4, h5 et h6 — Vous pouvez utiliser des balises de titre pour rendre les polices plus grandes et plus audacieuses, mais si le texte n'est pas un titre, utilisez plutôt les propriétés CSS font-weight et font-size.

    En utilisant des balises HTML qui ont un sens, vous créez des pages qui donnent plus d'informations que celles qui entourent simplement tout

     Mots clés.

    Quelles balises HTML sont sémantiques?

    Bien que presque toutes les balises HTML4 et tous les HTML5 les balises ont des significations sémantiques, certaines balises sont principalement sémantique.

    Par exemple, HTML5 a redéfini le sens du  et  les balises doivent être sémantiques. le  la balise ne donne pas d'importance supplémentaire; au lieu de cela, le texte balisé est généralement rendu en gras. De même, le  le tag ne donne pas d'importance ou d'emphase supplémentaire; il définit plutôt le texte qui est généralement rendu en italique.

    Balises HTML sémantiques

    Abréviation
    Acronyme
    Citation longue
    Définition
    Adresse du ou des auteurs du document
    Citation
    Référence du code
    Télétype de texte
    Division logique
    Conteneur de style générique en ligne
    Texte supprimé
    Texte inséré
    Accentuation
    Forte emphase
    Titre de premier niveau
    Titre de deuxième niveau
    Titre de troisième niveau
    Titre de quatrième niveau
    Titre de cinquième niveau
    Titre de sixième niveau

    Pause thématique
    Texte à saisir par l'utilisateur
    Texte préformaté
    Devis court en ligne
    Exemple de sortie
    Indice
    Exposant
    Texte variable ou défini par l'utilisateur