Mise en forme du texte en HTML

Imagine que tu es un scribe dans l'Égypte ancienne. Sur le papyrus, tu n'écris pas tout de la même façon - tu mets en valeur les décrets importants du pharaon avec de plus grands hiéroglyphes, tu écris les noms des dieux en italique avec respect, et tu barres les passages interdits. En HTML, tu disposes exactement des mêmes possibilités ! Mohamed dit : « Un texte sans mise en forme est comme une pyramide sans décorations - fonctionnel, mais dépourvu d'âme. »

Gras et italique - Mettre le texte en valeur

Les balises de mise en forme les plus couramment utilisées sont celles qui donnent au texte du poids ou de l'emphase :

Balises sémantiques (recommandées)

La balise <strong> marque un texte comme particulièrement important - le navigateur l'affiche en gras, mais surtout, les lecteurs d'écran soulignent son importance par la voix :

1<p>Attention ! <strong>La pyramide de Khéops</strong> est la seule merveille du monde encore debout.</p>

La balise <em> marque un texte avec une emphase - il s'affiche en italique et est lu avec l'intonation appropriée :

1<p>Mohamed murmura : <em>Ne touche jamais au trésor du pharaon !</em></p>

Les balises <b> et <i>

Les balises <b> et <i> créent aussi du texte en gras et en italique, mais elles n'ajoutent ni importance ni emphase. L'apparence du texte se règle en CSS, et ces balises ont leur propre rôle : <b> attire l'attention sur un mot, par exemple un nom dans une description, et <i> marque un texte distinct du reste, par exemple un nom étranger :

1<p><b>Nom technique :</b> <i>Khoufou</i> est le nom original de Khéops.</p>

Souligné et barré

La balise <u> souligne le texte, mais son usage est limité, par exemple pour signaler des fautes d'orthographe. Un soulignement se confond facilement avec un lien, c'est pourquoi on l'utilise rarement sur les pages :

1<p>Le scribe a écrit <u>piramide</u> au lieu de « pyramide ».</p>

La balise <s> barre le texte - parfait pour montrer une information obsolète, comme un scribe qui rature une erreur sur le papyrus :

1<p>Entrée de la pyramide : <s>50 pièces d'or</s> gratuite !</p>

Surlignage, exposant et indice

La balise <mark> surligne le texte avec un fond jaune, comme un surligneur sur le papyrus :

1<p>La règle la plus importante : <mark>ferme toujours tes balises HTML</mark> !</p>

Les balises <sup> (exposant) et <sub> (indice) sont utiles dans les formules et les dates :

1<p>Chaque côté de la base mesure 230 m, soit une surface d'environ 53 000 m<sup>2</sup></p>
2<p>Formule chimique de l'eau : H<sub>2</sub>O</p>

Sauts de ligne et règles horizontales

Parfois, tu dois aller à la ligne sans créer de nouveau paragraphe. La balise <br> (break) fait exactement cela - c'est une balise auto-fermante, elle n'a pas besoin de balise de fermeture :

1<p>Mohamed<br>Guide de l'Égypte<br>Le Caire, Égypte</p>

La balise <hr> (horizontal rule) crée une ligne horizontale séparant les sections - comme une bordure entre les chapitres sur le papyrus. Elle est aussi auto-fermante :

1<h2>Chapitre 1 : Les pyramides</h2>
2<p>Contenu sur les pyramides...</p>
3<hr>
4<h2>Chapitre 2 : Le Sphinx</h2>
5<p>Contenu sur le Sphinx...</p>

Citations et texte préformaté

Citation en bloc

La balise <blockquote> sert à marquer les citations - comme les décrets royaux gravés sur des tablettes de pierre. Le navigateur ajoute automatiquement un retrait :

1<blockquote>
2  <p>La sagesse est comme le Nil - plus tu regardes profond, plus tu trouves de trésors.</p>
3</blockquote>

Texte préformaté et code

La balise <pre> (preformatted) conserve la mise en forme exacte du texte - tous les espaces, tabulations et retours à la ligne. Idéale pour afficher du code ou des tableaux de texte :

1<pre>
2Pyramide de Khéops :
3  Hauteur :  146 mètres
4  Base :     230 mètres
5  Âge :      4500 ans
6</pre>

La balise <code> marque un fragment de code dans le texte. Le navigateur l'affiche dans une police à chasse fixe (monospace) :

1<p>Pour créer un titre, utilise la balise <code>&lt;h1&gt;</code>.</p>

On combine souvent <pre> avec <code> pour les blocs de code :

1<pre><code>&lt;h1&gt;Bienvenue en Égypte !&lt;/h1&gt;
2&lt;p&gt;Je suis Mohamed.&lt;/p&gt;</code></pre>

Commentaires HTML

Les commentaires sont des notes cachées dans le code qui ne s'affichent pas sur la page. Ils sont comme des messages secrets qu'un scribe a laissés dans les marges du papyrus - visibles uniquement par les autres scribes :

1<!-- Ceci est un commentaire - le navigateur l'ignorera -->
2<h1>Bienvenue en Égypte !</h1>
3
4<!-- TODO : ajouter la description des pyramides -->
5<p>Le contenu sur les pyramides viendra ici.</p>
6
7<!--
8  Commentaire sur plusieurs lignes :
9  Cette section est en préparation.
10  On y reviendra plus tard.
11-->

Les commentaires commencent par <!-- et se terminent par -->. Ils sont extrêmement utiles pour :

• Décrire le code - expliquer ce que fait une section particulière
• Désactiver temporairement - « masquer » des fragments HTML sans les supprimer
• Organiser - marquer les sections dans des documents plus longs

Résumé

Mohamed résume : « La mise en forme du texte en HTML est comme l'art d'écrire des hiéroglyphes - chaque balise a son but et donne au texte la forme appropriée. Souviens-toi de la différence entre les balises qui marquent l'importance et l'emphase (<strong>, <em>) et celles qui distinguent seulement le texte (<b>, <i>). Utilise les commentaires pour laisser des indications aux futurs scribes - y compris toi-même ! »

Voici les balises de mise en forme les plus importantes :

• <strong> / <b> - gras (importance / attirer l'attention)
• <em> / <i> - italique (emphase / texte distinct)
• <u> - souligné, <s> - barré
• <mark> - surlignage, <sup> / <sub> - exposant / indice
• <br> - saut de ligne, <hr> - règle horizontale
• <blockquote> - citation, <pre> - texte préformaté
• <code> - fragment de code
• <!-- --> - commentaire HTML

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <title>Mise en forme du texte</title>
6</head>
7<body>
8    <h1>Mise en forme du texte en HTML</h1>
9
10    <p>Texte <strong>en gras</strong> et <em>en italique</em>.</p>
11    <p>Texte <mark>surligné</mark> et <s>barré</s>.</p>
12    <p>Formule : H<sub>2</sub>O et E = mc<sup>2</sup></p>
13
14    <hr>
15
16    <blockquote>
17        "Le savoir est comme le Nil - plus on en boit, plus on a soif." - Mohamed
18    </blockquote>
19
20    <p>Fragment de code : <code>&lt;h1&gt;</code></p>
21
22    <pre>
23Ceci est    du texte
24    avec une mise en forme
25        conservée
26    </pre>
27
28    <!-- Ceci est un commentaire HTML - invisible sur la page -->
29</body>
30</html>