8. Le gras, l'italique et compagnie

Sommaire

À la fin de ce chapitre, vous serez capable d'enrichir vos textes de gras, d'italique et d'autres effets typographiques standards. Vous saurez également créer des retours à la ligne et des séparateurs.

8.1 Éléments de type bloc et de type en ligne

Certains élément HTML se comportent comme des paragraphes : ils créent un retour à la ligne avant et après le texte qu'ils contiennent. Ainsi en est-il de la plupart des éléments vus jusqu'à présent. Ce sont des éléments de type bloc.

Au contraire des précédents, les éléments de type en ligne délimitent une portion de texte, mais sans créer de retour à la ligne avant ou après. Ainsi en est-il, par exemple, des éléments q et cite vus au chapitre précédent.

Pour la validité du code, un élément de type en ligne doit être compris à l'intérieur d'au moins un élément de type bloc tel un en-tête, un paragraphe, un bloc de citation, etc.

Presque tous les éléments dont il sera question dans ce chapitre sont de type en ligne. Essentiellement, ils servent à enrichir le texte d'effets typographiques semblables à ceux qu'on peut générer depuis une machine à écrire standard.

8.2 Le gras et l'italique

La phrase suivante utilise successivement des mots en gras, en italique et en italique gras :

À l'intérieur de ce paragraphe, on a des mots en gras, des mots en italique et des mots en italique gras.

Ces mots ont été balisés avec les éléments b, qui vaut pour Bold, et i, qui vaut pour Italic.

Lorsqu'on applique plusieurs effets typographiques à une même portion de texte, il faut veiller à refermer les balises dans l'ordre inverse de leur ouverture, comme ceci :

<p>Voici des <i><b>mots en italique gras</b></i>.</p>

Pour être sûr de m'être bien fait comprendre, voici le genre de chose à ne pas faire lorsque vous imbriquez des balises :

<p>Voici des <i><b>mots en italique gras</i></b>.</p>

8.3 Deux types d'emphases

Les emphases servent à indiquer une sorte d'insistance. Le HTML distingue deux types d'emphases. Une emphase tout court avec l'élément em, qui vaut pour Emphasis et une emphse forte avec l'élément strong, qui signifie « fort ».

La plupart du temps, les navigateurs graphiques vont afficher un texte balisé avec em en italique et un texte balisé avec strong en gras. En quoi ces éléments diffèrent-ils alors des éléments i et b ? La réponse est subtile.

Le gras et l'italique sont des enrichissements typographiques purement visuels. Ils n'ont aucune valeur sémantique particulière et ne seront perceptibles qu'à l'écran ou à l'imprimé.

Au contraire, les emphases ont une valeur sémantique d'insistance et seront perceptibles aussi bien à l'écran et à l'imprimé qu'à travers des changements de voix significatifs dans un synthétiseur vocal.

Concrètement, si vous voulez qu'un texte apparaisse en italique simplement pour annoncer un changement de langue, utilisez l'élément i. Si vous le mettez en italique pour signifier qu'il s'agit d'un mot important, utilisez plutôt em.

Semblablement, si vous voulez qu'un texte apparaisse en gras simplement pour faciliter le repérage d'un mot-clé à l'écran, utilisez l'élément b. Et s'il s'agit de marquer une insistance sur un mot ou un passage particulièrement important, utilisez de préférence strong.

8.4 Exposants et indices

Les éléments sup et sub permettent de mettre du texte en exposant et en indice. Ils valent respectivement pour Superscript et pour Subscript.

La valeur d'un chiffre pourra ne pas être la même selon qu'il est mis en indice ou en exposant. Par exemple, x2 + y2 ne signifie pas du tout la même chose que l'expression x2 + y2.

Pour lever pareille ambiguïté, les éléments sup et sub sont non seulement utiles, mais nécessaires. S'il n'y a pas d'ambiguïté dans le fait de les employer ou non, par exemple pour écrire Mlle au lieu de Mlle, ne pas y recourir portera moins à conséquence.

8.5 Retours à la ligne et séparateurs

Il peut arriver qu'on veuille forcer un ou plusieurs retours à la ligne à l'intérieur d'un paragraphe ou d'une même phrase, comme dans l'exemple suivant où on cherche à détacher les vers d'un poème :

Il est certains esprits dont les sombres pensées
Sont, d'un nuage épais, toujours embarrassées;
Avant donc que d'écrire, apprenez à penser.

Selon que notre idée est plus ou moins obscure,
l'expression la suit, ou moins nette, ou plus pure.

Ce que l'on conçoit bien s'énonce clairement,
Et les mots pour le dire arrivent aisément.

— Boileau, Art poétique

L'élément br vaut pour Line break et a été conçu pour ce type d'usage. Comme il ne délimite aucun texte, il ne s'exprime pas au moyen d'une paire de balises ouvrante et fermante, mais au moyen d'une balise auto-fermante, comme ceci : <br />.

Notez l'espace qui précède les signes / et >. Son absence ne rendrait pas votre code invalide, mais pourrait embêter certains vieux navigateurs. Mieux vaut ne pas l'omettre.

L'élément hr vaut pour Horizontal rule et sert à générer une règle horizontale appelée « filet » ou encore « séparateur ». Il s'exprime lui aussi au moyen d'une seule balise, comme ceci : <hr />.

Les éléments br et hr ne délimitent aucun contenu. Pour cette raison, ils échappent à la distinction susdite entre éléments de type bloc et éléments de type en ligne.

Conclusion

En guise de conclusion, je vous offre un tableau récapitulatif des éléments HTML étudiés jusqu'à présent.

Notes : 1) Les éléments marqués d'un astérisque (*) ont une syntaxe particulière ou s'expriment au moyen d'une balise auto-fermante. 2) Lorsqu'un élément n'est ni de type bloc ni de type en ligne, j'ai mis « s/o » pour signifier que la question est alors « sans objet ».

Description sommaire des éléments HTML
NomSignificationTypeFonction
NomSignificationTypeFonction
!DOCTYPE*Doctypes/oDéclarer la version de HTML utilisée
htmlHTMLs/oContenir le document HTML entier
headHeads/oDélimiter l'en-tête du document HTML
meta*Metainformations/oDéfinir des métadonnées
titleTitles/oAttribuer un titre au document HTML
bodyBodyBlocDélimiter le corps du document HTML
h1 à h6Heading 1 … 6BlocCréer des en-têtes hiérarchisées
pParagraphBlocCréer des paragraphes
ulUnordered listBlocDélimiter une liste à puces
olOrdered listBlocDélimiter une liste numérotée
liList itemBlocBaliser un item de liste
dlDefinition listBlocDélimiter une liste de définitions
dtDefinition termBlocBaliser le terme à définir d'une liste
ddDefinition dataBlocBaliser la définition d'un terme de liste
blockquoteBlockquoteBlocDélimiter un bloc de citation
qQuoteEn ligneBaliser une citation en ligne
citeCiteEn ligneBaliser la référence à une source
bBoldEn ligneMettre du texte en gras
iItalicEn ligneMettre du texte en italique
emEmphasisEn ligneMarquer une emphase
strongStrongEn ligneMarquer une emphase forte
supSuperscriptEn ligneMettre du texte en exposant
subSubscriptEn ligneMettre du texte en indice
br*Line breaks/oForcer un retour à la ligne
hr*Horizontal rules/oGénérer une règle horizontale

À jour le 4 mars 2006