La balise HTML <dir>
La balise <dir> servait à lister des titres de répertoires. Elle est obsolète en HTML5. Découvrez ce qu'utiliser à la place.
La balise <dir> est obsolète. Il s'agit d'une balise HTML dépréciée qui a été supprimée du standard et n'est pas prise en charge en HTML5. Ne l'utilisez pas dans de nouvelles pages. Utilisez la balise <ul> combinée avec la propriété CSS list-style à la place — voir le remplacement moderne ci-dessous.
La balise <dir> était historiquement utilisée pour définir une liste de titres de répertoires — des noms courts de fichiers ou de dossiers. Les éléments à l'intérieur de la liste étaient définis avec la balise <li>, exactement comme une liste non ordonnée, et étaient affichés avec des puces par défaut.
Pourquoi <dir> a été dépréciée
<dir> a été retirée du standard pour plusieurs raisons :
- Elle faisait doublon avec
<ul>. Les navigateurs affichaient<dir>de la même façon qu'une liste à puces<ul>, elle n'apportait donc aucun comportement propre. - Elle n'avait aucune valeur sémantique réelle. « Une liste de titres de répertoires » n'est pas une distinction significative en HTML moderne. Une liste non ordonnée classique communique déjà « une liste d'éléments », un élément séparé était donc redondant.
- Son implémentation était incohérente. L'attribut
compact, censé afficher la liste de manière plus compacte, était géré différemment selon les navigateurs (et souvent complètement ignoré), rendant l'élément peu fiable.
Parce qu'elle dupliquait <ul> sans rien apporter de plus, la spécification HTML a déprécié <dir> et définit désormais <ul> comme l'élément correct pour toute liste plate d'éléments.
Le remplacement moderne : <ul>
Remplacez <dir> par une liste non ordonnée standard. Vous obtenez un balisage identique — des éléments <li> à l'intérieur d'un parent — mais avec une prise en charge complète de HTML5 et un contrôle total sur les puces via la propriété CSS list-style.
La puce par défaut d'un <ul> est disc (un disque plein), donc l'atout principal de CSS est de pouvoir la modifier. Les valeurs de list-style-type ci-dessous sont les alternatives les plus courantes :
none— supprime entièrement les puces (utilisé pour les menus de navigation et les listes personnalisées).square— un carré plein.circle— un cercle vide (en contour seulement).
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.none { list-style-type: none; }
.square { list-style-type: square; }
.circle { list-style-type: circle; }
</style>
</head>
<body>
<ul class="none">
<li>HTML Tutorial</li>
<li>CSS Tutorial</li>
</ul>
<ul class="square">
<li>HTML Tutorial</li>
<li>CSS Tutorial</li>
</ul>
<ul class="circle">
<li>HTML Tutorial</li>
<li>CSS Tutorial</li>
</ul>
</body>
</html>Pour en savoir plus sur la création et la mise en forme des listes, consultez l'aperçu des listes HTML, les balises <ul> et <ol>, ainsi que la propriété CSS list-style.
Syntaxe (héritée)
À titre de référence uniquement — la balise <dir> s'utilisait en paire, avec ses éléments <li> placés entre les balises ouvrante (<dir>) et fermante (</dir>).
<dir>
<li>HTML Tutorial</li>
<li>CSS Tutorial</li>
<li>PHP Tutorial</li>
</dir>Attributs
| Attribut | Valeur | Description |
|---|---|---|
| compact | compact | Indique que la liste doit s'afficher plus compacte que la normale. Non pris en charge en HTML5. |
La balise <dir> prend également en charge les Attributs globaux et les Attributs d'événement.