Etiqueta HTML <dir>
La etiqueta <dir> se usaba para listar títulos de directorios. Está obsoleta en HTML5. Descubre qué usar en su lugar.
La etiqueta <dir> está obsoleta. Es una etiqueta HTML obsoleta que fue eliminada del estándar y no está soportada en HTML5. No la uses en páginas nuevas. Usa la etiqueta <ul> junto con la propiedad CSS list-style en su lugar — consulta el reemplazo moderno a continuación.
La etiqueta <dir> se usaba históricamente para definir una lista de títulos de directorios — nombres cortos de archivos o carpetas. Los elementos dentro de la lista se definían con la etiqueta <li>, exactamente como una lista desordenada, y se renderizaban con viñetas de forma predeterminada.
Por qué se deprecó <dir>
<dir> fue eliminada del estándar por varias razones:
- Se solapaba completamente con
<ul>. Los navegadores renderizaban<dir>de la misma manera que una lista con viñetas<ul>, por lo que no añadía ningún comportamiento propio. - No aportaba un valor semántico real. "Una lista de títulos de directorios" no es una distinción significativa en el HTML moderno. Una lista desordenada simple ya comunica "una lista de elementos", por lo que un elemento separado era redundante.
- Su implementación era inconsistente. El atributo
compact, destinado a renderizar la lista de forma más compacta, era tratado de manera diferente en cada navegador (y a menudo ignorado por completo), lo que hacía al elemento poco fiable.
Dado que duplicaba a <ul> sin ofrecer nada adicional, la especificación HTML deprecó <dir> y ahora define <ul> como el elemento correcto para cualquier lista plana de elementos.
El reemplazo moderno: <ul>
Reemplaza <dir> con una lista desordenada estándar. Obtienes un marcado idéntico — elementos <li> dentro de un padre — pero con soporte completo de HTML5 y control total sobre las viñetas mediante la propiedad CSS list-style.
La viñeta predeterminada para un <ul> es disc (un círculo relleno), por lo que lo más útil que ofrece CSS es la posibilidad de cambiarla. Los valores de list-style-type a continuación son las alternativas más comunes:
none— elimina las viñetas por completo (usado en menús de navegación y listas con estilos personalizados).square— un cuadrado relleno.circle— un círculo hueco (con contorno).
<!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>Para obtener más información sobre cómo crear y dar estilo a listas, consulta el resumen de listas HTML, las etiquetas <ul> y <ol>, y la propiedad CSS list-style.
Sintaxis (heredada)
Solo como referencia — la etiqueta <dir> venía en pares, con sus elementos <li> escritos entre las etiquetas de apertura (<dir>) y cierre (</dir>).
<dir>
<li>HTML Tutorial</li>
<li>CSS Tutorial</li>
<li>PHP Tutorial</li>
</dir>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| compact | compact | Especifica que la lista debe renderizarse más pequeña de lo normal. No soportado en HTML5. |
La etiqueta <dir> también admite los Atributos Globales y los Atributos de Evento.