Le formatage HTML désigne le processus de struc­tu­ra­tion et de mise en forme du contenu des pages Web, comme les textes et les images, par l’uti­li­sa­tion de balises HTML. L’uti­li­sa­tion correcte de ces balises permet de présenter les contenus de manière claire, concise et at­trayante.

HTML For­mat­ting : dé­fi­ni­tion

Le langage HTML met à dis­po­si­tion des outils de base pour struc­tu­rer les éléments de la page. Ces dif­fé­rents éléments peuvent être organisés à l’aide de balises (ou tags) HTML, c’est ce que l’on appelle le formatage HTML. Ainsi, il est possible de définir la manière dont les textes, les images et autres sont affichés dans un document HTML. Les balises per­met­tent par exemple de définir des titres, de créer des pa­ra­graphes et de présenter des listes à puces.

À quoi sert le formatage HTML ?

Le formatage HTML permet d’optimiser à la fois la structure et l’aspect visuel des dif­fé­rents éléments d’une page Web. Un formatage correct contribue non seulement à améliorer la li­si­bi­lité des textes, mais aussi à faciliter la na­vi­ga­tion des uti­li­sa­teurs sur le site Web. Pa­ral­lè­le­ment, le formatage HTML sert au SEO, puisqu’un site Internet clair et bien structuré est plus facile à ap­pré­hen­der pour les crawlers des moteurs de recherche (pro­grammes qui analysent le contenu des pages Web).

Conseil

Avec notre guide « Apprendre le HTML : le tutoriel pour débutants », vous dis­po­se­rez de toutes les con­nais­sances de base sur le langage HTML.

HTML For­mat­ting : quels tags sont né­ces­saires ?

Pour le formatage HTML, on distingue les balises physiques et les balises logiques (appelées physical tags et logical tags en anglais) :

  • Les balises physiques dé­ter­mi­nent l’apparence exacte d’un élément de page. Elles dé­fi­nis­sent di­rec­te­ment la manière dont le texte et les autres éléments sont re­pré­sen­tés vi­suel­le­ment. La balise <b> pour le texte en gras et <i> pour le texte en italique en sont des exemples. Les balises HTML physiques n’abordent toutefois pas le contexte sé­man­tique.
  • Les balises logiques dé­fi­nis­sent la sig­ni­fi­ca­tion d’un élément et con­tri­buent ainsi à la structure sé­man­tique d’un site Web. Elles per­met­tent aux moteurs de recherche, aux na­vi­ga­teurs et aux tech­no­lo­gies d’as­sis­tance de mieux com­prendre le contenu. Par exemple, la balise HTML <em> est utilisée pour les emphases à l’intérieur d’un texte et entraîne souvent une mise en italique du passage cor­res­pon­dant.
Hé­ber­ge­ment Web
Hé­ber­ge­ment Web de pointe au meilleur prix
  • 3x plus rapide, 60 % d'éco­no­mie
  • Haute dis­po­ni­bi­lité >99,99 %
  • Seulement chez IONOS : jusqu'à 500 Go inclus

HTML For­mat­ting : les tags les plus im­por­tants

HTML met à dis­po­si­tion une large palette de balises pour formater le contenu des pages Web. Les pos­si­bi­li­tés vont de la struc­tu­ra­tion de mises en page complètes à l’adap­ta­tion d’éléments in­di­vi­duels. Notre guide sur les balises HTML offre une vue d’ensemble des prin­ci­pales commandes. L’aperçu suivant se concentre plus par­ti­cu­liè­re­ment sur les tags pour le formatage HTML de textes ou de passages de texte et leurs fonctions res­pec­tives.

Tag HTML Des­crip­tion
<b> Cette balise physique fait en sorte qu’un mot, une phrase ou un passage de texte soit mis en gras.
<strong> Ce tag logique HTML permet de mettre en évidence des sections, à la fois vi­suel­le­ment et pour le na­vi­ga­teur.
<i> Cette balise physique permet d’afficher des mots, des phrases ou des passages en italique.
<em> Cette balise logique sert à mettre en évidence l’im­por­tance de certains passages ; souvent, les contenus marqués sont affichés en italique.
<u> Le passage est souligné.
<h1> à <h6> Ces tags servent à créer des titres. La règle est la suivante : plus le chiffre est bas, plus le titre est re­pré­senté en gros.
<p> Cette balise permet de créer des pa­ra­graphes.
<big> Cette balise HTML permet d’afficher les pa­ra­graphes plus grands que la normale.
<small> Ce tag est utilisé pour réduire la taille de la police d’un pa­ra­graphe.
<sup> Cette balise est utilisée pour mettre en exposant des ca­rac­tères in­di­vi­duels, par exemple dans l’équation e = mc², qui sont ensuite réduits et affichés lé­gè­re­ment au-dessus de la ligne.
<sub> Cette balise permet d’afficher les ca­rac­tères en indice. Un exemple est la formule chimique de l’eau : H2O.
<ins> Ce tag indique que du texte a été inséré dans un document.
<del> La balise indique qu’un texte a été supprimé d’un document.
<strike> Cette balise est utilisée pour barrer des passages in­di­vi­duels.
<mark> Ce tag HTML permet de mettre en couleur l’arrière-plan des mots, des phrases et des sections de texte.
Note

