Списки HTML

Маркированный (неупорядоченный) список — unordered list

Для построения такого списка нужны 2 вида элементов: ‘ul’ (сокращение от unordered list, т.е. неупорядоченный список) и ‘li’ (элемент списка). Все, что написано внутри ‘li’, помечается маркером.

Внешним видом такого списка можно управлять, задавая типы маркеров.

Типы маркеров

Есть специальный атрибут type, который ставится в обоих элементах списка. Это тип вашего маркера. Всего 3 типа: окружность, диск и квадрат:

<ul type="square"> - квадрат
<ul type="disc"> - диск
<ul type="circle"> - окружность

В зависимости от того, где указать тип маркера, можно поменять его у всего списка или у конкретного элемента.

Нумерованный список (ordered list)

Для построения списка также нужно 2 элемента: ‘ol’ и ‘li’ (элемент списка). Маркеры заменяются на цифры с точкой. Пример простого списка:

<ol>
<li>первый элемент</li>
<li>второй элемент</li>
<li>последний элемент</li>
</ol>

Внешним видом упорядоченного списка можно управлять, задавая разные типы нумерации.

Типы нумерации

Есть специальный атрибут type, который ставится в элементе ‘ol’ или ‘li’. Это тип вашего списка. Всего 5 типов:

<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)
<ol start="5"> - С какой цифры начать нумерацию

В зависимости от того, где указать тип нумерации, можно поменять ее у всего списка или у конкретного элемента.

Список определений (definition list)

Список определений был разработан для словарных статей. Есть общий контейнер ‘dl’. Внутри него стоят ‘dt’ (definition termin — термин) и ‘dd’ (definition description — описание). Простейший пример:

<dl>
<dt>Отдел маркетинга</dt>
<dd>Данный отдел занимается
продвижением товаров и услуг</dd>
<dt>Финансовый отдел</dt>
<dd>Данный отдел занимается всеми
финансовыми операциями</dd>
</dl>

Все элементы всех списков — блочные. Но внутри элемента ‘dt’ можно ставить только строчные элементы. В элементы ‘dd’ и ‘li’ можно ставить все, что угодно. Отсюда появляются вложенные списки.

Вложенные (смешанные списки)

Это многоуровневые списки, внутри которых есть иерархия. Часто такие списки применяются при построении карты сайта. Пример:

<dl><b>Смешанный список<b>
<dt><i>НОВОСТЬ ДНЯ</i>
<dd>
<li>Сегодня идет дождь
<li>Дождь будет идти весь день
<dt><i>НОВОСТЬ НОЧИ</i>
<dd>
<li>Ночью будет идти дождь
<li>Завтра начнется новый день
</dl>

---