Тег <dir> создавал список, например имён файлов каталога: пункты внутри него пишутся тегом <li>, как в <ul> и <ol>. Тег парный, закрывающий тег </dir> нужен. Он был в HTML 3.2, а в HTML 4 его признали устаревшим. Сегодня стандарт запрещает тег, но требует от браузеров обращаться с ним как с <ul>.
<dir>
<li>cat</li>
<li>dev</li>
</dir>В этой статье
Что делал тег dir и чем он отличается от ul
Задумывался dir для многоколонных списков каталога, но на деле отдельного вида у него нет: HTML 4.01 пишет, что браузер показывает его как ul, а сегодняшний стандарт требует того же. Поэтому на странице это обычный маркированный список, и отличить его от ul по виду нельзя.
Пример: dir и ul рядом
Кнопки выбирают число пунктов. В рамке два списка с одинаковыми пунктами: сначала dir, потом ul. Под рамкой записаны показ, маркер, отступы и высота обоих.
Показ block, маркер disc, отступ слева 40px, отступы сверху и снизу по 16px. Высота зависит только от числа пунктов и у обоих тегов одинаковая.
Атрибут compact у тега dir
В HTML 4.01 у dir один свой атрибут, compact: он просил уменьшить интервал между пунктами. В интерфейсе тега он остался в виде свойства compact.
| Атрибут | Что просил | Значение |
|---|---|---|
compact | Плотный список | Без значения, достаточно написать слово |
Пример: меняет ли compact вид списка
Кнопки выбирают способ записать атрибут. В рамке образец без атрибута и проверяемый список. Под рамкой записаны свойство compact, наличие атрибута и размеры обоих списков.
Размеры и отступы те же, что у образца. Свойство compact в скрипте есть и показывает, записан ли атрибут, но вид списка не меняет.
Вложенные dir, текст внутри и dir в абзаце
Вложенные dir получают те же маркеры, что и вложенные ul: disc, circle и square. Внутри ul тег dir берёт маркер второго уровня. Текст прямо внутри dir виден на странице, а dir внутри p закрывает абзац, как любой список.
Пример: вложенные списки и содержимое dir
Кнопки выбирают разметку, запись показана над рамкой. Под рамкой записаны маркеры и верхние отступы по уровням, а для текста и абзаца видимый текст и родитель списка.
Маркеры по уровням у dir и у ul совпадают, верхний отступ есть только у внешнего списка. Текст перед пунктом остаётся видимым, а абзац заканчивается перед списком.
Чем заменить тег dir: ul и стили CSS
Заменить dir на ul просто: меняют открывающий и закрывающий теги, вид списка при этом не меняется. Если нужен плотнее список или другой маркер, это задают стилями CSS: line-height сжимает строки, list-style выбирает маркер, padding-left меняет отступ.
<ul>
<li>cat</li>
<li>dev</li>
</ul>Пример: ul вместо dir
Кнопки выбирают тег и стиль, запись показана над рамкой. Под рамкой записаны класс тега и размеры списка. Невидимый образец dir служит для сравнения.
Обычный ul выглядит как dir, а стиль делает список плотнее и меняет маркер. Проверка в Nu Html Checker для <dir> сообщает: The “dir” element is obsolete. Use the “ul” element instead.
