La mise en forme du texte en HTML
Définition : Les balises block et les balises inline
Avant d’aborder les différentes techniques de mise en forme du texte, il est important que vous sachiez qu’il existe deux types de balises en HTML : les balises block et les balises inline.
En HTML, une balise block est une balise qui crée un nouveau bloc de contenu sur la page web. Cela signifie que tout le contenu compris entre la balise d'ouverture et la balise de fermeture sera affiché comme un bloc distinct. Les balises block sont souvent utilisées pour organiser le contenu de la page en sections distinctes et pour définir la mise en page de la page web. Les exemples les plus courants de balises block incluent les balises <div>, <p>, <ul>, <ol>, <h1> à <h6> et <blockquote>.
Une balise inline, elle, est une balise qui ne crée pas un nouveau bloc de contenu sur la page web. Cela signifie que le contenu compris entre la balise d'ouverture et la balise de fermeture sera affiché sur la même ligne que le contenu qui le précède ou le suit.
Les balises inline sont souvent utilisées pour formater le texte ou pour ajouter des éléments en ligne, tels que des liens hypertextes, des images ou des boutons. Les exemples les plus courants de balises inline incluent les balises <a>, <img>, <span> et <button>.
Le formatage du texte
Lors de la création d'une page web, il est important de considérer la mise en forme du texte pour une présentation visuellement attrayante et facile à lire. Le HTML offre plusieurs balises qui permettent de mettre en évidence certains mots ou certaines phrases sans avoir recours à un fichier CSS.
Ces balises comprennent notamment les balises <b> et <strong>, qui permettent de faire apparaître le contenu en gras. Cependant, il y a une différence entre les deux : la balise <b> sert uniquement à la mise en forme, tandis que la balise <strong> indique que le mot ou la phrase a une importance particulière. L'utilisation de ces balises peut permettre de mieux structurer le contenu d'une page web, de mettre en valeur des éléments importants et d'améliorer la lisibilité du texte.
De même, les balises <i> et <em> permettent de faire apparaître le contenu en italique. La différence entre ces deux balises est similaire à celle entre les balises <b> et <strong>. La balise <em> est préférée pour mettre en valeur un mot ou une phrase bien précise, et peut également être utilisée pour améliorer la lisibilité du texte.
La balise HTML <mark> est utilisée pour mettre en évidence une partie de texte. Elle est souvent utilisée pour indiquer un mot ou une phrase importante dans le contenu d'une page. La balise <mark> permet de faire ressortir visuellement une partie de texte en la surlignant avec une couleur de fond différente. Cette balise est très utile pour attirer l'attention des visiteurs sur des informations importantes ou des mots-clés. En utilisant la balise <mark> de manière stratégique, vous pouvez améliorer la lisibilité et l'impact de votre contenu web.
La balise HTML <small> est utilisée pour formater du texte en réduisant sa taille. Elle peut être utilisée pour indiquer des notes de bas de page, des légendes, des crédits ou des informations supplémentaires qui ne sont pas essentielles à la compréhension du contenu principal de la page. La balise <small> est souvent utilisée en conjonction avec d'autres balises telles que <sup> et <sub> pour créer des textes de petit format avec des indices supérieurs ou inférieurs. Cette balise est très utile pour améliorer la lisibilité du contenu de la page et pour ajouter des informations supplémentaires sans compromettre la structure visuelle de la page.
Vous pourrez retrouver les principales balises de mise en forme du texte sur le site : w3docs. En visitant ce site, vous pourrez en apprendre davantage sur la façon de mettre en forme le texte d'une page web et ainsi améliorer la qualité de votre contenu web.
L’attribut « style » et la balise <style>
Il est vrai qu'aujourd'hui, il est considéré comme obsolète d'utiliser des balises de formatage de texte en HTML. Toutefois, il existe deux autres façons de styliser des éléments directement dans le code HTML. L'utilisation de la balise universelle « style » est une première option pour styliser des éléments en leur attribuant une couleur, une police d'écriture ou encore une taille.
Exemple :
Vous pouvez utiliser l'attribut « style » pour colorer un paragraphe en bleu et modifier la taille du texte comme suit :
<p style="color:blue; font-size:18px;">Ceci est un paragraphe écrit en bleu avec un texte d’une taille de 18px</p>
Cependant, l'utilisation de l'attribut « style » peut poser un problème, car il faut réécrire les règles de style pour chaque élément auquel on veut l'appliquer. Si vous souhaitez que tous les paragraphes soient bleus, alors il faudra ajouter l'attribut « style » à tous les éléments <p> de votre document HTML. Pour remédier à cela, il est possible d'utiliser la balise <style>.
La balise <style> peut être placée dans la partie <body> du document HTML, mais il est préférable de la placer dans le <head> pour bien séparer la mise en forme du contenu du document. Reprenons l'exemple des paragraphes écrits en bleu, mais cette fois, nous utiliserons la balise <style> :
<style>
p {color: blue;
}
</style>
De cette manière, tous les paragraphes du document HTML seront écrits en bleu. L'avantage de l'utilisation de cette balise est qu'elle rend le code plus lisible et plus facile à maintenir dans le cas où vous souhaiteriez effectuer des changements. En somme, bien que l'utilisation de l’attribut universelle « style » soit une option pour styliser des éléments dans le code HTML, l'utilisation de la balise <style> est une approche plus efficace pour séparer la présentation du contenu de votre document HTML.
Définition : L’attribut universel « class »
Comme nous l’avons déjà remarqué, les balises HTML peuvent prendre en compte un certain nombre d’attributs, qui vont donner des informations supplémentaires sur le comportement de l’élément qui porte cet attribut. Les attributs universels sont pris en compte par toutes les balises HTML. L’un des plus utilisés est l’attribut « class » qui permet de donner aux balises une classe, c’est-à-dire une sorte d’étiquette qui va nous permettre de trier nos éléments.
Cela permet de créer des styles réutilisables qui peuvent être appliqués à différents éléments de la page sans avoir à les redéfinir à chaque fois. Par exemple, si vous souhaitez appliquer le même style à plusieurs titres de niveau 2, vous pouvez tous leur donner la même classe, puis appliquez les styles à cette classe dans votre balise <style>. L'attribut « class » est donc très utile pour simplifier la gestion des styles dans une page web, en particulier pour les éléments qui doivent avoir la même apparence.
Imaginons qu'il y ait plusieurs <h2> sur ma page. Je veux que certains de ces h2 soient de couleur verte. Je pourrais le faire de la manière suivante :
<style>
.green-title {color: green;
}
</style>
<h2 class="green-title">Expériences</h2>
<h2 class="green-title">Education</h2>
Attention : Les fichiers CSS externes
L’attribut « style » et la balise <style> contiennent tous deux des déclarations qui sont écrites en CSS. Il est important de savoir qu’il est possible de mettre en forme du contenu directement dans le code HTML. Cependant, on préférera presque toujours l’utilisation de fichiers CSS externes pour des raisons de lisibilité et de maintenabilité. Ces fichiers seront liés à notre fichier HTML grâce à la balise <link> dont nous parlerons plus tard.