Sémantique
En programmation, la sémantique fait référence au sens d'une partie de code — par exemple « quel effet aura l'exécution de cette ligne de JavaScript ? » ou « quel est le rôle ou le but de cet élément HTML » (plutôt que « à quoi ressemble-t-il ? ».)
La sémantique en JavaScript
En JavaScript, considérez une fonction qui prend une chaîne de caractères en paramètre et retourne un élément HTML <li> avec cette chaîne comme textContent. Auriez-vous besoin de regarder le code pour comprendre ce que fait la fonction si elle s'appelle build('Peach') ou createLiWithContent('Peach') ?
La sémantique en CSS
En CSS, imaginez la mise en forme d'une liste dont les éléments li représentent différents types de fruits. Sauriez-vous quelle partie du DOM est sélectionnée avec div > ul > li ou .fruits__item ?
La sémantique en HTML
En HTML, par exemple, l'élément HTML <h1> est un élément sémantique qui donne au texte qu'il contient le rôle (ou le sens) de « titre de premier niveau de votre page ».
<h1>Ceci est un titre de premier niveau</h1>
Par défaut, la plupart des feuilles de style de l'agent utilisateur des navigateurs appliqueront à un <h1> une grande taille de police pour le faire ressembler à un titre (bien que vous puissiez le styliser pour qu'il ressemble à tout ce que vous voulez).
À l'inverse, vous pouvez faire ressembler n'importe quel élément à un titre de premier niveau. Considérez l'exemple suivant :
<span style="font-size: 32px; margin: 21px 0;">
Est-ce un titre de premier niveau ?
</span>
Cela sera affiché comme un titre de premier niveau, mais sans en avoir la valeur sémantique, il n'y aura donc aucun des bénéfices supplémentaires tels que ceux décrits ci-dessus. Il est donc préférable d'utiliser le bon élément HTML pour la bonne tâche.
Le code HTML doit être écrit pour représenter les données qui seront affichées, et non en fonction de leur présentation par défaut. La présentation (c'est-à-dire l'apparence) relève uniquement de la responsabilité de la CSS.
Voici quelques avantages à écrire un balisage sémantique :
- Les moteurs de recherche considéreront son contenu comme des mots-clés importants pour influencer le classement de la page dans les résultats de recherche (voir SEO)
- Les lecteurs d'écran peuvent l'utiliser comme repère pour aider les utilisateur·ice·s malvoyant·e·s à naviguer sur une page
- Trouver des blocs de code significatifs est bien plus facile que de chercher parmi une multitude de
div, avec ou sans classes sémantiques ou nommées - Suggère au·à la développeur·euse le type de données qui sera affiché
- La dénomination sémantique reflète la bonne pratique de nommage des éléments ou composants personnalisés
Lorsque vous choisissez quel balisage utiliser, demandez-vous : « Quel(s) élément(s) décrivent/représentent le mieux les données que je vais afficher ? » Par exemple : s'agit-il d'une liste de données ? ; ordonnée, non ordonnée ? ; d'un article avec des sections et un encadré d'informations associées ? ; d'une liste de définitions ? ; d'une figure ou d'une image nécessitant une légende ? ; doit-elle comporter un en-tête et un pied de page en plus de l'en-tête et du pied de page du site ? ; etc.
Les éléments sémantiques
Ce sont quelques-uns des quelque 100 éléments sémantiques disponibles :
Voir aussi
- Référence des éléments HTML sur MDN
- Utiliser les sections HTML et les plans de document sur MDN
- Sémantique des langages de programmation sur Wikipédia
- Termes associés du glossaire :