Работа со списками в HTML.

Продолжаем работу с элементами, которые отвечают за разметку текста на веб-страницах.

Бывает такие ситуации, что в тексте нужно перечислить несколько логически связанных сведений. Обычно такую информацию оформляют в виде списков. Каждый пункт списка выделяется специальным маркером и отступами.

Например, это может выглядеть вот так:

Воспринимать информацию в списке намного проще и нагляднее.

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

Давайте начнем с того, что есть несколько видов списков:

1) Маркированные списки 

Это списки перед каждым пунктом которых размещается специальный маркер. Этот маркер может принимать самые разные формы: [+] круглую

[+] квадратную

[+] маркером может также быть изображение

[+] и.т.д.

Элемент, который сообщает о том, что список является маркированным - это элемент

<ul></ul>

Каждый пункт в списке заключается в элемент

<li></li>

Пример:

<ul>
   <li>Элемент 1</li>
   <li>Элемент 2</li>
   <li>Элемент 3</li>
</ul>

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

2) Нумерованные списки

В нумерованных списках перед каждым пунктом ставиться порядковый номер элемента . По умолчанию, этот номер задается цифрами 1, 2, 3, 4, 5, .... Но, нумерация также может задаваться римскими цифрами I, II, III, … , либо буквами алфавита A, B, C, D, ...

Элемент, который отвечает за создание нумерованного списка:

<ol></ol>

Каждый пункт в списке также заключается в элемент <li></li>.

<ol>
   <li>Нумерованный элемент списка 1</li>
   <li>Нумерованный элемент списка 2</li>
   <li>Нумерованный элемент списка 3</li>
</ol>

3) Список определений и описаний.

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

Основная задача этого списка приводить список терминов и их определений. Например,

<dl>
<dt>Термин 1</dt>
<dd>Определение 1</dd>
<dt>Термин 2</dt>
<dd>Определение 2</dd>
<dt>HTML</dt>
<dd>Язык разметки гиппертекста</dd>
<dt>CSS</dt>
<dd>Каскадные таблицы стилей</dd>
</dl>

На веб-странице это выглядит следующим образом:

Списки относятся к разряду элементов со свойством display:list-item. Почитать об этом можно здесь.

Ранее, для того, чтобы изменять внешний маркера списка и задания характеристик этого маркера использовались атрибуты:

type
start
value
compact

Но, сейчас эти атрибуты считаются устаревшими и все манипуляции с внешним видом маркера и настроек список выполняются с помощью стилей CSS.