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

Рейтинг: 5 из 5, голосов 1
+++++

В 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>).

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

  • Disc - закрашенный круг, точка.
  • Circle - окружность, пустая внутри.
  • Square - квадрат.

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

<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. Положение может быть задано, как для списка в целом, так и для отдельного элемента.

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

Текст страницы.

  • Маркер внутри (inside)
  • Маркер снаружи (outside)

Текст страницы.

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

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

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

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

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

  1. Дизайн
  2. Верстка
  3. Интеграция

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

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

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

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

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

  1. Выучить HTML
  2. Добавить CSS
  3. Освоить JavaScript

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

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

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

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

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

type="I"

  1. Первый
  2. Второй
  3. Третий

type="i"

  1. Первый
  2. Второй
  3. Третий

type="1"

  1. Первый
  2. Второй
  3. Третий

type="A"

  1. Первый
  2. Второй
  3. Третий

type="a"

  1. Первый
  2. Второй
  3. Третий

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

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

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

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

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

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

  • Tesla
    1. Model 3
    2. Model S
      1. 75
      2. 75D
      3. 100D
      4. P100D
    3. Model X
  • BMW
  • Nissan

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

<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>
Оцените, насколько полезна эта страница
+++++
Оставьте комментарий

Отправляя форму, я даю согласие на обработку персональных данных.