Depuis HTML5, certaines balises de formatage, comme <big> et <strike>, sont con­si­dé­rées comme obsolètes et ne doivent plus être utilisées. Pour ces styles, il est désormais re­com­mandé d’utiliser CSS, qui permet un contrôle plus précis et flexible de l’apparence du texte. Par exemple, la mise en forme autrefois assurée par <big> peut être remplacée par font-size en CSS, tandis que <strike> peut être substitué par text-decoration: line-through;.

Nom de domaine
Votre domaine en un clic
  • 1 cer­ti­fi­cat SSL Wildcard par contrat
  • Fonction incluse Domain Connect pour une con­fi­gu­ra­tion DNS sim­pli­fiée

HTML For­mat­ting : exemples d’ap­pli­ca­tion

Le formatage HTML offre d’in­nom­brables pos­si­bi­li­tés pour struc­tu­rer les textes et autres éléments des sites Web et les rendre plus at­trayants. Pour exploiter plei­ne­ment le potentiel du formatage HTML, il est important de savoir comment utiliser les dif­fé­rentes balises HTML. Les exemples d’ap­pli­ca­tion suivants ex­pli­quent comment cela fonc­tionne.

Exemple 1 : afficher un texte en gras

Pour qu’un mot ou un passage de texte soit affiché en ca­rac­tères gras, utilisez la balise HTML <b>. En tant que balise physique, cette commande ne fait que modifier l’apparence du pa­ra­graphe cor­res­pon­dant.

<!DOCTYPE html>
<html>
<head>
    <title>Exemple d’application pour le texte en gras</title>
</head>
<body>
    <p>En utilisant la balise appropriée, <b>le texte sera affiché en gras</b>.
</body>
</html>
html

Sortie :

En utilisant la balise ap­pro­priée, le texte sera affiché en gras.

Exemple 2 : mettre en évidence des passages de texte

Si votre objectif est de mettre en évidence un passage pour les lecteurs, les moteurs de recherche et les na­vi­ga­teurs, utilisez la balise HTML <strong>. Celle-ci souligne l’im­por­tance du passage mis en évidence. Ici aussi, le passage cor­res­pon­dant est gé­né­ra­le­ment affiché en gras.

<!DOCTYPE html>
<html>
<head>
    <title>Exemple d’application pour la mise en valeur de passages de texte</title>
</head>
<body>
    <p>Les derniers mots de la phrase sont <strong>mis en évidence</strong>.</p>
</body>
</html>
html

Sortie :

Les derniers mots de la phrase sont mis en évidence.

Exemple 3 : afficher des mots et des passages en italique

Il n’est pas rare que les mots étrangers soient affichés en italique dans les textes afin qu’ils se re­mar­quent di­rec­te­ment à la lecture. Dans ce cas, la balise HTML <i> est utilisée.

<!DOCTYPE html>
<html>
<head>
    <title>Exemple d’utilisation de l’italique</title>
</head>
<body>
    <p>Le mot suivant est affiché en <i>italique</i>.</p>
</body>
</html>
html

Sortie :

Le mot suivant est affiché en italique.

Exemple 4 : souligner des passages de texte

Bien entendu, le formatage HTML offre également la pos­si­bi­lité de souligner des mots ou des passages entiers, c’est-à-dire de les mettre en évidence par un trait. Pour cela, il est né­ces­saire de recourir à la balise <u>.

<!DOCTYPE html>
<html>
<head>
    <title>Exemple d’application pour les sections soulignées</title>
</head>
<body>
    <p>Souligner <u>un mot</u> est utile dans diverses situations.</p>
</body>
</html>
html

Sortie :

Image: HTML Formatting : exemple de texte souligné
Utilisez la balise pour souligner un mot dans un texte.

Exemple 5 : barrer des mots

Les contenus entourés par la balise <strike> sont affichés barrés. L’uti­li­sa­tion de cette balise HTML permet entre autres d’indiquer des in­for­ma­tions obsolètes ou périmées.

<!DOCTYPE html>
<html>
<head>
    <title>Exemple d’application pour les passages barrés</title>
</head>
<body>
    <p>L’offre est encore valable jusqu’au <strike>1er novembre</strike> 1er décembre.</p>
</body>
</html>
html

Sortie :

Image: HTML Formatting : exemple de texte barré
La balise permet de barrer du texte.
Aller au menu principal