WDH: HTML - Списки

Глава 1.4. Списки

1.4.1. Общее описание

HTML поддерживает три способа хранения и отображения списков. Любой список состоит из одного или нескольких элементов списков. Списки подразделяются на:

маркированные (неупорядоченные) списки;
нумерованные (упорядоченные) списки;
списки определений.

Только что приведенный список является маркированным и выглядит на языке HTML так:

<UL>
  <LI>маркированные (неупорядоченные) списки;</LI>
  <LI>нумерованные (упорядоченные) списки;</LI>
  <LI>списки определений.</LI>
</UL>

Нумерованный список выглядит аналогично, но его элементы нумеруются:

первый элемент списка;
второй элемент списка;
третий элемент списка.

На языке HTML это записывается так:

<OL>
  <LI>первый элемент списка;</LI>
  <LI>второй элемент списка;</LI>
  <LI>третий элемент списка.</LI>
</OL>

Наконец, списки определений состоят из пар термин/определение, хотя их применение гораздо шире. Пример использования списка определений для составления театрального репертуара:

1 июля: А. К. Толстой. Царь Федор Иоаннович
4 июля: У. Теккерей. Ярмарка тщеславия
9 июля: А. Островский. Волки и овцы

На языке HTML это записывается так:

<DL>
  <DT><STRONG>1 июля</STRONG></DT>
  <DD>А. К. Толстой. <EM>Царь Федор Иоаннович</EM></DD>
  <DT><STRONG>4 июля</STRONG></DT>
  <DD>У. Теккерей. <EM>Ярмарка тщеславия</EM></DD>
  <DT><STRONG>9 июля</STRONG></DT>
  <DD>А. Островский. <EM>Волки и овцы</EM></DD>
</DL>

Списки могут вкладываться друг в друга, причем допускается вложение списков одного типа в списки другого типа. Следующий рецепт приготовления яичницы с ветчиной демонстрирует список определений, в который вложены маркированный список (ингредиенты) и нумерованный список (способ приготовления):

Ингредиенты:

яйцо 6 шт.
ветчина 200 г
масло сливочное 2 ст. ложки
соль по вкусу
зелень

Способ приготовления:

Ветчину нарезать мелкими кубиками и обжарить с маслом.
Разбить на обжаренную ветчину яйца.
Посолить и жарить на слабом огне.
Перед подачей посыпать зеленью.

Способ отображения списков зависит от обозревателя и может быть уточнен с помощью задания стиля списка.

1.4.2. Маркированные списки: элемент UL

Синтаксис: <UL>…</UL> (блочный элемент)
Атрибуты:  id, class, style, title, lang, dir, события

Поддержка:  Полное соответствие стандарту (5.0+)
            Атрибут dir игнорируется (4.0+)

Элемент UL (unordered list) определяет маркированный список. Его содержимым должны быть один или несколько элементов LI. Обозреватели обычно отображают элементы маркированного списка с отступом вправо и с маркером перед началом элемента (см. примеры, приведенные выше). Свойство стилей list-style позволяет авторам изменять вид маркеров, запрещать их вывод и т. п.

1.4.3. Нумерованные списки: элемент OL

Синтаксис: <OL>…</OL> (блочный элемент)
Атрибуты:  id, class, style, title, lang, dir, события

Поддержка:  Полное соответствие стандарту (5.0+)
            Атрибут dir игнорируется (4.0+)

Элемент OL (ordered list) определяет нумерованный список. Его содержимым должны быть один или несколько элементов LI. Обозреватели обычно отображают элементы нумерованного списка с отступом вправо и с номером перед началом элемента (см. примеры, приведенные выше). Свойство стилей list-style позволяет авторам изменять способ нумерации элементов списка.

1.4.4. Элементы списков: элемент LI

Синтаксис: <LI>…</LI> (блочный элемент, конечный тег необязателен)
Атрибуты:  id, class, style, title, lang, dir, события

Поддержка:  Полное соответствие стандарту (5.0+)
            Атрибут dir игнорируется (4.0+)

Элемент LI (list item) определяет элемент маркированного или нумерованного списка. Он может включать в себя другие блочные элементы, в т. ч. и элементы OL и UL, позволяя тем самым создавать многоуровневые вложенные списки. Способ его отображения зависит от типа списка и может быть изменен свойством стилей list-style.

1.4.5. Списки определений: элементы DL, DT и DD

Синтаксис: <DL>…</DL> (блочный элемент)
Атрибуты:  id, class, style, title, lang, dir, события

Синтаксис: <DT>…</DT> (блочный элемент, конечный тег необязателен)
Атрибуты:  id, class, style, title, lang, dir, события

Синтаксис: <DD>…</DD> (блочный элемент, конечный тег необязателен)
Атрибуты:  id, class, style, title, lang, dir, события

Поддержка:  Полное соответствие стандарту (5.0+)
            Атрибут dir игнорируется (4.0+)

Элемент DL (definition list) определяет список определений. Он отличается от остальных типов списков тем, что каждый элемент этого списка представляется двумя элементами HTML: элементом DT (definition term), содержащим имя определяемого термина, и элементом DD (definition description), содержащим определение этого термина (см. примеры, приведенные выше). Элемент DT может содержать любые текстовые (но не блочные) элементы. Элемент DD может содержать как текстовые, так и блочные элементы, позволяя тем самым создавать многоуровневые вложенные списки.

Стандарт не исключает возможности давать несколько определений одного термина или одно определение нескольким терминам, как показано в следующем примере:

<DL>
  <DT>Uniform Resource Identifier</DT>
  <DT>Унифицированный идентификатор ресурса</DT>
  <DD>Стандартизованная строка, указывающая на ресурс Интернета,
    такой как HTML-документ или дисковый файл.</DD>
</DL>

Этот пример будет отображаться так:

Uniform Resource Identifier
Унифицированный идентификатор ресурса: Стандартизованная строка, указывающая на ресурс Интернета, такой как HTML-документ или дисковый файл.

Как отмечалось выше, списки определений имеют довольно широкий круг применений. Одним из них является представление диалогов, в которых элемент DT содержит имя говорящего, а DD - его или ее слова. Пример такого диалога из "Вишневого сада" А. П. Чехова:

<DL>
  <DT>Фирс</DT>
  <DD>Перед несчастьем тоже было: и сова кричала, и самовар гудел бесперечь.</DD>
  <DT>Гаев</DT>
  <DD>Перед каким несчастьем?</DD>
  <DT>Фирс</DT>
  <DD>Перед волей.</DD>
</DL>

Этот диалог будет отображаться так:

Фирс: Перед несчастьем тоже было: и сова кричала, и самовар гудел бесперечь.
Гаев: Перед каким несчастьем?
Фирс: Перед волей.