Si vous avez essayé l'exercice de la deuxième section, vous avez probablement été surpris quand vous avez réalisé que le formatage du code de la page Web ne se retrouve pas dans ce qui est affiché à l’écran. Peu importe le nombre d’espaces ou de retours de ligne dans le fichier HTML, le navigateur affichera seulement un espace entre deux mots qui se suivent dans un paragraphe. Ce qui apparait à l’écran est déterminé uniquement par le contenu du code HTML. Voyons donc les techniques de base pour formater du texte.
Tout d'abord, voyons comment insérer des titres (« heading » en anglais) de pages et de sections. Du code tel que
<h1>Ceci est un titre de page (niveau 1)</h1>
<h2>Ceci est un titre de section (niveau 2)</h2>
<h3>Ceci est un titre de sous-section (niveau 3)</h3>
va générer des résultats qui ressemblent à ceci :
Notez que le navigateur inclut automatiquement un retour de ligne après chaque titre, comme il le fait après chaque paragraphe.
Il existe aussi des titres de niveaux 4, 5 et 6 (éléments h4, h5 et h6).
Les balises <i></i>, <b></b> et <u></u> sont utilisées pour obtenir du texte italique,
gras ou souligné (i, b et u sont les initiales de « italic », « bold » et « underlined », traductions anglaises de italique, gras et souligné). La balise auto fermante <br />,
quant à elle, insère un retour de ligne (br pour « line break » = retour de ligne). Du code comme
<p>Ceci est du texte ordinaire, <i>alors que ceci est du texte en italique.</i></p>
<p><b>Ceci est du texte en caractères gras, <i>et ceci du texte en italique et gras</i></b></p>
<p><u>On déconseille d'utiliser <br /> du texte souligné.</u></p>
<p>On peut utiliser <em>cette solution-ci</em> ou <strong>celle-ci</strong> pour donner de l'emphase ou de l'importance à une partie
d'un texte.</p>
aura pour résultat
Ceci est du texte ordinaire, alors que ceci est du texte en italique.
Ceci est du texte en caractères gras, et ceci du texte en italique et gras
On déconseille d'utiliser
du texte souligné.
On peut utiliser cette solution-ci ou celle-ci pour donner de l'emphase ou de l'importance à une partie d'un texte.
À noter qu’on décourage l’utilisation de texte souligné, le soulignement étant généralement réservé aux liens (voir
plus loin). Comme on le voit, on peut
utiliser les balises <em></em> ou <strong></strong> pour donner de l'emphase ou de l'importance à une section de texte (la différence avec les
balises <i></i> et <b></b> sera expliquée dans la section sur la sémantique).
On peut aussi rapetisser la taille des caractères avec les balises <small></small> (« small » = petit, en anglais), obtenir des indices ou des exposants avec
<sub></sub> et <sup></sup> (« subscript » = indice, « superscript » = exposant) ou obtenir du texte en surbrillance avec
<mark></mark>. Le code
<h1><small>Ceci est un titre de page en plus petit</small></h1>
<p>La formule chimique de l'eau est H<sub>2</sub>O.</p>
<p><mark>Einstein</mark> a découvert la relation <var>E</var> = <var>mc</var><sup>2</sup>.</p>
(où on a utilisé <var></var> pour mettre les symboles E, m et c en italique, comme on le fait habituellement pour les variables) donnera
La formule chimique de l'eau est H2O.
Einstein a découvert la relation E = mc2.
Il existe encore plusieurs autres types de balises qui sont utilisées pour formater du texte, par exemple <cite></cite> pour citer le titre d'une oeuvre
(livre, chanson, … ), <pre></pre> pour du texte pré-formaté, etc.