12/04/2022 00:36
HTML, la mise en forme du texte - Eclairement
https://www.eclairement.com/spip.php?page=imprimer&id_article=915
1/4
www.eclairement.com > Technicité
HTML, la mise en forme du texte
dimanche 19 octobre 2008, par Claire Mélanie, Lucien
Pour faire suite à nos articles de présentation de la structure d’une page HTML, des balises et de la hiérarchisation HTML, voici la
présentation de quelques balises HTML de formatage du texte.
[sommaire]
Remarque préalable
Cette mise en forme du texte via du html est de nos jours déconseillé par les instances d’uniformisation du web. Il est
recommandé de dissocier structure et style.
Cependant pour ceux qui voudraient rapidement réaliser quelques pages uniquement en html voici quelques indications sur le
style en html.
Ces quelques notions pourront de plus vous être utiles pour améliorer une annonce ebay, rajouter quelques touches personnelles
dans un article spip sans recourir à des plugins, etc.
Nous verrons par ailleurs des balises qui sont à la fois structurantes et générant un style particulier.
La typographie appliquée à un mot ou à un ensemble de mots
Il s’agira alors de mettre le ou les mots voulus entre certaines balises
Le gras
<b> Le texte à mettre en gras </b>
le "b" de la balise renvoyant au terme anglais "bold"
Le texte à mettre en gras
L’italique
<i> Le texte à mettre en italique </i>
le "i" de la balise renvoyant à "italic"
Le texte à mettre en italique
Le souligné
<u> Le texte à souligner </u>
le "u" de la balise renvoyant au terme anglais "underline" signifiant "souligner"
Le texte à souligner
le télétype
<tt> Le texte télétype </tt>
Le texte télétype
Les balises qui entraînent un style particulier mais qui sont à considérer comme structurantes
<strong></strong> :
12/04/2022 00:36
HTML, la mise en forme du texte - Eclairement
https://www.eclairement.com/spip.php?page=imprimer&id_article=915
2/4
En règle générale, les navigateurs affichent le texte situé entre cette balise en gras.
Cependant, <strong> est différente de <b>.
Alors que la première est purement un effet de style, l’usage en est donc un peu dépassé puisque remplacé par un équivalent en
CSS, on considère que la balise strong est aussi une balise structurante.
Elle indique l’importance d’un mot ou d’un groupe de mots, à l’auteur du code ou du contenu de préciser ensuite de quelle
manière cette portion de texte doit être mise en valeur.
Il est parfaitement imaginable que des navigateurs changent la valeur par défaut de cette balise, ne générant plus un texte en
gras mais un texte avec une police plus grande ou bien générant un enregistrement vocal, etc.
<strong> Texte mis en valeur</strong>
Texte mis en valeur
<em></em> :
L’effet actuel est la mise en italique. La balise vise une mise en valeur du texte, mais un peu moins que dans le cas de la balise
"strong"
<em>Texte mis en valeur</em>
Texte mis en valeur
Balises à formatage thématique
Citation, référence d’un ouvrage :
<cite>texte avec la balise cite</cite>
texte avec la balise cite
Citation, texte extrait d’un ouvrage :
<blockquote>texte avec la balise blockquote</blockquote>
texte avec la balise blockquote
Adresse
<address>28 boulevard des anges-gardiens, 128000 La Terre</address>
28 boulevard des anges-gardiens, 128000 La Terre
texte préformaté
<pre>texte avec la balise
pre
</pre>
texte avec la balise
pre
La balise "pre" permet de maintenir les espaces, les tabulations et les sauts de ligne du texte.
Les typographies techniques
mise en exposant
texte<sup>avec sup </sup>
texteavec sup
mise en indice
texte<sub>avec sub </sub>
12/04/2022 00:36
HTML, la mise en forme du texte - Eclairement
https://www.eclairement.com/spip.php?page=imprimer&id_article=915
3/4
texteavec sub
Modifier la police des caractères
Pour modifier directement la police dans le code html, même si nous le rappelons, ce n’est plus conseillé avec l’avènement du
CSS, on peut utiliser la balise <font></font> auquel on applique l’attribut « face »
<font face="xxxxxx">texte dont on veut modifier la police</font>
Pour changer la police elle-même
<font face="police choisie">texte</font>
Attention à ne pas choisir n’importe quelle police car pour que le texte s’affiche chez l’internaute, il faut que la police soit
disponible sur l’ordinateur qui affichera votre page html. Le plus souvent on utilise les polices courantes du type Times, Verdana,
Arial.
Par exemple
<p><font face="Arial, Verdana">Texte avec la police modifiée</font></p>
Texte avec la police modifiée
Pourquoi deux polices cette fois ? C’est une manière de s’assurer qu’au final le texte s’affiche bien. Si la police « Arial » n’existe
pas sur l’ordinateur d’affichage, le navigateur passera à la police suivante de la liste, ici « Verdana » et affichera le texte en
verdana si elle est disponible.
Pour modifier la taille de la police
On utilisera également la balise <font></font> avec un attribut différent, l’attribut « size » :
<font size="taille choisie">texte</font>
La taille peut se définir de deux manières :
En taille absolue avec une valeur comprise entre 1 et 7, 1 pour la taille la plus petite et 7 pour la taille la plus grande
Exemple
<p><font size=’1’>texte avec la taille la plus petite</font></p>
<p><font size=’7’>texte avec la taille la plus grande</font></p>
texte avec la taille la plus petite
texte avec la taille la plus grande
De façon relative : pour diminuer la taille de police d’un cran, utilisez la valeur -1 pour augmenter la taille de police d’un
cran, utilisez la valeur +1
On peut passer avec des crans plus importants d’une taille à l’autre. On peut très bien choisir -2 comme +2
Exemple
<p><font size="+3">texte avec une taille augmentée de trois niveaux</font></p>
<p><font size="-1">texte avec une taille diminuée d'un niveau</font></p>
texte avec une taille augmentée de trois niveaux
texte avec une taille diminuée d’un niveau
Articles relatifs :
Les codes couleurs HTML
Faire défiler un texte en HTML
Optimiser son contenu pour le référencement
12/04/2022 00:36
HTML, la mise en forme du texte - Eclairement
https://www.eclairement.com/spip.php?page=imprimer&id_article=915
4/4
© Tous les textes et documents disponibles sur ce site, sont, sauf mention contraire, protégés par une licence Creative Common (diffusion
et reproduction libres avec l'obligation de citer l'auteur original et l'interdiction de toute modification et de toute utilisation commerciale sans
autorisation préalable).
