Attributs HTML dépréciés
Liste des attributs HTML dépréciés, les balises concernées et la propriété CSS moderne à utiliser, avec des exemples de migration avant/après.
Un attribut HTML déprécié est un attribut que la spécification a marqué comme obsolète et dont elle déconseille l'usage. La plupart des attributs présents sur cette page étaient de nature présentationnelle — ils contrôlaient l'apparence du contenu (couleur, taille, alignement, espacement). Lorsque HTML5 a remplacé HTML 4.01, la spécification a délibérément transféré cette responsabilité de mise en forme hors de HTML vers CSS, afin que le balisage décrive la structure et les feuilles de style décrivent l'apparence.
Pourquoi ces attributs ont été supprimés
À l'époque de HTML4, il était courant d'écrire <td bgcolor="#ff0000"> ou <font size="5"> directement dans le balisage. HTML5 les a supprimés car mélanger la présentation dans HTML engendre de réels problèmes :
- Séparation des préoccupations. Le style réside dans CSS, une seule règle peut ainsi reformater toutes les cellules au lieu de répéter un attribut sur chaque balise.
- Maintenabilité. Modifier une couleur à l'échelle du site revient à éditer une seule feuille de style, et non à parcourir des centaines d'attributs en ligne.
- Validation. Le W3C Markup Validator et les linters HTML signalent les attributs dépréciés et obsolètes comme des erreurs ou des avertissements, ce qui fait échouer les vérifications modernes de build/CI.
- Pérennité. Les navigateurs continuent de restituer la plupart de ces attributs grâce aux règles d'analyse héritées, si bien qu'une page les utilisant s'affiche généralement correctement aujourd'hui. Le risque n'est pas une rupture immédiate — c'est que l'attribut ne fait plus partie de la spécification et que son support peut être abandonné à l'avenir.
En résumé : les attributs dépréciés fonctionnent encore en général, mais vous devriez les migrer vers CSS. La colonne « Équivalent » ci-dessous indique quelle propriété utiliser.
Déprécié ne signifie pas obsolète (supprimé). Un attribut déprécié est déconseillé mais généralement encore analysé par les navigateurs. Une fonctionnalité obsolète a été entièrement retirée de la spécification — par exemple, basefont ici fait référence à l'élément <basefont> totalement obsolète, que les navigateurs modernes peuvent ignorer. Considérez tout ce qui figure sur cette page comme quelque chose à remplacer, et les fonctionnalités obsolètes comme quelque chose qui peut déjà ne rien faire.
Avant et après : remplacer un attribut déprécié par CSS
Le schéma de migration est toujours le même — supprimer l'attribut présentationnel et reporter l'intention dans une règle CSS. Par exemple, une cellule de tableau rouge :
<!-- Deprecated: presentation baked into the markup -->
<td bgcolor="#ff0000">Sale</td>
<!-- Modern: structure in HTML, color in CSS -->
<td class="sale">Sale</td>.sale {
background-color: #ff0000;
}Quelques conversions courantes côte à côte :
<!-- align on a paragraph -->
<p align="center">Hello</p> → <p class="centered">Hello</p>
<!-- width/height on an image's wrapper, spacing around an image -->
<img src="logo.png" hspace="10" vspace="10"> → <img src="logo.png" class="spaced">
<!-- text color on the page body -->
<body text="#333333"> → <body> (styled in CSS).centered { text-align: center; }
.spaced { margin: 10px; }
body { color: #333333; }Liste des attributs HTML dépréciés
Les attributs ci-dessous sont dépréciés dans les balises indiquées et doivent être remplacés par la propriété indiquée dans la colonne Équivalent.
| Attributs | Description | Déprécié dans | Équivalent |
|---|---|---|---|
| align | Spécifie l'alignement de l'élément | <caption>, <img>, <table>, <hr>, <div>, <h1>-<h6>, <p> | Propriétés CSS text-align, float et vertical-align |
| alink | Spécifie la couleur d'un lien actif dans un document | <body> | Pseudo-classe CSS active |
| background | Spécifie l'image d'arrière-plan | <body> | Propriété CSS background-image |
| bgcolor | Spécifie la couleur d'arrière-plan | <body>, <table>, <tr>, <td>, <th> | Propriété CSS background-color |
| border | Spécifie la largeur de la bordure | <img>, <object> | Propriété CSS border-width |
| clear | Efface les alignements droite ou gauche | <br> | Propriété CSS clear |
| compact | Indique que la liste doit s'afficher plus petite que la normale | <ol>, <ul> | CSS font-size, margin et line-height pour une liste plus compacte |
| height | Spécifie la hauteur de l'élément | <table> | Propriété CSS height |
| hspace | Spécifie l'espace ou le rembourrage à gauche ou à droite d'un élément | <img>, <object> | Propriété CSS padding |
| language | Spécifie le langage de script | <script> | L'attribut type |
| link | Spécifie la couleur par défaut des liens | <body> | Pseudo-classe CSS link |
| noshade | Indique qu'une ligne horizontale doit s'afficher en une couleur unie (sans ombrage) | <hr> | Propriété CSS border-style |
| nowrap | Indique que le texte ne doit pas revenir à la ligne dans la cellule de tableau | <td>, <th> | Propriété CSS white-space |
| size | Spécifie la largeur initiale du champ de saisie et le nombre de lignes visibles pour l'élément select | <basefont>, <font>, <hr> | Propriété CSS width |
| text | Spécifie la couleur du texte | <body> | Propriété CSS color |
| type | Spécifie le type de liste | <li> | Propriété CSS list-style-type |
| vlink | Spécifie la couleur des liens visités | <body> | Pseudo-classe CSS visited |
| valign | Spécifie l'alignement vertical du contenu d'une cellule | <td>, <th>, <tr> | Propriété CSS vertical-align |
| vspace | Spécifie l'espace ou le rembourrage au-dessus ou en dessous d'un élément | <img>,<object> | Propriété CSS padding |
| width | Spécifie la largeur de l'élément | <hr>,<pre>,<td>,<th> | Propriété CSS width |
Tout ce qui paraît « ancien » n'est pas forcément déprécié. L'attribut start sur <ol> (qui définit le premier numéro) et l'attribut value sur <li> (qui définit le numéro d'un élément spécifique) sont toujours valides en HTML5 — ils affectent la sémantique de la liste, pas seulement son apparence, il n'est donc pas nécessaire de les remplacer par CSS.
Et maintenant
- Consultez la vue d'ensemble complète des attributs HTML pour comprendre comment fonctionnent les attributs et lesquels sont actuels.
- Vous débutez avec les feuilles de style ? Commencez par la syntaxe CSS et l'introduction à CSS.