Les balises de texte

Il existe une multitude de possibilités d’insérer du texte dans une page. En fonction de la nature du contenu certaines balises seront plus adaptées que d’autres. Vous pourrez retrouver un résumé sous forme de tableau ici ↗.

La balise <p> présente un élément textuel, généralement un paragraphe, mais elle peut tout aussi bien contenir un seul caractère. Elle représente l’élément sémantique par défaut si aucune autre balise plus sémantique qu’elle ne convient.

La balise <span> représente un élément textuel sans valeur sémantique. Elle est l’équivalent d’une <div> pour les éléments inline. Elle est couramment utilisée pour mettre en forme une certaine partie de texte, ou contenir un texte dans une autre langue que celle de son parent.

La balise <small> représente un élément textuel de moindre importance, comme un copyright, une mention complémentaire… Elle est par défaut visuellement traitée par les navigateurs avec une font-size légèrement plus petite.

La balise <strong> représente un élément textuel sémantiquement important. On peut l’utiliser pour mettre en avant certaines portions de texte qui ont un réel sens sémantique. Nativement, les navigateurs rendent cette balise avec un font-weight: bold.

La balise <b> veut dire “Bring Attention to Element”. Elle a les mêmes propriétés que la balise <strong> à l’exception qu’elle n’a aucune valeur sémantique.

Historiquement cette balise servait à mettre une portion de texte en gras, mais depuis HTML5 il est recommandé, lorsque vous souhaitez ce comportement stylistique, de passer par le CSS et une déclaration font-weight: bold.

La balise <em> est utilisée pour insister sur une portion de texte, comme on pourrait le faire à l’oral dans une conversation. L’idée est de faire contraster ce texte par rapport à ce qui l’entoure. Nativement, le navigateur l’affiche avec un font-style: italic.

La balise <i> est visuellement représentée de la même manière que <em>, sauf qu’elle ne possède pas de sémantique. Elle est utilisée pour du contenu qui se détache de la prose normale, comme un mot étranger, les pensées d’un personnage fictif, ou lorsque le texte fait référence à la définition d’un mot au lieu de représenter son sens sémantique.

La balise <u> est utilisée pour annoter un contenu. Historiquement on s’en servait pour souligner une portion de texte, mais ce comportement doit maintenant être géré via le CSS et text-decoration: underline. Le cas d’usage typique de cette balise est la mise en avant d’erreurs grammaticales (à la manière de Word).

La balise <s> représente un contenu qui n’est plus à jour. On pourrait citer l’exemple d’un site ecommerce où l’on afficherait l’ancien et le nouveau prix d’un produit. Nativement, la navigateur représente cette balise par une barre par-dessus le texte (strikethrough).

Accessibilité

La plupart des lecteurs d’écran n’annoncent pas le contenu de la balise <s> comme étant erroné. En fonction de votre cas d’utilisation, vous pourriez avoir besoin d’aider les lecteurs à mieux annoncer ce contenu ↗.

La balise <hr> (appelée ”Thematic Break”) permet d’insérer un séparateur entre deux contenus. Auparavant utilisé pour dessiner une barre horizontale, il faut maintenant utiliser du CSS pour ce comportement.

La balise <br> insère un line break, ce qui va forcer un retour à la ligne. Elle est utilisée dans certains cas spécifiques où les retours à la ligne sont sémantiquement nécessaires.

<br> et CSS

N’utilisez pas la balise <br/> pour insérer du blanc entre deux paragraphes. Préfèrez utiliser un margin ou un padding pour ce cas d’utilisation.

• Balises hn←
• Balises de code→