À la fin de ce chapitre, vous serez capable d'enrichir vos textes de gras, d'italiques et d'autres effets typographiques standards. Vous saurez également créer des retours à la ligne et des séparateurs.
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.
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>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 emphase 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.
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.
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.
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 ».
| Nom | Signification | Type | Fonction |
|---|---|---|---|
| Nom | Signification | Type | Fonction |
| !DOCTYPE* | Doctype | s/o | Déclarer la version de HTML utilisée |
| html | HTML | s/o | Contenir le document HTML entier |
| head | Head | s/o | Délimiter l'en-tête du document HTML |
| meta* | Metainformation | s/o | Définir des métadonnées |
| title | Title | s/o | Attribuer un titre au document HTML |
| body | Body | Bloc | Délimiter le corps du document HTML |
| h1 à h6 | Heading 1 … 6 | Bloc | Créer des en-têtes hiérarchisées |
| p | Paragraph | Bloc | Créer des paragraphes |
| ul | Unordered list | Bloc | Délimiter une liste à puces |
| ol | Ordered list | Bloc | Délimiter une liste numérotée |
| li | List item | Bloc | Baliser un item de liste |
| dl | Definition list | Bloc | Délimiter une liste de définitions |
| dt | Definition term | Bloc | Baliser le terme à définir d'une liste |
| dd | Definition data | Bloc | Baliser la définition d'un terme de liste |
| blockquote | Blockquote | Bloc | Délimiter un bloc de citation |
| q | Quote | En ligne | Baliser une citation en ligne |
| cite | Cite | En ligne | Baliser la référence à une source |
| b | Bold | En ligne | Mettre du texte en gras |
| i | Italic | En ligne | Mettre du texte en italique |
| em | Emphasis | En ligne | Marquer une emphase |
| strong | Strong | En ligne | Marquer une emphase forte |
| sup | Superscript | En ligne | Mettre du texte en exposant |
| sub | Subscript | En ligne | Mettre du texte en indice |
| br* | Line break | s/o | Forcer un retour à la ligne |
| hr* | Horizontal rule | s/o | Générer une règle horizontale |