Списки

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

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

Нумерованный список может быть создан с помощью тега <ol>, а каждый элемент списка может быть создан с помощью тега <li>, как в приведенном ниже примере:

<ol>
    <li>Первый пункт</li>
    <li>Второй пункт</li>
    <li>Третий пункт</li>
</ol>

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

Изменение нумерации

Есть несколько способов, которыми вы можете манипулировать для изменения номера в списках. Первый способ - установить начальный номер, используя атрибут start. Список начнется с этого числа и продолжит увеличиваться на единицу, как обычно.

<ol start="3">
    <li>Первый пункт</li>
    <li>Второй пункт</li>
    <li>Третий пункт</li>
</ol>

Получим:

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

<li value="7"></li>

Также стоит отметить, что, используя атрибут value непосредственно в элементе списка, вы можете переопределить существующую систему нумерации списка, перезапустив нумерацию с меньшим значением. Поэтому, если родительский список уже достиг значения 7 и столкнулся с элементом списка со значением 4, то этот элемент списка будет отображаться как 4 и продолжить отсчет с этой точки снова.

<ol start="5">
    <li>Первый пункт</li>
    <li>Второй пункт</li>
    <li value="4">Третий пункт</li>
    <li>Четвертый пункт</li>
    <li>Пятый пункт</li>
</ol>

Таким образом, в приведенном выше примере будет создан список, который следует шаблону нумерации 5, 6, 4, 5, 6.

Можно изменить нумерацию на обратный порядок (в сторону убывания), добавив атрибут reversed:

<ol reversed>
    <li>Первый пункт</li>
    <li>Второй пункт</li>
    <li value="4">Третий пункт</li>
    <li>Четвертый пункт</li>
    <li>Пятый пункт</li>
</ol>

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

Смена типа нумерации

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

<ol type="1|a|A|i|I">

Тип	Описание	Пример
1	Арабские цифры (по умолчанию)	1,2,3,4
a	Строчные латинские буквы	a,b,c,d
A	Заглавные латинские буквы	A,B,C,D
i	Строчные римские цифры	i,ii,iii,iv
I	Заглавные римские цифры	I,II,III,IV

Вы должны использовать <ol> для отображения списка, где важен порядок пунктов. Если изменение порядка элементов не влияет на список, вы должны использовать <ul>.

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

Маркированный список может быть создан с помощью тега <ul>, а каждый элемент списка должен быть создан с помощью тега <li>, как показано в следующем примере:

<ul>
    <li>Первый пункт</li>
    <li>Второй пункт</li>
    <li>Третий пункт</li>
</ul>

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

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

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

<ul>
    <li>Первый пункт</li>
    <li>Второй пункт
        <ul>
            <li>подпункт 2.1</li>
            <li>подпункт 2.2</li>
        </ul>
    </li>
    <li>Третий пункт</li>
</ul>

Вложенный список должен быть дочерним элементом элемента li.
Вы можете также вставлять различные типы списков:

<ol>
    <li>Первый пункт</li>
    <li>Второй пункт
        <ul>
            <li>подпункт 2.1</li>
            <li>подпункт 2.2</li>
        </ul>
    </li>
    <li>Третий пункт</li>
</ol>

Списки описаний

Список описаний (до спецификации HTML5 назывался список определений) создается с помощью элемента dl. Он состоит из групп имен (терминов) и значений, где имя указано в элементе dt, а значение задается в элементе dd.

<dl>
    <dt>название 1</dt>
    <dd>значение для 1</dd>
    <dt>название 2</dt>
    <dd>значение для 2</dd>
</dl>

Группа с названием-значением может содержать более одного имени и/или более одного значения:

<dl>
    <dt>название 1</dt>
    <dt>название 2</dt>
    <dd>значение для 1 и 2</dd>
    <dt>название 3</dt>
    <dd>значение для 3</dd>
    <dd>альтернативное значение для 3</dd>
</dl>