Tag HTML <dir>
A tag <dir> era usada para listar títulos de diretórios. É obsoleta no HTML5. Veja o que usar em seu lugar.
A tag <dir> é obsoleta. É uma tag HTML obsoleta que foi removida do padrão e não é suportada no HTML5. Não a utilize em páginas novas. Use a tag <ul> junto com a propriedade CSS list-style — veja a substituição moderna abaixo.
A tag <dir> foi historicamente usada para definir uma lista de títulos de diretórios — nomes curtos de arquivos ou pastas. Os itens dentro da lista eram definidos com a tag <li>, exatamente como uma lista não ordenada, e eram renderizados com marcadores por padrão.
Por que <dir> foi descontinuada
<dir> foi removida do padrão por vários motivos:
- Ela se sobrepunha completamente à
<ul>. Os navegadores renderizavam<dir>da mesma forma que uma lista com marcadores<ul>, portanto não acrescentava nenhum comportamento próprio. - Não tinha valor semântico real. "Uma lista de títulos de diretórios" não é uma distinção significativa no HTML moderno. Uma lista não ordenada simples já comunica "uma lista de itens", tornando um elemento separado redundante.
- Sua implementação era inconsistente. O atributo
compact, destinado a renderizar a lista de forma mais compacta, era tratado de maneiras diferentes pelos navegadores (e frequentemente ignorado por completo), tornando o elemento pouco confiável.
Por duplicar a <ul> sem oferecer nada a mais, a especificação HTML descontinuou <dir> e agora define <ul> como o elemento correto para qualquer lista plana de itens.
A substituição moderna: <ul>
Substitua <dir> por uma lista não ordenada padrão. Você obtém a mesma marcação — itens <li> dentro de um elemento pai — mas com suporte completo ao HTML5 e controle total sobre os marcadores por meio da propriedade CSS list-style.
O marcador padrão de uma <ul> é disc (um círculo preenchido), então o que o CSS oferece de mais útil é a capacidade de alterá-lo. Os valores de list-style-type abaixo são as alternativas mais comuns:
none— remove os marcadores completamente (usado em menus de navegação e listas com estilo personalizado).square— um quadrado preenchido.circle— um círculo vazio (apenas 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 saber mais sobre como criar e estilizar listas, consulte a visão geral de listas HTML, as tags <ul> e <ol>, e a propriedade CSS list-style.
Sintaxe (legado)
Apenas para referência — a tag <dir> era usada em pares, com os itens <li> escritos entre as tags de abertura (<dir>) e fechamento (</dir>).
<dir>
<li>HTML Tutorial</li>
<li>CSS Tutorial</li>
<li>PHP Tutorial</li>
</dir>Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| compact | compact | Especifica que a lista deve ser renderizada de forma mais compacta que o normal. Não é suportado no HTML5. |
A tag <dir> também suporta os Atributos Globais e os Atributos de Eventos.