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.
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 - les balises sont valides dans un