Cours HTML / Donner du sens au texte : emphase, citations, abréviations et code

Les éléments de texte HTML décrivent pourquoi un passage est distinct, et pas seulement son apparence. Utilisez em pour l'emphase, strong pour l'importance, q et blockquote pour les citations, abbr pour les abréviations et code pour le code.

Emphase et importance : em et strong

Utilisez em pour mettre un mot en valeur dans sa phrase. Utilisez strong lorsque le contenu lui-même a une importance particulière, comme dans un avertissement. Les navigateurs affichent souvent ces éléments en italiques et en gras, respectivement, mais leurs significations ne sont pas définies par ces styles.

<p>Enregistrez le fichier <em>avant de</em> actualiser le navigateur.</p>

<p><strong>Ne partagez pas votre mot de passe.</strong></p>

La première phrase met l'accent sur l'ordre des actions ; la seconde marque un avertissement. Si vous avez seulement besoin d'un traitement visuel, utilisez le CSS au lieu d'ajouter des éléments sémantiques sans signification correspondante.

Citations courtes et citations en bloc : q et blockquote

Utilisez q pour une citation courte à l'intérieur d'une phrase et blockquote pour une citation qui constitue un bloc séparé. Les phrases suivantes ont été écrites uniquement pour démontrer les éléments.

<p>La consigne indique <q>Enregistrez vos modifications</q>.</p>



<blockquote>

  <p>Planifiez la structure du document avant de rédiger son contenu.</p>

</blockquote>

Un navigateur peut fournir des guillemets pour q, donc n'ajoutez pas une deuxième paire autour de celui-ci. Pour une vraie citation, vérifiez le libellé et identifiez sa source dans le texte visible. L'attribut cite sur blockquote n'affiche pas automatiquement une source pour les lecteurs.

Expliquer les abréviations avec abbr

abbr identifie une abréviation. Épelez un terme inconnu dans le texte environnant lorsqu'il apparaît pour la première fois ; un lecteur ne devrait pas avoir à passer sa souris sur l'attribut title pour en connaître la signification.

<p>HyperText Markup Language (<abbr title="HyperText Markup Language">HTML</abbr>) définit la structure d’une page web.</p>

Vous n'avez pas besoin de répéter le terme complet à chaque occurrence ultérieure dans le même contexte.

Code et saisie de l'utilisateur : code et kbd

Utilisez code pour un petit morceau de code ou un nom de fichier discuté comme code. Utilisez kbd pour les touches ou toute autre entrée que l'utilisateur doit fournir. Les crochets de code littéraux utilisent les règles d'échappement des caractères dans Syntaxe HTML.

<p>Enregistrez <code>index.html</code> avec <kbd>Ctrl</kbd>+<kbd>S</kbd>.</p>

Pour du code sur plusieurs lignes qui doit conserver l'espacement, HTML peut placer code à l'intérieur de pre. Les blocs de code de ce cours utilisent pre et code, avec une classe de langue pour la coloration syntaxique.

Comparer la sémantique dans un document complet

Enregistrez ce document complet sous text-semantics.html en UTF-8. La citation est une instruction fictive écrite pour démontrer l'élément.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exercice sur la sémantique du texte</title>
</head>
<body>
  <h1>Une courte consigne</h1>
  <p>Vérifiez le résultat <em>après avoir</em> enregistré le fichier.</p>
  <p><strong>Conservez le fichier original.</strong></p>
  <p>Une consigne fictive indique <q>Enregistrez vos modifications</q>.</p>
  <p>Ce document utilise HyperText Markup Language (<abbr title="HyperText Markup Language">HTML</abbr>).</p>
  <p>Enregistrez avec <kbd>Ctrl</kbd>+<kbd>S</kbd>.</p>
  <pre><code>&lt;p&gt;Phrase d’exemple&lt;/p&gt;</code></pre>
</body>
</html>

1. Identifiez l'accentuation, l'avertissement, la citation et l'abréviation en lisant le texte environnant.
2. Vérifiez que le <p> final est affiché comme du code plutôt qu’interprété comme un paragraphe.
3. Remplacez temporairement strong par span, puis restaurez-le pour le message important. Cela compare la signification de l'élément avec sa présentation par défaut.

La référence de code de MDN explique l'élément utilisé pour représenter le code.

Choisissez l'élément qui correspond à la signification.

• Utilisez em pour l’emphase et strong pour l'importance.
• Utilisez q pour une citation en ligne et blockquote pour une citation autonome.
• Utilisez abbr pour une abréviation et expliquez les termes inconnus dans un texte lisible.
• Distinguez le code avec code et les entrées utilisateur avec kbd.

Consultez la référence des éléments HTML MDN pour le contenu autorisé et la syntaxe détaillée de chaque élément. La distinction entre le sens et la présentation s'applique également dans Principes de base de l'accessibilité : Titres, Liens, Images et Clavier.