HTML тег <dir>
Тег <dir> использовался для списка заголовков каталогов. В HTML5 он устарел. Узнайте, что использовать вместо него.
Тег <dir> устарел. Это устаревший тег HTML, который был удалён из стандарта и не поддерживается в HTML5. Не используйте его на новых страницах. Используйте тег <ul> совместно со свойством CSS list-style — смотрите современную замену ниже.
Тег <dir> исторически применялся для определения списка заголовков каталогов — коротких имён файлов или папок. Элементы внутри списка задавались с помощью тега <li>, точно так же, как в маркированном списке, и по умолчанию отображались с маркерами.
Почему <dir> был признан устаревшим
<dir> был исключён из стандарта по нескольким причинам:
- Он полностью дублировал
<ul>. Браузеры отображали<dir>так же, как маркированный список<ul>, поэтому тег не добавлял никакого собственного поведения. - Он не нёс реальной семантической ценности. «Список заголовков каталогов» — не значимое различие в современном HTML. Обычный маркированный список уже передаёт смысл «набора элементов», поэтому отдельный элемент был лишним.
- Его реализация была непоследовательной. Атрибут
compact, предназначенный для более компактного отображения списка, по-разному обрабатывался в разных браузерах (и нередко полностью игнорировался), что делало элемент ненадёжным.
Поскольку <dir> дублировал <ul>, не предлагая ничего сверх того, спецификация HTML признала <dir> устаревшим, а <ul> теперь определён как правильный элемент для любого плоского списка элементов.
Современная замена: <ul>
Замените <dir> стандартным маркированным списком. Разметка будет идентичной — элементы <li> внутри родителя — но с полной поддержкой HTML5 и полным контролем над маркерами через свойство CSS list-style.
Маркер по умолчанию для <ul> — disc (заполненный круг), поэтому наиболее полезная возможность, которую даёт CSS, — это его изменение. Перечисленные ниже значения list-style-type являются наиболее распространёнными альтернативами:
none— полностью убирает маркеры (используется для навигационных меню и списков с пользовательскими стилями).square— заполненный квадрат.circle— полый (контурный) круг.
<!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>Чтобы узнать больше о создании и стилизации списков, смотрите обзор HTML-списков, теги <ul> и <ol>, а также свойство CSS list-style.
Синтаксис (устаревший)
Только для справки — тег <dir> использовался в паре: элементы <li> записывались между открывающим (<dir>) и закрывающим (</dir>) тегами.
<dir>
<li>HTML Tutorial</li>
<li>CSS Tutorial</li>
<li>PHP Tutorial</li>
</dir>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| compact | compact | Указывает, что список должен отображаться более компактно, чем обычно. Не поддерживается в HTML5. |
Тег <dir> также поддерживает глобальные атрибуты и атрибуты событий.