Formatage de texte en HTML

Introduction au formatage de texte

Lorsque l'on travaille avec HTML, il existe deux principales méthodes pour formater le texte. La première consiste à utiliser des balises HTML, qui modifient l'apparence du texte en fonction de ses caractéristiques. La seconde approche repose sur l'utilisation des propriétés de typographie CSS pour définir un formatage spécifique d'un élément de texte.

Les balises HTML

Il est important de noter que l'utilisation des balises HTML comme , et pour le formatage explicite du texte a été abandonnée dans les normes HTML modernes. Bien que ces balises soient encore présentes, elles ne servent plus à indiquer un formatage spécifique mais plutôt à indiquer les caractéristiques du texte. En voici quelques-unes :

  • <b> : Indique du texte qui mérite l'attention du lecteur, généralement affiché en gras.
  • <em> : Sert à souligner un texte. Ce texte est généralement affiché en italique.
  • <h1> à <h6> : Représentent différents niveaux de titres, influençant la taille et le poids de la police.
  • <i> : Utilisé pour désigner une expression idiomatique, un terme technique ou une désignation taxonomique, habituellement en italique.
  • <strong> : Montre un texte d'importance ou d'urgence, affiché en gras.
  • <u> : Indique du texte à afficher avec une annotation non textuelle, souvent avec un soulignement.

Appliquer le style CSS

Pour formater le texte avec un style spécifique, on utilise CSS. Cela peut être fait via une feuille de style externe ou par l'attribut style. Voici quelques propriétés CSS pertinentes pour le formatage du texte :

  • @font-face : Permet de spécifier une police personnalisée pour afficher le texte.
  • font : Propriété raccourcie qui configure plusieurs caractéristiques de la police d'un élément en une seule déclaration.
  • font-family : Définit la famille de polices à utiliser.
  • font-size : Ajuste la taille du texte.
  • font-style : Permet d'appliquer le style de police, habituellement pour les italiques, remplaçant ainsi .
  • font-weight : Modifie l'épaisseur du texte, remplaçant pour le gras.
  • text-decoration : Ajoute des lignes au texte, remplaçant pour le soulignement.
  • text-shadow : Ajoute une ombre au texte.