HTML Formatting : qu’est-ce que le formatage HTML ?
Le formatage HTML désigne le processus de structuration et de mise en forme du contenu des pages Web, comme les textes et les images, par l’utilisation de balises HTML. L’utilisation correcte de ces balises permet de présenter les contenus de manière claire, concise et attrayante.
HTML Formatting : définition
Le langage HTML met à disposition des outils de base pour structurer les éléments de la page. Ces diffé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 permettent par exemple de définir des titres, de créer des paragraphes 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 différents éléments d’une page Web. Un formatage correct contribue non seulement à améliorer la lisibilité des textes, mais aussi à faciliter la navigation des utilisateurs sur le site Web. Parallèlement, le formatage HTML sert au SEO, puisqu’un site Internet clair et bien structuré est plus facile à appréhender pour les crawlers des moteurs de recherche (programmes qui analysent le contenu des pages Web).
Avec notre guide « Apprendre le HTML : le tutoriel pour débutants », vous disposerez de toutes les connaissances de base sur le langage HTML.
HTML Formatting : quels tags sont nécessaires ?
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éterminent l’apparence exacte d’un élément de page. Elles définissent directement la manière dont le texte et les autres éléments sont représentés visuellement. 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émantique. - Les balises logiques définissent la signification d’un élément et contribuent ainsi à la structure sémantique d’un site Web. Elles permettent aux moteurs de recherche, aux navigateurs et aux technologies d’assistance de mieux comprendre 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 correspondant.
- 3x plus rapide, 60 % d'économie
- Haute disponibilité >99,99 %
- Seulement chez IONOS : jusqu'à 500 Go inclus
HTML Formatting : les tags les plus importants
HTML met à disposition une large palette de balises pour formater le contenu des pages Web. Les possibilités vont de la structuration de mises en page complètes à l’adaptation d’éléments individuels. Notre guide sur les balises HTML offre une vue d’ensemble des principales commandes. L’aperçu suivant se concentre plus particulièrement sur les tags pour le formatage HTML de textes ou de passages de texte et leurs fonctions respectives.
| Tag HTML | Description |
|---|---|
<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 visuellement et pour le navigateur. |
<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’importance 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 représenté en gros. |
<p>
|
Cette balise permet de créer des paragraphes. |
<big>
|
Cette balise HTML permet d’afficher les paragraphes plus grands que la normale. |
<small>
|
Ce tag est utilisé pour réduire la taille de la police d’un paragraphe. |
<sup>
|
Cette balise est utilisée pour mettre en exposant des caractères individuels, par exemple dans l’équation e = mc², qui sont ensuite réduits et affichés légèrement au-dessus de la ligne. |
<sub>
|
Cette balise permet d’afficher les caractè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 individuels. |
<mark>
|
Ce tag HTML permet de mettre en couleur l’arrière-plan des mots, des phrases et des sections de texte. |
Depuis HTML5, certaines balises de formatage, comme <big> et <strike>, sont considérées comme obsolètes et ne doivent plus être utilisées. Pour ces styles, il est désormais recommandé 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;.
- 1 certificat SSL Wildcard par contrat
- Fonction incluse Domain Connect pour une configuration DNS simplifiée
HTML Formatting : exemples d’application
Le formatage HTML offre d’innombrables possibilités pour structurer les textes et autres éléments des sites Web et les rendre plus attrayants. Pour exploiter pleinement le potentiel du formatage HTML, il est important de savoir comment utiliser les différentes balises HTML. Les exemples d’application suivants expliquent comment cela fonctionne.
Exemple 1 : afficher un texte en gras
Pour qu’un mot ou un passage de texte soit affiché en caractères gras, utilisez la balise HTML <b>. En tant que balise physique, cette commande ne fait que modifier l’apparence du paragraphe correspondant.
<!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>Sortie :
En utilisant la balise approprié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 navigateurs, utilisez la balise HTML <strong>. Celle-ci souligne l’importance du passage mis en évidence. Ici aussi, le passage correspondant est généralement 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>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 remarquent directement à 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>Sortie :
Le mot suivant est affiché en italique.
Exemple 4 : souligner des passages de texte
Bien entendu, le formatage HTML offre également la possibilité de souligner des mots ou des passages entiers, c’est-à-dire de les mettre en évidence par un trait. Pour cela, il est nécessaire 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>Sortie :
Exemple 5 : barrer des mots
Les contenus entourés par la balise <strike> sont affichés barrés. L’utilisation de cette balise HTML permet entre autres d’indiquer des informations 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>Sortie :
