Balises HTML dépréciées

Ce chapitre explique quelles balises HTML sont dépréciées, pourquoi elles sont tombées en désuétude et ce qu'il faut utiliser à la place. Si vous avez hérité d'un ancien balisage ou copié un extrait d'un vieux tutoriel, voici votre guide vers les remplacements modernes.

Pourquoi les balises HTML sont dépréciées

La plupart des balises dépréciées partagent une cause commune : elles mélangent la présentation (l'apparence du contenu) avec la structure (la signification du contenu). Les premières versions de HTML disposaient de balises comme <font>, <center> et <big> qui contrôlaient les couleurs, l'alignement et les tailles directement dans le balisage. Cette approche n'est pas adaptée à grande échelle : modifier l'apparence d'un site impliquait d'éditer chaque page manuellement.

Le développement web moderne suit le principe de la séparation des préoccupations : HTML décrit la structure et le sens du contenu, tandis que CSS gère tout le style. Cela rend les pages plus faciles à maintenir, plus légères à télécharger et plus flexibles à restyle. Cela améliore également l'accessibilité — les lecteurs d'écran et autres outils d'assistance s'appuient sur un balisage sémantique et significatif, et non sur des effets visuels. Pour une vue d'ensemble de l'approche moderne centrée sur le sens, consultez les Éléments sémantiques en HTML5 et l'introduction à HTML5.

Déprécié vs. obsolète

Ces deux termes sont souvent utilisés de manière interchangeable, mais ils ne signifient pas la même chose :

• Déprécié — la balise est encore autorisée et la plupart des navigateurs la rendent toujours, mais son utilisation est déconseillée. Elle pourrait être supprimée à l'avenir.
• Obsolète — la spécification HTML5 indique que la balise ne doit pas être utilisée. Les navigateurs peuvent continuer à la rendre uniquement pour la rétrocompatibilité, mais vous ne devez jamais écrire de nouveau balisage avec elle.

Avant et après : remplacer une balise dépréciée

L'exemple classique est <font>, qui définissait la couleur, la taille et la police directement dans le balisage. Voici l'ancienne méthode comparée à son équivalent CSS.

Déprécié, présentation dans HTML :

<font color="red" size="5" face="Arial">Important notice</font>

Moderne, structure et CSS :

<p class="notice">Important notice</p>

.notice {
  color: red;
  font-size: 1.5rem;
  font-family: Arial, sans-serif;
}

La deuxième version sépare ce qu'est le texte (un paragraphe qui constitue un avis) de son apparence. Vous pouvez modifier le style de chaque .notice sur le site en éditant une seule règle CSS. Apprenez-en plus sur les pages CSS font et text-align.

Notes sur l'accessibilité

Certaines balises dépréciées sont déconseillées spécifiquement parce qu'elles créent des obstacles pour les utilisateurs :

• <blink> et <marquee> produisent du texte clignotant ou en mouvement. Le mouvement et le clignotement sont perturbants pour de nombreux lecteurs, peuvent rendre le texte illisible pour les personnes ayant des différences cognitives ou attentionnelles, et un clignotement rapide peut même déclencher des crises chez les utilisateurs souffrant d'épilepsie photosensible. Si vous avez réellement besoin de mouvement, utilisez l'animation CSS — et respectez le paramètre prefers-reduced-motion de l'utilisateur pour qu'il puisse être désactivé.
• <acronym> a été remplacé par <abbr> car la distinction entre un « acronyme » et une « abréviation » était source de confusion et d'incohérence. L'élément unique <abbr> couvre les deux cas, et les technologies d'assistance peuvent annoncer le texte title développé aux utilisateurs.

Liste des balises HTML dépréciées

Pratique

Prochaines étapes

Maintenant que vous savez ce qu'il faut éviter, découvrez les alternatives modernes centrées sur le sens dans Éléments HTML et Éléments sémantiques en HTML5, puis déplacez tout le style visuel vers CSS.