Списки в HTML. Все о HTML списках

В HTML для создания списков используются теги группы lists. К ним относятся:

• <ul> - тег маркированного списка;
• <ol> - тег нумерованного списка;
• <li> - тег элемента списка;
• <dl> - тег списка определений;
• <dt> - тег термина в списке определений;
• <dd> - тег описания термина в списке определений.

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

Далее будет показана практика создания HTML списков с примером исходного кода и описанием на русском языке.

В HTML есть три типа списков: маркированный, нумерованный и список определений (терминов).

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

Для создания маркированного списка используются теги <ul> и <li>. Тег ul - это контейнер маркированного списка. Тег li - элемент списка.

Пример простого маркированного списка HTML

Исходный код простого маркированного списка:

<ul>
  <li>Яблоки</li>
  <li>Абрикосы</li>
  <li>Бананы</li>
  <li>Сливы</li>
</ul>

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

Для маркированного списка доступны 3 типа маркеров по умолчанию: disc, square и circle. Задать тип маркера можно при помощи CSS свойства list-style-type. Тип маркера может быть задан, как для списка в целом (свойство применяется к <ul>), так и для конкретного элемента (свойство применяется к <li>).

Список с разными типами маркеров:

Исходный код списка с разными типами маркеров:

<ul>
  <li style="list-style-type: disc;">Disc - закрашенный круг, точка.</li>
  <li style="list-style-type: circle;">Circle - окружность, пустая внутри.</li>
  <li style="list-style-type: square;">Square - квадрат.</li>
</ul>

Положение маркера в списке

HTML поддерживает 2 типа положений маркеров списка: внутри или снаружи. Положение маркера регулируется CSS свойством list-style-position. Положение может быть задано, как для списка в целом, так и для отдельного элемента.

Пример списка с разным положением маркеров:

Исходный код списка с разным положением маркеров:

<ul>
  <li style="list-style-position: inside;">Маркер внутри (inside)</li>
  <li style="list-style-position: outside;">Маркер снаружи (outside)</li>
</ul>

Свой маркер в HTML списке

Использовать в качестве маркера HTML списка можно и свою картинку. Для этого используйте CSS свойство list-style-image.

Пример списка со своей картинкой в роли маркера:

Исходный код списка со своим маркером - картинкой:

<ol style="list-style-image: url('/images/image.png');">
  <li>Дизайн</li>
  <li>Верстка</li>
  <li>Интеграция</li>
</ol>

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

Чтобы создать нумерованный список используйте теги <ol> и <li>. Тег ol - это контейнер нумерованного списка. Тег li - элемент списка.

Пример нумерованного списка HTML

Исходный код нумерованного списка

<ol>
  <li>Выучить HTML</li>
  <li>Добавить CSS</li>
  <li>Освоить JavaScript</li>
</ol>

Типы нумерации в HTML списке

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

Разные типы нумерации в списках:

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

Многоуровневый список HTML (список в списке)

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

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

Ограничений по количеству уровней вложенности списков нет.

Пример многоуровневого списка

Исходный код многоуровневого списка

<ul>
  <li>Tesla
    <ol>
      <li>Model 3</li>
      <li>Model S
        <ol type="I">
          <li>75</li>
          <li>75D</li>
          <li>100D</li>
          <li>P100D</li>
        </ol>
      </li>
      <li>Model X</li>
    </ol>
  </li>
  <li>BMW</li>
  <li>Nissan</li>
</ul>

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

Для создания списка определений используются теги <dl>, <dt> и <dd>. Тег dl - это контейнер списка определений, dt - термин, dd - описание термина.

Пример простого списка определений:

Исходный код списка определений:

<dl>
  <dt>Спектр</dt>
  <dd>Распределение значений физической величины, например, массы, частоты или энергии.</dd>
  <dt>Люминесценция</dt>
  <dd>Эффект нетеплового свечение вещества, происходящий после поглощения им энергии.</dd>
</dl>