logo oujood
🔍

 Balises de style HTML : <b>, <i>, <small>, <big>, <tt>

Guide technique et pédagogique sur les balises de mise en forme inline en HTML5 : utilisation correcte, attributs globaux, gestionnaires d'événements et alternatives CSS modernes.

OUJOOD.COM

Les balises de style inline en HTML5

LES BALISES HTML

Les balises de style HTML inline telles que <b>, <i>, <small>, <big>, <tt> et <u> permettent d'appliquer une mise en forme typographique directement dans le flux du texte, sans créer de bloc séparé. Elles sont prises en charge dans tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) et restent fonctionnelles en HTML5, bien que certaines soient déconseillées au profit du CSS.

En 2026, la distinction entre balises de présentation et balises sémantiques est fondamentale : préférer <strong> à <b> et <em> à <i> améliore l'accessibilité web, le référencement naturel SEO et la lisibilité du code pour les lecteurs d'écran.

Référence des balises : <b>, <big>, <i>, <small>, <tt>

Ces balises sont toutes des éléments de style inline à balise de fermeture obligatoire. Elles agissent directement sur l'apparence visuelle du texte qu'elles encadrent. Bien qu'elles ne soient pas officiellement obsolètes en HTML5 (sauf <big> et <tt> qui le sont depuis HTML5), il est fortement recommandé d'utiliser du CSS pour obtenir des effets visuels équivalents mais plus riches et maintenables. Voici le rôle de chacune :

  • <b> : Met le texte en gras sans connotation sémantique forte (préférer <strong> pour l'importance).
  • <big> : Affiche le texte dans une taille de police supérieure (obsolète en HTML5, remplacer par CSS font-size).
  • <i> : Met le texte en italique (préférer <em> pour l'emphase sémantique).
  • <small> : Réduit la taille du texte, utile pour les mentions légales ou annotations.
  • <tt> : Affiche le texte en police à chasse fixe (télétypewriter) — obsolète en HTML5, remplacer par <code> ou <kbd>.
  • <u> : Souligne le texte (à éviter car confondu avec les liens hypertexte).

Exemple pratique : utilisation des balises de style

L'exemple ci-dessous illustre le rendu de chaque balise de style dans le navigateur. Notez que pour un code HTML sémantique et accessible, on préférera les alternatives modernes mentionnées ci-dessus.

  📋 Copier le code

Ce texte est écrit en normal<br />
<b>Ce texte est en gras (bold)</b><br />
<!-- <big> agrandit la police, obsolète en HTML5 -->
<big>Ce texte est en taille agrandie</big><br />
<!-- <tt> simule une police machine à écrire, obsolète en HTML5 -->
<tt>Ce texte est en police télétypewriter (monospace)</tt><br />
<small>Ce texte est en taille réduite (mentions, annotations)</small><br />
<i>Ce texte est en italique</i><br />
<u>Ce texte est souligné</u>

Exemple moderne avec CSS (bonne pratique 2026)

En 2026, la bonne pratique pour la mise en forme typographique consiste à utiliser des balises sémantiques combinées avec du CSS inline ou des classes. Cela sépare le contenu de la présentation et améliore la maintenabilité du code HTML.

  📋 Copier le code

<!-- Gras sémantique avec <strong> pour l'importance -->
<strong>Texte important en gras</strong><br />
<!-- Italique sémantique avec <em> pour l'emphase -->
<em>Texte avec emphase en italique</em><br />
<!-- Remplacement de <big> par CSS font-size -->
<span style="font-size:1.2em;">Texte agrandi avec CSS</span><br />
<!-- Remplacement de <tt> par <code> pour le code source -->
<code>function exemple() { return true; }</code><br />
<!-- <small> reste valide en HTML5 pour les annotations -->
<small>Mention légale ou copyright &copy; 2026</small>

Attributs des balises de style

La colonne DTD dans les tableaux suivants indique dans quel type de document HTML 4.01 / XHTML 1.0 l'attribut est autorisé : S=Strict, T=Transitional, F=Frameset. En HTML5, tous ces attributs globaux sont supportés sans restriction de DTD.

Attributs globaux (standards)

Les balises de style HTML prennent en charge les attributs globaux suivants, communs à tous les éléments HTML :

Attribut Valeur Description DTD
class nom de classe Spécifie une ou plusieurs classes CSS pour cibler l'élément avec des styles ou des scripts STF
dir ltr | rtl Définit le sens de lecture du texte : ltr (gauche à droite) ou rtl (droite à gauche, pour l'arabe, l'hébreu…) STF
id identifiant unique Attribue un identifiant unique à l'élément pour le ciblage CSS ou JavaScript STF
lang code langue (ex: fr, en) Précise la langue du contenu de l'élément pour les moteurs de recherche et les lecteurs d'écran STF
style déclarations CSS Applique un style CSS inline directement sur l'élément (à utiliser avec modération) STF
title texte Fournit une information complémentaire affichée en infobulle au survol de l'élément STF
xml:lang code langue Équivalent de lang pour les documents XHTML ; précise la langue dans un contexte XML strict STF

Attributs d'événements JavaScript

Les balises de style HTML supportent également les gestionnaires d'événements JavaScript suivants, permettant de déclencher des scripts en réponse aux interactions utilisateur :

Attribut Valeur Description DTD
onclick script JS Déclenche un script lors d'un clic simple sur l'élément STF
ondblclick script JS Déclenche un script lors d'un double-clic sur l'élément STF
onmousedown script JS Déclenche un script lorsque le bouton de la souris est enfoncé sur l'élément STF
onmousemove script JS Déclenche un script lorsque le pointeur se déplace au-dessus de l'élément STF
onmouseout script JS Déclenche un script lorsque le pointeur quitte la zone de l'élément STF
onmouseover script JS Déclenche un script lorsque le pointeur entre dans la zone de l'élément STF
onmouseup script JS Déclenche un script lorsque le bouton de la souris est relâché STF
onkeydown script JS Déclenche un script lorsqu'une touche du clavier est enfoncée STF
onkeypress script JS Déclenche un script lorsqu'une touche est enfoncée puis relâchée (déprécié en HTML5, préférer onkeydown) STF
onkeyup script JS Déclenche un script lorsqu'une touche du clavier est relâchée STF

Trucs, astuces et bonnes pratiques 2026

Astuce : En HTML5 moderne, privilégiez toujours les balises sémantiques <strong> et <em> plutôt que <b> et <i> pour signifier l'importance ou l'emphase — les lecteurs d'écran et les moteurs de recherche interprètent correctement ces balises sémantiques.
Note : Les balises <big> et <tt> sont officiellement obsolètes depuis HTML5. Utilisez à la place les propriétés CSS font-size et font-family: monospace ou la balise <code>.
Accessibilité : Évitez <u> pour souligner du texte décoratif : les utilisateurs l'assimilent à un lien hypertexte, ce qui nuit à l'expérience utilisateur et à l'accessibilité WCAG 2.2.

    Vous êtes ici : Balises de style HTML     Retour à la liste des balises




Retour à l'accueil du site

Par carabde | Mis à jour le 20 février 2026