Etiqueta dir en HTML: lista obsoleta y reemplazo con ul

La etiqueta <dir> está obsoleta y no debe usarse en HTML nuevo. Representaba una lista de directorio, por ejemplo, nombres de archivos de un proyecto. Hoy utiliza <ul> con elementos <li> cuando el orden no cambia el significado. Esta referencia sirve para reconocer y migrar código antiguo; <dir> nunca consultaba el sistema de archivos. El HTML Living Standard indica expresamente que debe sustituirse por <ul>.

Qué era dir y cómo se escribía

Este ejemplo histórico se muestra únicamente como código de referencia:

<dir>
  <li>index.html</li>
  <li>estilos.css</li>
</dir>

La intención era presentar dos nombres como elementos de una lista. No creaba carpetas, comprobaba que esos archivos existieran ni convertía sus nombres en enlaces. Tampoco garantizaba iconos o varias columnas. En su sección «DIR and MENU», HTML 3.2 recomendaba una distribución en columnas, pero advertía que los navegadores solían mostrarla como una lista <ul>.

En HTML 4 Transitional, <dir> era un contenedor de bloque con apertura y cierre obligatorios y uno o más hijos <li>. Podía aparecer en el cuerpo o en contenedores que admitieran bloques, como <div>, pero no dentro de <p> ni en <head>. Su modelo histórico excluía elementos de bloque incluso dentro de los ítems: no admitía párrafos ni listas anidadas. La DTD Transitional documenta estas restricciones. Los cierres </li> podían omitirse en los casos permitidos; aquí se escriben para facilitar la lectura.

Migración a una lista actual

Cambia la apertura <dir> por <ul> y el cierre </dir> por </ul>; conserva cada <li>. La lista no ordenada actual puede aparecer donde se admita contenido de flujo. Sus ítems directos son <li>; también admite elementos auxiliares de script. Coloca los nombres dentro de los ítems, sin texto ni párrafos directamente entre ellos. Cada <li> puede contener contenido de flujo: si necesitas anidar otra lista, ponla dentro del <li> correspondiente.

Guarda este documento como lista-archivos.html, con codificación UTF-8, y ábrelo en el navegador. No necesita JavaScript, archivos adicionales ni un servidor: los nombres son texto de muestra. Las columnas son una decisión visual opcional.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Archivos del proyecto</title>
    <style>
      body {
        max-width: 40rem;
        margin-inline: auto;
        padding: 1rem;
        font-family: sans-serif;
        line-height: 1.5;
      }

      .archivos {
        padding-inline-start: 1.5rem;
        columns: 12rem 2;
        column-gap: 2rem;
      }
    </style>
  </head>
  <body>
    <h1>Archivos del proyecto</h1>
    <ul class="archivos">
      <li>index.html</li>
      <li>estilos.css</li>
    </ul>
    <p>Saludo en árabe: <span lang="ar" dir="rtl">مرحبا بكم</span>.</p>
  </body>
</html>

Verás una lista con viñetas y un saludo en árabe. Con espacio suficiente, cada nombre ocupa una de las dos columnas; en una pantalla estrecha, ambos quedan en una sola. columns: 12rem 2 solicita un ancho óptimo de 12rem y un máximo de dos columnas, no un número fijo en cualquier pantalla. La especificación de CSS multicolumna explica este ajuste.

Prueba anchos de 375 y 1280 píxeles. Retira columns y column-gap: la lista vuelve a una columna y conserva su significado. Quita todo el <style>: los dos nombres, las viñetas y la dirección del saludo siguen disponibles. Deshabilitar JavaScript no cambia el ejemplo.

Sustituir <dir> por <ul> puede conservar una apariencia similar por compatibilidad histórica. Si eliminas el contenedor y dejas los <li> sueltos, pierdes una estructura de lista válida. Al migrar, revisa también reglas CSS o selectores JavaScript que buscaran dir; conserva los id y clases que sigan siendo necesarios.

Dir como elemento y como atributo

El elemento <dir> y el atributo global dir son cosas distintas. En el ejemplo, <span dir="rtl"> es HTML vigente: establece la dirección base de derecha a izquierda para ese fragmento. lang="ar" identifica su idioma; no sustituye la dirección. Tampoco dir="rtl" traduce el texto ni invierte mecánicamente todos sus caracteres.

Los valores actuales de dir son ltr, rtl y auto. Este último determina la dirección a partir del contenido. En un <span> normal, al omitir el atributo se hereda la dirección del padre. Mantén la dirección en HTML para que no dependa de una hoja de estilos. Si necesitas forzar el orden de presentación, consulta la guía de <bdo>; ese es otro caso.

Atributos antiguos y decisiones actuales

• compact era un atributo booleano histórico que sugería reducir el espacio entre ítems. Su presencia solicitaba esa presentación y su ausencia no la solicitaba; no garantizaba un resultado uniforme. Al migrar, elimínalo y ajusta el espaciado con CSS.
• id, class, lang y dir pertenecían a los atributos comunes de la época, no eran funciones específicas para leer directorios.
• line-height, márgenes, tamaño de letra y columns son propiedades CSS. No existe un atributo moderno que vuelva conforme al elemento <dir>.
• En JavaScript, la propiedad DOM elemento.dir refleja el atributo global dir; no es el elemento <dir> ni una propiedad CSS.

La referencia de MDN para <dir> documenta compact y su efecto dependiente del navegador.

Lista de nombres, pasos o navegación

Usa <ul> para un inventario sin orden significativo y <ol> para pasos que deban seguirse en una secuencia. Cada entrada se escribe con <li>. El número de columnas o el tipo de viñeta no determina cuál corresponde.

Si los nombres deben abrir documentos, añade enlaces <a> con destinos reales y textos claros. Una lista de nombres por sí sola no ofrece navegación. Agrupa con <nav> cuando esos enlaces formen una sección significativa de navegación; no todas las listas de archivos necesitan esa región.

Conserva la estructura de lista para que las tecnologías de asistencia puedan identificar el grupo y sus ítems. En columnas, la lectura continúa hacia abajo y luego pasa a la siguiente columna: mantén un orden coherente en el HTML. Los anuncios concretos dependen del navegador y del lector de pantalla.

Preguntas frecuentes

¿Dir sirve para leer carpetas?

No. Era marcado para una lista cuyos datos ya estaban escritos en el documento. Obtener un inventario real requiere otro mecanismo con acceso y permisos adecuados, por ejemplo un programa que genere el HTML en el servidor.

¿El atributo dir también está obsoleto?

No. La obsolescencia afecta al elemento <dir>. dir="rtl", dir="ltr" y dir="auto" siguen siendo atributos válidos en los elementos que los admiten.

Compatibilidad y fuentes

Referencia revisada el 4 de octubre de 2026. Los datos de compatibilidad de MDN registran reconocimiento de <dir> en Chrome, Firefox, Safari y Edge y lo marcan como obsoleto. Es soporte para documentos heredados, no autorización para escribirlo hoy.

El Living Standard exige tratar <dir> como <ul> a efectos semánticos y de representación. Esto explica su persistencia; no garantiza un anuncio idéntico en todas las combinaciones de tecnologías de asistencia. La sintaxis antigua se consulta en HTML 4 y las decisiones actuales en las fuentes de HTML y CSS enlazadas en esta guía.