Списки HTML

HTML поддерживает порядковые, непорядковые и определительные списки

Пример

Непорядковый список
Этот пример демонстрирует пример непорядкового списка.
Порядковый список
Этот пример демонстрирует пример порядкового списка.

(Более подробные примеры можно найти в нижней части этой страницы)

Непорядковый список

Непорядковый список представляет собой список элементов, каждый из которых помечен жирным кружочком (типичное маленькое черное пятно).

Непорядковый список начинается с тега <ul>. Каждый список начинается с тега <li>.

<ul>
<li>Кофе</li>
<li>Молоко</li>
</ul>

Браузер отображает следующим образом:

  • Кофе
  • Молоко

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

Порядковый список

Таким же образом, упорядоченный список также представляет собой список элементов, элементы списка обозначены числами.

Упорядоченный список начинается с тега <ol>. Каждый элемент списка начинается с тега <li>.

<ol>
<li>Кофе</li>
<li>Молоко</li>
</ol>

Браузер отображает следующим образом:

  1. Кофе
  2. Молоко

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

Список определений

Настраиваемый список не просто список элементов, но и комбинация элементов и их комментариев.

Настраиваемый список начинается с тега <dl>. Каждый элемент списка начинается с тега <dt>. Каждое определение элемента начинается с тега <dd>.

<dl>
<dt>Кофе</dt>
<dd>Черный горячий напиток</dd>
<dt>Молоко</dt>
<dd>Белый холодный напиток</dd>
</dl>

Браузер отображает следующим образом:

Кофе
Черный горячий напиток
Молоко
Белый холодный напиток

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

Более примеров

Различные типы списков без порядкового номера
Этот пример демонстрирует список без порядкового номера.
Различные типы упорядоченных списков
Этот пример демонстрирует различные типы упорядоченных списков.
Вложенный список
Этот пример демонстрирует, как вложенные списки.
Вложенный список 2
Этот пример демонстрирует более сложные вложенные списки.
Список определений
Этот пример демонстрирует список определений.

Список тегов

Тег Описание
<ol> Определение упорядоченного списка.
<ul> Определение несписка.
<li> Элемент списка определений.
<dl> Определение списка определений.
<dt> Определение элемента определения.
<dd> Определение описания определения.
<dir> Устарело. Используйте <ul> вместо него.
<menu> Устарело. Используйте <ul> вместо него.