Руководство по спискам в HTML

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

• Неупорядоченные списки (ul, сокращенно от unordered lists) — список элементов, где каждый элемент списка помечен маркером;
• Упорядоченные списки (ol, сокращенно от ordered lists) — список элементов, где каждый элемент списка помечен номером;
• Список определений (dl, сокращенно от definition list) — список элементов с описанием каждого элемента.

Теперь рассмотрим списки по очереди.

Использование HTML-тега <ul>

Неупорядоченный список создается с использованием элемента <ul>, каждый элемент списка начинается с элемента <li>.

Элементы списка в неупорядоченных списках отмечены маркерами. Вот пример:

<ul>
    <li>Chocolate Cake</li>
    <li>Black Forest Cake</li>
    <li>Pineapple Cake</li>
</ul>

Результат вышеприведенного примера будет выглядеть примерно так:

Вы также можете изменить тип маркера в неупорядоченном списке, используя CSS-свойство list-style-type. Следующее правило изменяет тип маркера с диска по умолчанию на квадрат:

ul {
    list-style-type: square;
}

См. Руководство по спискам в CSS, чтобы узнать подробнее о стилизации списков HTML.

Использование HTML-тега <ol>

Упорядоченный список, создается с использованием элемента <ol>, каждый элемент списка начинается с элемента <li>. Упорядоченные списки используются, когда важен порядок элементов списка.

Элементы списка в упорядоченном списке отмечены номерами. Вот пример:

<ol>
    <li>Fasten your seatbelt</li>
    <li>Starts the car's engine</li>
    <li>Look around and go</li>
</ol>

Результат вышеприведенного примера будет выглядеть примерно так:

Нумерация элементов в упорядоченном списке обычно начинается с 1. Однако, если вы хотите изменить это, вы можете использовать атрибут start, как показано в следующем примере:

<ol start="10">
    <li>Mix ingredients</li>
    <li>Bake in oven for an hour</li>
    <li>Allow to stand for ten minutes</li>
</ol>

Результат вышеприведенного примера будет выглядеть примерно так:

Как и неупорядоченный список, вы можете использовать CSS-свойство list-style-type для изменения типа нумерации в упорядоченном списке. Следующее правило меняет тип маркера на римские цифры.

ol {
    list-style-type: upper-roman;
}

Использование HTML-тега <dl>

Список описаний — это список элементов с описанием или определением каждого элемента.

Список описаний создается с использованием элемента <dl>. Элемент <dl> используется вместе с элементом <dt>, который задает термин, и элементом <dd>, который определяет определение термина.

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

<dl>
    <dt>Bread</dt>
    <dd>A baked food made of flour.</dd>
    <dt>Coffee</dt>
    <dd>A drink made from roasted coffee beans.</dd>
</dl>

Результат вышеприведенного примера будет выглядеть примерно так: