## 09. Кодирование списков

На этой странице:

- Маркированный список
- Нумерованный список
- Вложенные списки

HTML позволяет задавать на страницах списки двух типов — нумерованный и маркированный. Кроме того, каждый пункт списка может иметь подчинённый, вложенный список.

Примеры маркированного и нумерованного списков:

Маркированный список | Нумерованный список
--- | ---
Вопросы Пятачка Какой он, этот Слонопотам? Неужели очень злой? Идёт ли он на свист? И если идёт, то зачем? Любит ли он поросят или нет? И как он их любит? | Словечки Эллочки Хамите. Хо-хо! Знаменито. Мрачный. Мрак. Жуть.

### Маркированный список

Каждый элемент маркированного списка браузер предваряет меткой (маркером списка), а сами элементы смещает вправо.

Блочный элемент `UL`, задающий маркированный список, записывается в следующем виде:

Внутри блока `UL` содержатся блоки `LI`, задающие пункты списка.

Закрывающий тег `</UL>` является обязательным, а теги `</LI>` можно опускать.

Вид маркера, помещаемого браузером перед каждым элементом списка, настраивается при помощи атрибута `type`. Этот атрибут может отсутствовать или принимать одно из трёх значений:

Начальный тег | Вид | Описание
--- | --- | ---
`<UL>` |  | Обычно круг (зависит от браузера)
`<UL type=circle>` |  | Окружность
`<UL type=disc>` |  | Круг
`<UL type=square>` |  | Квадрат

### Нумерованный список

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

Нумерованный список задается блочным элементом `OL`:

Внутри блока `OL` содержатся блоки `LI`, задающие пункты списка.

Закрывающий тег `</OL>` является обязательным, а теги `</LI>` можно опускать.

Вид номера определяется значением атрибута `type`:

Начальный тег | Вид | Описание
--- | --- | ---
`<OL>` |  | Нумерация арабскими цифрами (1, 2, 3,…)
`<OL type=1>` |  | Нумерация арабскими цифрами (1, 2, 3,…)
`<OL type=A>` |  | Нумерация прописными буквами (A, B, C,…)
`<OL type=a>` |  | Нумерация строчными буквами (a, b, c,…)
`<OL type=I>` |  | Нумерация большими римскими цифрами (I, II, III,…)
`<OL type=i>` |  | Нумерация малыми римскими цифрами (i, ii, iii,…)

Естественную нумерацию элементов списка (с единицы) можно изменить при помощи атрибута `start=n`. Число n задает начальное значение номера. Если для нумерации используются буквы или римские цифры, то стартовое значение равно n-му элементу в системе нумерации (например, n = 4 означает D или IV).

Браузеры делают фиксированный отступ для вывода элементов списка на экран (примерно 40 пикселов). Нумерация при этом смещается к левому краю окна. Когда номер достаточно большой, места не хватает. Для исключения этого неприятного эффекта в коде примера пришлось задать смещение списка вправо на 100 пикселов при помощи стилевого указания `style="margin-left:100px"` в теге `OL`.

### Вложенные списки

Элемент любого списка сам может быть списком. Уровень вложенности, в принципе, не ограничен, и это позволяет с успехом использовать списки для отображения сложных иерархических структур.

Пример вложенных маркированных списков:

Пример вложенных нумерованных списков:

Пример смешанного списка — элементы нумерованного списка содержат вложенные маркированные списки:

> О важности выравнивания элементов страницы уже говорилось.

> Особенно неприятны нарушения выравнивания в списках, возникающие из-за центрирования строк. Неприятные ощущения от таких конструкций в несколько раз усиливаются присутствием списочных маркеров. Эти маркеры словно точки на одной прямой хочется расположить красивым вертикальным столбиком.

> Посмотрите на такой список:

> - волк;
> - жираф великолепный;
> - тигр учёный;
> - лось сохатый.

> А теперь на такой:

> - волк;
> - жираф великолепный;
> - тигр учёный;
> - лось сохатый.

> Последний список получен центрированием. Разница заметна, правда?

вверх