Balise HTML <tt>
La balise HTML <tt> est obsolète et supprimée d'HTML5. Découvrez quelles balises modernes et CSS utiliser pour le texte à largeur fixe.
La balise <tt> (téletype) est obsolète et a été supprimée d'HTML5 — ne l'utilisez pas. Elle permettait autrefois d'afficher du texte en ligne dans une police à espacement fixe, tel qu'il apparaissait sur un télétype ou une machine à écrire. Les navigateurs modernes peuvent encore l'afficher, mais elle n'a aucune signification sémantique et n'est pas du HTML valide. Utilisez un élément sémantique ou CSS à la place.
<tt> est une balise HTML dépréciée. Elle est listée uniquement à titre de référence. Les nouveaux documents ne doivent pas l'utiliser.
Les termes monotype, monospace et non-proportionnel sont interchangeables : ils décrivent tous une police dont les caractères occupent la même largeur horizontale, ce qui permet l'alignement des colonnes de texte.
Que utiliser à la place de <tt>
<tt> était purement présentationnelle — elle n'indiquait pas pourquoi le texte était en monospace. HTML5 la remplace par des éléments porteurs de sens, ainsi que CSS pour les rares cas où l'on souhaite uniquement l'apparence monospace.
| Vous souhaitez baliser… | Utilisez | Exemple |
|---|---|---|
| Du code source, une balise, une commande | <code> | <code>git commit</code> |
| Une saisie clavier que l'utilisateur doit taper | <kbd> | <kbd>Ctrl</kbd> |
| Une sortie produite par un programme | <samp> | <samp>Build passed</samp> |
| Un nom de variable ou d'espace réservé | <var> | <var>filename</var> |
| Du monospace purement pour la présentation | une classe CSS avec font-family: monospace | voir ci-dessous |
<pre> n'est pas un remplacement direct : la balise <pre> préserve les espaces et les sauts de ligne (texte préformaté). Elle concerne la mise en page, non la signification du texte, et est souvent combinée avec <code> pour les blocs de code.
Choisir le bon élément
- Utilisez un élément sémantique (
<code>,<kbd>,<samp>,<var>) lorsque le texte signifie quelque chose — cela améliore l'accessibilité et vous permet de styliser chaque type différemment. Les quatre s'affichent par défaut en police monospace. - Utilisez CSS uniquement lorsque vous voulez l'apparence monospace sans signification particulière. Appliquez-le via une classe ou une règle
<style>, et non via un attributstyleen ligne, afin que la présentation reste dans votre feuille de style.
Remplacements sémantiques en pratique
Cet exemple montre <code>, <kbd> et <samp> utilisés ensemble dans une instruction réaliste :
<!DOCTYPE html>
<html>
<head>
<title>Replacing the tt tag</title>
</head>
<body>
<p>
Stage your changes with <kbd>git add .</kbd>, then run
<code>git commit -m "message"</code>.
</p>
<p>
On success Git prints <samp>1 file changed</samp>.
</p>
</body>
</html>CSS monospace pour la présentation uniquement
Lorsque vous avez besoin uniquement de l'apparence monospace — sans signification sémantique — définissez une classe en CSS plutôt que d'utiliser <tt> ou un style en ligne :
<!DOCTYPE html>
<html>
<head>
<title>Monospace text with CSS</title>
<style>
.mono {
font-family: monospace;
}
</style>
</head>
<body>
<p>This is an ordinary text.</p>
<p class="mono">And this is monospaced text.</p>
</body>
</html>Consultez la propriété CSS font-family pour en savoir plus sur les piles de polices.
Syntaxe <tt> héritée (à ne pas utiliser)
À titre de référence uniquement, l'élément obsolète <tt> s'écrivait sous la forme d'une paire de balises avec le contenu entre elles :
<!-- Obsolete: removed from HTML5. Shown for reference only. -->
<p>This is an ordinary text.</p>
<p><tt>And this is a teletype text.</tt></p>