Существует несколько различных типов элементов списка в HTML5, и в мире, где преобладают упорядоченный список и неупорядоченный список, было бы верно сказать, что список определений никогда не выиграет конкурс популярности. Список определений потерян в море двусмысленности — но наступает момент, когда нам нужно отступить назад и посмотреть на вещи немного по-другому. Здесь я хочу вновь познакомить вас с этой забытой, если не неправильно, особенностью семантической разметки.
Структура и семантика
Списки определений не слишком отличаются от типичного упорядоченного или неупорядоченного списка, но в отличие от этих элементов они состоят из трех основных элементов:
- список описания или <dl>
- срок или <dt>
- описание или <dd>
С выпуском HTML5 <dl> был переименован в «список описания», чтобы убрать все возможные путаницы и позволить разработчикам использовать его более подходящим образом.
Чтобы создать список определений, вы просто напишите:
<Дл> <dt> Срок 1 </ dt> <dd> Срок 1 (описание) </ dd> <dt> Срок 2 </ dt> <dd> Срок 2 (описание) </ dd> </ Дл>
Вы также можете включить несколько описаний (<dd>) для одного термина (<dt>), например:
<Дл> <dt> Срок 1 </ dt> <dd> Срок 1 (описание 1) </ dd> <dd> Срок 1 (описание 2) </ dd> <dd> Срок 1 (описание 3) </ dd> <dt> Срок 2 </ dt> <dd> Срок 2 (описание 1) </ dd> <dd> Срок 2 (описание 2) </ dd> <dd> Срок 2 (описание 3) </ dd> </ Дл>
Я все еще чувствую, что использование слова «термин» для <dt> является неправильным. Я предпочитаю думать об этом как о «ценности», потому что в реальной жизни использование этой модели может означать:
<Дл> <dt> Новости 1 (Заголовок) </ dt> <dd> Новости 1 (изображение) </ dd> <dd> Новости 1 (описание) </ dd> <dd> Новости 1 (ссылка) </ dd> <dt> News 2 (Title) </ dt> <dd> Новости 2 (изображение) </ dd> <dd> Новости 2 (описание) </ dd> <dd> Новости 2 (ссылка) </ dd> </ Дл>
А для ясности представления кода вы можете даже расширить его и записать в следующем формате:
<Дл> <dt> Новости 1 (название) </ dt> <dd> News Story 1 (изображение) </ dd> <dd> News Story 1 (описание) </ dd> <dd> News Story 1 (ссылка) </ dd> <dt> News Story 2 (название) </ dt> <dd> News Story 2 (изображение) </ dd> <dd> News Story 2 (описание) </ dd> <dd> News Story 2 (ссылка) </ dd> <dt> News Story 3 (название) </ dt> <dd> News Story 3 (изображение) </ dd> <dd> News Story 3 (описание) </ dd> <dd> News Story 3 (ссылка) </ dd> </ Дл>
Диапазон или тип контента, который вы можете представить в этих отношениях, бесконечен. От блогов до продуктов, от событий до статистики, вам просто нужно понять, что если тег <dl> выступает в качестве вложенного элемента, то последующая группировка термина и описания или термина и нескольких описаний подразумевает, что список определений почти идеален пример семантической разметки в действии. Подумайте об этом так: перечисление элементов, состоящих из парных значений в одном элементе, должно быть желанной новостью для дизайнера, разработчика и SEO.
Это может быть не традиционный способ ведения дел (рожденный в эпоху HTML4), но именно здесь список определений торжествует над другими типами списков. Помните, что и неупорядоченные списки, и упорядоченные списки могут содержать только элементы списка, поэтому заголовок и описание не будут описываться семантически, как и те же данные, которые находятся в списке определений. Я не согласился бы, если бы вы указали, что то, что может сделать список определений, также может быть достигнуто во вложенной таблице или в сложном массиве тегов <div>. Но если вы сравните результаты и проигнорируете код, то напрашивается вопрос, какой будет ваш логический выбор?
Стилистика
Наиболее простой вывод списка определений может, как и многие другие типы списков, выглядеть немного скучно. Например, давайте рассмотрим следующий код:
<Дл> <dt> Новости 1 (название) </ dt> <dd> Новости 1 (дата) </ dd> <dd> News Story 1 (рассказ) </ dd> <dt> News Story 2 (название) </ dt> <dd> News Story 2 (дата) </ dd> <dd> News Story 2 (история) </ dd> </ Дл>
Однако вы можете включить элементы блочного уровня в описание (<dd>) следующим образом:
<Дл> <dt> Название продукта </ dt> <dd> <strong> Код продукта </ strong> </ dd> <dd> <p> Описание продукта </ p> </ dd> <Дд> <UL> <li> Функция продукта 1 </ li> <li> Функция продукта 2 </ li> <li> Функция продукта 3 </ li> </ UL> </ Дд> </ Дл>
Опять же, точная природа примера может быть не идеальной для всех, но заметили ли вы включение дополнительных тегов HTML в элемент <dd>? Например, если вы хотите использовать решение для электронной коммерции, вы можете улучшить приведенный выше код и создать нечто похожее на это:
<Дл> <dt> Продукт 1 (название) </ dt> <dd> <p> Продукт 1 (описание) </ p> </ dd> <dd> <p> Продукт 1 (цена) </ p> </ dd> <dd> <p> Продукт 1 (изображение) </ p> </ dd> <Дд> <UL> <li> <span> Продукт 1 / Функция 1 (Название) </ span> </ li> <li> <span> Продукт 1 / функция 2 (заголовок) </ span> </ li> <li> <span> Продукт 1 / функция 3 (название) </ span> </ li> <li> <span> Продукт 1 / функция 4 (заголовок) </ span> </ li> <li> <span> Продукт 1 / функция 5 (заголовок) </ span> </ li> <li> <span> Продукт 1 / функция 6 (название) </ span> </ li> </ UL> </ Дд> <dt> Product 2 (Title) </ dt> <dd> <p> Продукт 2 (описание) </ p> </ dd> <dd> <p> Товар 2 (цена) </ p> </ dd> <dd> <p> Продукт 2 (изображение) </ p> </ dd> <Дд> <UL> <li> <span> Продукт 2 / Функция 1 (Название) </ span> </ li> <li> <span> Продукт 2 / функция 2 (заголовок) </ span> </ li> <li> <span> Продукт 2 / функция 3 (название) </ span> </ li> <li> <span> Продукт 2 / функция 4 (заголовок) </ span> </ li> <li> <span> Продукт 2 / функция 5 (название) </ span> </ li> <li> <span> Продукт 2 / функция 6 (название) </ span> </ li> </ UL> </ Дд> </ Дл>
С другой стороны, вы можете использовать список определений, чтобы прояснить ваши формы следующим образом:
<Форма> <Дл> <dt> Имя: </ dt> <dd> <input type = "text" id = "firstname" /> </ dd> <dt> Фамилия: </ dt> <dd> <input type = "text" id = "фамилия" /> </ dd> <dt> Адрес электронной почты: </ dt> <dd> <input type = "text" id = "email" /> </ dd> <Дт> Комментарии: </ дт> <dd> <textarea rows = "5" cols = "30" id = "comments"> </ textarea> </ dd> </ Дл> <input type = "submit" value = "Submit" /> </ Форма>
Вы должны знать, что <dt> не может содержать элементы уровня блока. Так что да, существуют некоторые ограничения доступности, которые не позволят вам использовать список определений в качестве полной замены таблиц и различных других связанных с данными функций, для которых могут потребоваться метки и заголовки. Рассматривая визуальную эстетику, спросите себя: подразумевает ли невозможность добавления элементов уровня блока к почти семантически совершенному объекту ограничение дизайна, или это базовое правило обеспечивает функциональную ясность, которую можно преодолеть с помощью CSS?
Чтобы ответить на этот вопрос, мы начнем с такой базовой структуры:
<Дл> <dt> News Item 1 </ dt> <dd> Лорем Ипсум Долор Сит Амет, Заклинатель Адептисинг Элит. Maecenas vestibulum orci eu purus viverra imperdiet. Cras Scelerisque Commodo dictum. Mauris sed libero non justo adipiscing tempor Tincidunt Eget Eros. ПРЕЕСЕНТ Ё Курсус Эним. Donec dictum turpis sit amet dui sagittis dapibus.подробнее ... </ dd> <dt> News Item 2 </ dt> <dd> Лорем Ипсум Долор Сит Амет, Заклинатель Адептисинг Элит. Maecenas vestibulum orci eu purus viverra imperdiet. Cras Scelerisque Commodo dictum. Mauris sed libero non justo adipiscing tempor Tincidunt Eget Eros. ПРЕЕСЕНТ Ё Курсус Эним. Donec dictum turpis sit amet dui sagittis dapibus.подробнее ... </ dd> <dt> News Item 3 </ dt> <dd> Лорем Ипсум Долор Сит Амет, Заклинатель Адептисинг Элит. Maecenas vestibulum orci eu purus viverra imperdiet. Cras Scelerisque Commodo dictum. Mauris sed libero non justo adipiscing tempor Tincidunt Eget Eros. ПРЕЕСЕНТ Ё Курсус Эним. Donec dictum turpis sit amet dui sagittis dapibus.подробнее ... </ dd> </ Дл>
Что может быть улучшено следующим образом:
<style type = "text / css"> dl.wrapper1 {margin: 0; отступ: .5em; ширина: 460px; цвет фона: #fff; размер шрифта: 1em; семейство шрифтов: Georgia, "Times New Roman", Times, serif;} dt {margin: 0; отступ: .5em; font-weight: bold; background-color: # e0e0e0;} dd {margin: 0; padding: 0; padding-top: .5em; padding-bottom: .5em;} dd .div1 {padding-left: .5em; border-left: 1px solid # 333; размер шрифта: .9em; очистить: оба;} dd .div2 {цвет: # 900; размер шрифта: .76em; верхний край: .5em; нижний край: .5em; очистить: оба;} </ Стиль> <dl class = "wrapper1"> <dt> News Item 1 </ dt> <dd> <div class = "div1"> Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Maecenas vestibulum orci eu purus viverra imperdiet. Cras Scelerisque Commodo dictum. Mauris sed libero non justo adipiscing tempor Tincidunt Eget Eros. ПРЕЕСЕНТ Ё Курсус Эним. Donec dictum turpis sit amet dui sagittis dapibus. </ Div> <div class = "div2"> читать больше ... </ div> </ dd> <dt> News Item 2 </ dt> <dd> <div class = "div1"> Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Maecenas vestibulum orci eu purus viverra imperdiet. Cras Scelerisque Commodo dictum. Mauris sed libero non justo adipiscing tempor Tincidunt Eget Eros. ПРЕЕСЕНТ Ё Курсус Эним. Donec dictum turpis sit amet dui sagittis dapibus. </ Div> <div class = "div2"> читать больше ... </ div> </ dd> <dt> News Item 3 </ dt> <dd> <div class = "div1"> Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Maecenas vestibulum orci eu purus viverra imperdiet. Cras Scelerisque Commodo dictum. Mauris sed libero non justo adipiscing tempor Tincidunt Eget Eros. ПРЕЕСЕНТ Ё Курсус Эним. Donec dictum turpis sit amet dui sagittis dapibus. </ Div> <div class = "div2"> читать больше ... </ div> </ dd> </ Дл>
Как насчет простой гистограммы, где это (и я специально использовал встроенный CSS, чтобы сделать его удобным и легко настраиваемым с помощью динамических значений):
<Стиль> dt {margin: 0; отступ: .5em; font-weight: bold; background-color: # e0e0e0;} .chartwrapper {ширина: 480px; цвет: # 000; верхний край: 10px; нижний край: 10px; размер шрифта: .6em; очистить: оба; семейство шрифтов: Arial, Helvetica, sans-serif;} .charttitle {font-size: 1.2em; font-weight: bold; цвет: #ccc; clear: both;} dl.chart {поле: .6em; рентабельность налево: 0em; рентабельность направо: 0em; обивка: .6em; обивка-направо: 0em; обивка налево: 0em; ширина: 480px;} dl.chart dd {margin: .6em; margin-left: 0em; margin-right: 0em; padding: .3em; padding-right: 0em; padding-left: 0em; text-align: right;} dl.chart dt {font-weight: полужирный; поля: .6em; поля слева: 0em; поля справа: 0em; отступы: .3em; отступы справа: 0em; отступы слева: 1em;} </ Стиль> <div class = "chartwrapper"> <div class = "charttitle"> Простая диаграмма, отображающая представления браузера </ div> <dl class = "chart"> <Дт> Firefox </ дт> <dd style = "background: # ffcc00; ширина: 47%;"> <div style = "padding-right: 5px;"> воскресенье <br /> 47% </ div> </ dd> <dd style = "background: # ffcc00; ширина: 23%;"> <div style = "padding-right: 5px;"> понедельник <br /> 23% </ div> </ dd> <dd style = "background: # ffcc00; ширина: 45%;"> <div style = "padding-right: 5px;"> вторник <br /> 45% </ div> </ dd> <dd style = "background: # ffcc00; ширина: 23%;"> <div style = "padding-right: 5px;"> среда <br /> 23% </ div> </ dd> <dd style = "background: # ffcc00; ширина: 25%;"> <div style = "padding-right: 5px;"> четверг <br /> 25% </ div> </ dd> <dd style = "background: # ffcc00; ширина: 60%;"> <div style = "padding-right: 5px;"> пятница <br /> 60% </ div> </ dd> <dd style = "background: # ffcc00; ширина: 10%;"> <div style = "padding-right: 5px;"> суббота <br /> 10% </ div> </ dd> <Дт> IE </ дт> <dd style = "background: # ffcc00; ширина: 13%;"> <div style = "padding-right: 5px;"> воскресенье <br /> 13% </ div> </ dd> <dd style = "background: # ffcc00; ширина: 47%;"> <div style = "padding-right: 5px;"> понедельник <br /> 47% </ div> </ dd> <dd style = "background: # ffcc00; ширина: 20%;"> <div style = "padding-right: 5px;"> вторник <br /> 20% </ div> </ dd> <dd style = "background: # ffcc00; ширина: 27%;"> <div style = "padding-right: 5px;"> среда <br /> 27% </ div> </ dd> <dd style = "background: # ffcc00; ширина: 25%;"> <div style = "padding-right: 5px;"> четверг <br /> 25% </ div> </ dd> <dd style = "background: # ffcc00; ширина: 20%;"> <div style = "padding-right: 5px;"> пятница <br /> 20% </ div> </ dd> <dd style = "background: # ffcc00; ширина: 30%;"> <div style = "padding-right: 5px;"> суббота <br /> 30% </ div> </ dd> <Дт> Opera </ дт> <dd style = "background: # ffcc00; ширина: 40%;"> <div style = "padding-right: 5px;"> воскресенье <br /> 40% </ div> </ dd> <dd style = "background: # ffcc00; ширина: 30%;"> <div style = "padding-right: 5px;"> понедельник <br /> 30% </ div> </ dd> <dd style = "background: # ffcc00; ширина: 35%;"> <div style = "padding-right: 5px;"> вторник <br /> 35% </ div> </ dd> <dd style = "background: # ffcc00; ширина: 50%;"> <div style = "padding-right: 5px;"> среда <br /> 50% </ div> </ dd> <dd style = "background: # ffcc00; ширина: 50%;"> <div style = "padding-right: 5px;"> четверг <br /> 50% </ div> </ dd> <dd style = "background: # ffcc00; ширина: 20%;"> <div style = "padding-right: 5px;"> пятница <br /> 20% </ div> </ dd> <dd style = "background: # ffcc00; ширина: 60%;"> <div style = "padding-right: 5px;"> суббота <br /> 60% </ div> </ dd> </ Дл> </ DIV>
Примеры, которые я использовал, не являются потрясающими, но я намерен предоставить вам отправную точку для иллюстрации того, что обсуждается. Повеселитесь, поиграйте с CSS, и я уверен, что скоро вы поймете, что я пытался сказать.
Это все о контексте
Целью данной статьи не было пропагандировать полное удаление или замену неупорядоченного или упорядоченного списка. Но учтите, что часто неправильно понимаемый и неиспользуемый список определений играет роль, которая делает его очень полезным инструментом при создании вашего сайта.
Я уверен, что многие из вас все еще будут утверждать, что использование списка определений имеет значение только при создании терминов и определений или диалогов для речи. Технически говоря, эти причины все еще действительны, но они являются наложенными самостоятельно ограничениями, и если мы рассмотрим, что список определений является (по сути) инструментом моделирования отношений, я уверен, что это может сильно поддержать использование этого элемента. во многих других ситуациях.