HTML 5 - 2.4 : Spécifier la sémantique des mots et des phrases

Bienvenue dans ce cours d'HTML5. Cette leçon montre comment spécifier la sémantique des mots et des phrases avec différentes balises de formatage. Commençons par mettre un texte en gras : on utilise la balise .... Après actualisation, la phrase apparaît bien en gras. On peut faire de même avec la balise ..., qui ajoute en plus une signification sémantique d'importance.

Balises de formatage et de sémantique

Pour mettre un texte en italique, on utilise la balise ... ou bien ... (pour emphasis, c'est-à-dire mise en évidence). Pour réduire la taille d'un texte secondaire — par exemple une note peu importante — on utilise la balise  : le texte apparaît plus petit dans le rendu. Pour forcer un saut de ligne sans paragraphe, on utilise  . Et pour séparer visuellement deux sections avec une ligne horizontale, on utilise <hr> : après actualisation, on voit une séparation entre les deux paragraphes.

Pour citer un texte entre guillemets dans une section dédiée, on utilise la balise <blockquote>. Le texte est mis en retrait et affiché comme un bloc à part. Cette balise accepte un attribut cite dans lequel on peut indiquer la source, par exemple cite="https://google.com" si le texte provient de cet article. Pour gérer les abréviations, on utilise la balise <abbr> avec l'attribut title : par exemple <abbr title="Nota Bene">NB</abbr>. Au survol, une petite infobulle s'affiche pour donner la signification.

L'article ressemble maintenant à quelque chose de plus structuré. Pour tester le rendu sur un téléphone, on peut utiliser l'outil d'inspection du navigateur (clic droit puis Inspecter) et sélectionner un appareil : par exemple iPhone X pour voir le rendu mobile, ou Galaxy S5 pour voir l'aspect sur ce modèle. Ces balises sémantiques permettent non seulement de donner du sens aux mots et phrases, mais aussi d'améliorer l'accessibilité (pour les lecteurs d'écran) et le référencement (pour les moteurs de recherche).

En résumé

Cette leçon explore les balises HTML5 qui donnent une sémantique (du sens) au contenu textuel. Elle couvre le formatage visuel et sémantique du texte (gras, italique, petit texte), la structuration du contenu (alinéas, séparations, citations) et l'annotation de contenus spécialisés (abréviations avec définitions). Des démonstrations pratiques montrent le rendu dans l'inspecteur du navigateur, y compris sur différentes résolutions d'écran.

Points clés

Les balises ``, ``, ``, `` et `` ajoutent du sens sémantique au texte au-delà du simple formatage visuel
Les balises structurelles ` `, `<hr>` et `<blockquote>` délimitent et organisent le contenu de manière lisible
La balise `<abbr>` avec l'attribut `title` documente les abréviations pour améliorer l'accessibilité et la clarté
L'inspecteur du navigateur (responsive design) permet de prévisualiser le rendu sur différents appareils (téléphones, tablettes)

Questions fréquentes

Quelle est la différence entre `` et `` ou entre `` et `` ?

`` et `` appliquent un style visuel (gras, italique) sans sémantique particulière. `` et `` indiquent une *importance* ou une *emphase* pour les lecteurs d'écran et les moteurs de recherche, rendant le contenu plus accessible.

À quoi sert la balise `<blockquote>` ?

Elle indique qu'un texte est une citation ou un passage tiré d'une autre source. Elle le met en retrait visuel et structure sémantiquement le contenu, améliorant la compréhension pour les assistants d'accessibilité.

Comment documenter une abréviation pour les utilisateurs ?

Utilisez `<abbr title="définition complète">NB</abbr>`. Lorsque l'utilisateur survole l'abréviation, une infobulle affiche la définition complète, rendant le contenu plus clair et accessible.