Dans cet article, nous verrons comment baliser des passages caractéristiques, selon leur importance, leur pertinence ou un changement de ton.
| Prérequis : | Vous devriez au préalable savoir comment créer un document HTML ismple. |
|---|---|
| Objectifs : | Apprendre comment marquer des passages de texte contenus dans votre document qui seraient spéciaux ou particulièrement importants pour les lecteurs. |
Les dialogues ne se résument pas uniquement à des séries de mots : le ton importe également. Dans les œuvres couchées sur le papier, ce sont la ponctuation et la mise en forme qui permettent de retranscrire ces informations. Quelle que soit l'outil utilisé, le but est d'ajouter des informations implicites.
Voici un exemple simple :
Je suis en retard.
Je suis en retard ?
Dans cet exemple, la première phrase exprime une connaissance (je sais que je suis en retard) alors que la seconde évoque un doute ou pose une question. On remarquera que l'ordre des mots n'a pas changé, seule la ponctuation change cette nuance. À l'oral, cela se serait traduit par un changement de ton.
La mise en forme permet également d'ajouter des nuances. Voici un deuxième exemple :
Je suis sympa, même si parfois je suis méchant.
Cette phrase est plutôt neutre. Ajoutons quelque chose pour changer ça :
Je suis sympa, même si parfois je suis méchant.
Je suis sympa, même si parfois je suis méchant.
Remarquez-vous le changement que cela apporte ? L'italique accentue l'adjectif « sympa » ou « méchant ». En imprimerie, l'accentuation est portée par la mise en forme (ici la mise en italique). Il faudrait plus de contexte pour saisir tout le sens de cette phrase mais la mise en forme ajoute clairement une intonation.
Cet article ne porte pas sur la mise en forme du document. Ce n'est pas le rôle de HTML que de mettre en forme un document (en revanche, la tâche est toute indiquée pour CSS qui vous aidera à contrôler l'aspect visuel de votre page web). Ici, nous verrons comment ajouter le sens porté par la mise en forme. Or, ajouter du sens est le rôle de HTML. Une fois que le sens est présent dans le document, alors, on pourra le mettre en forme grâce à CSS.
Ici, nous évoquerons trois nuances qui peuvent être exprimées par HTML : l'emphase, l'importance et la pertinence.
L'emphase
L'élément <em> (<em> pour emphase) permet d'exprimer une accentuation particulière sur un ou plusieurs mots (qui se serait traduite à l'oral par un changement de ton).
Allons-nous <em>au cinéma</em> ce soir ?
Allons-nous au cinéma <em>ce soir</em> ?
Par défaut, un navigateur graphique affiche le texte contenu dans un élément <em> en italique mais cette mise en forme peut être changée avec CSS. Les lecteurs d'écran utiliseront un ton différent pour lire ce texte. Pour résumer, <em> signifie emphase et pas italique.
L'importance
L'élément <strong> permet d'indiquer une importance forte (c'est en quelque sorte une emphase renforcée).
<p>
<strong>Ne pas</strong> toucher ces produits chimiques.
Ces produits chimiques sont <strong>corrosifs !</strong>
</p>
Ici aussi, par défaut les navigateurs graphiques afficheront le texte contenu dans <strong> en gras. Mais là encore, <strong> signifie « très important » et pas « gras » ! La mise en forme pourra être adaptée librement avec CSS. De même, un lecteur d'écran lira le texte différemment car celui-ci est important (et non parce qu'il est affiché en gras).
La pertinence
<strong> permet d'indiquer du texte qui est important pour le contexte courant. L'élément <mark>, en revanche, signifie que le texte est pertinent par rapport au contenu destiné au lecteur. Un exemple courant est l'utilisation des résultats liés à une recherche :
<p> « ce » apparaît 3 fois dans le texte : <mark>Ce</mark> chat a tué <mark>ce</mark> rat et <mark>ce</mark> moineau. </p>
Là encore, la mise en forme appliquée peut être modifiée. Par défaut, le texte sera affiché sur un fond jaune :
Attention lorsqu'on utilise <mark> pour marquer des résultats liés à une recherche. Si la recherche renvoie des correspondances partielles, cela pourrait casser les éléments <mark>. Par exemple : Le chat a couru après <mark>ce</mark>s oiseaux. Cela entraînera des problèmes d'accessibilité car les lecteurs d'écran ne sauront pas traiter (ou traiteront mal) les mots ainsi découpés.
Les éléments associés à la sémantique
Si vous souhaitez afficher un texte avec une mise en forme particulière, pensez d'abord au sens que vous souhaitez communiquer. Si le sens peut être transmis par <em>, <strong> ou <mark>, utilisez ces éléments (plutôt que CSS seul, ce qui serait une mauvaise pratique).
Il existe d'autres cas pour lesquels on affiche habituellement le texte en italique ou en gras et qui correspondent à une sémantique particulière qui peut être transmise grâce à des éléments HTML :
<cite>pour les titres d'œuvres citées<dfn>pour la première occurence d'un terme<q>pour les citations dans le texte du document<var>pour les variables mathématiques
HTML ne permet pas de couvrir tous les cas de figures (sinon utiliser HTML correctement serait un calvaire de perfectionnisme). En règle générale, si vous souhaitez afficher du texte de façon différente et qu'il existe un élément HTML pour transmettre ce sens : utilisez-le, sinon vous pouvez utiliser l'élément neutre <span> en spécifiant sa sémantique avec l'attribut class et en le mettant en forme grâce à CSS.
Les éléments que nous avons évoqués jusqu'à présent (à l'exception de <span>) ont tous une sémantique claire. En revanche, cela peut être plus ambigu avec les éléments <b>, <i> et <u>. Ces éléments HTML permettent d'écrire du texte en gras, italique ou de le souligner. Ils sont apparus lorsque CSS n'existait pas ou avant qu'il ne soit supporté largement. Avec HTML5, ces éléments ont vu leur sémantique précisée.
Voici la règle à respecter : s'il n'existe pas d'élément approprié permettant de retranscrire précisément le sens d'un texte qui serait généralement affiché en gras, italique ou souligné, alors on pourra utiliser <b>, <i> ou <u> à la place de <span>. Attention toutefois à ne pas oublier l'accessibilité : la mise en italique n'est pas particulièrement utile pour les personnes utilisant des lecteurs d'écran ou pour les personnes qui utilisent un alphabet non latin.
<i>permet généralement de retranscrire du texte placé en italique : des termes d'une langue étrangère, des dénominations taxonomiques, des termes techniques, des pensées, etc.<b>permet de retranscrire du texte généralement affiché en gras : des mots-clés, des noms de produits, etc.<u>permet de retranscrire des noms propres, des fautes d'orthographe
Léger avertissement à propos du soulignement : les visiteurs associent fortement le soulignement avec des hyperliens. De fait, on ne soulignera généralement que les liens d'une page. <u> ne doit être utilisé que lorsque la sémantique qu'il porte est sans équivoque. Dans ces cas, CSS pourra être utilisé pour définir un motif de soulignement différent, plus approprié. L'exemple qui suit illustre comment obtenir ce résultat.
<!-- Des noms scientifiques -->
<p>
Le colibri à gorge rubis (<i>Archilocus colubris</i>)
est l'espèce de colibri la plus répandue en Amérique
du Nord orientale.
</p>
<!-- Des termes étrangers -->
<p>
Le menu comportait de nombreux termes exotiques comme
<i lang="uk-latn">vatrushka</i>, <i lang="id">nasi goreng</i>
et <i lang="en">pancakes</i>.
</p>
<!-- Une faute d'orthographe -->
<p>
Un jour, j'écrirai <u class="erreur-orthographe">mieu</u>.
</p>
<!-- Des mots-clés mis en avant dans un mode d'emploi -->
<ol>
<li>
<b>Tranchez</b> le pain en deux tranches.
</li>
<li>
<b>Insérez</b> une tranche de tomate et
une feuille de salade entre les tranches.
</li>
</ol>
/* Voici des mises en forme alternatives
permettant au lecteur de repérer la différence */
b {
font-weight: normal;
font-variant: small-caps;
}
.erreur-orthographe {
text-decoration: underline red wavy;
}