Списки HTML — это набор взаимосвязанных элементов, которые начинаются с маркера. В этой статье я расскажу о HTML-списках. Статья рассчитана на новичков (школьников и студентов) но может быть полезна всем кто изучает HTML.

Виды HTML-списков

Списки бывают следующих видов:

• Маркированный. Перед элементом списка идет маркер.
• Нумерованный. Перед элементом списка идет номер.
• Список определений. Перед определением идет термин.
• Вложенный список.
• Многоуровневый. Список состоит из нескольких уровней. может быть маркированным. нумерованным и комбинированным.

Так же в этом материале я расскажу, как сделать выпадающий список.

Рассмотрим каждый вид подробнее.

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

Маркированный список создается с помощью тега <ul> — unordered list (неупорядоченный список). Стандартный маркер — точка.

Стиль по умолчанию:

display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;

Элемент любого списка создает тег <li> — list item (элемент списка).

Пример.

<ul>
    <li> Лев </li>
    <li> Тигр </li>
    <li> Леопард </li>
    <li> Снежный барс </li>
</ul>

Результат.

Маркер задается с помощью свойства list-style-type, для маркированного списка это свойство может иметь следующие значения:

• Disc — точка.
• Crcle — круг.
• Square — квадрат.
• None — убирает маркер.

В статье основы HTML я рассказывал о теге <style>. Давайте с его помощью изменим маркер в примере на квадрат.

<style>
ul {list-style-type: square;}
</style>
<ul>
    <li> Лев </li>
    <li> Тигр </li>
    <li> Леопард </li>
    <li> Снежный барс </li>
</ul>

Получим следующий результат:

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

Нумерованный список создается при помощи тега <ol> — order list (упорядоченный список). Стандартно список нумеруется арабскими (традиционными) числами.

Стиль по умолчанию:

display: block;
list-style-type: decimal;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;

Пример.

<ol>
    <li> Лев </li>
    <li> Тигр </li>
    <li> Леопард </li>
    <li> Снежный барс </li>
</ol>

Результат.

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

• Armenian — армянская нумерация.
• Decimal — арабская нумерация.
• Decimal-leading-zero — арабская нумерация с нулем впереди чисел меньше десяти, то есть 01, 02, 03 и так далее.
• Georgian — грузинская нумерация.
• Lower-alpha (lower-latin) — строчные латинские буквы.
• Lower-greek — строчные греческие буквы.
• Lower-roman — римские числа в нижнем регистре, например i, ii.
• Upper-alpha (upper-latin) — заглавные латинские буквы.
• Upper-roman — римские числа в верхнем регистре, например I, II.
• None — без нумерации.

Тег <ol> в отличии элемента <ul> имеет атрибуты.

Атрибуты тега <ol>

Атрибут	Описание	Возможные значения
reversed	Указывает, что элементы списка расположены в обратном порядке.	Нет.
start	Задает первый порядковый номер списка.	Число.
type	Задает тип номера для использования в списке.	1: Десятичный: 1, 2, 3 и так далее. (По умолчанию) a: строчные буквы латинского алфавита: a, b, c и так далее. A: прописные буквы латинского алфавита: A, B, C и так далее. i: римские цифры в нижнем регистре: i, ii, iii и так далее. I: римские цифры в верхнем регистре: I, II, III и так далее.

Примеры.

<p>Пример 1</p>
<ol>
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
</ol>
<p>Пример 2</p>
<ol reversed>
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
</ol>
<p>Пример 3</p>
<ol start="2">
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
</ol>
<p>Пример 4</p>
<ol type="a">
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
</ol>

Результаты.

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

Список определений создается с помощью тега <dl> — description list (список определений). Список определений состоит из пары термин — определение. Термин создается с помощью тега <dt>, а описание с помощью тега <dd>.

Стиль по умолчанию (тега <dl>):

display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;

Пример.

<dl>
    <dt>Собака</dt>
    <dd>Домашнее животное, одно из наиболее популярных (наряду с кошкой) животных-компаньонов.</dd>

    <dt>HTML</dt>
    <dd>Язык гипертекстовой разметки.</dd>
    <dd>Язык, используемый для форматирования веб-документов.</dd>
</dl>

Результат.

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

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

Пример.

<ol>
    <li>Языки веб-программирования
    <ul>
    <li>HTML</li>
    <li>PHP</li>
    <li>JavaScript</li>
    </ul>
    </li>
    <li>Языки программирования .NET
    <ul>
    <li>С++</li>
    <li>С#</li>
    </ul>
    </li>
    <li>Остальные языки программирования</li>
</ol>

Результат.

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

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

Многоуровневым считают нумерованный список. Его отличие от вложенного списка в том, что бы нумерация шла по порядку.

Для этого придется использовать элемент <style>.

Пример.

<style>
ol {counter-reset: li; list-style: none;}
li::before { counter-increment:li; content: counters(li,".") " ";}

</style>
<ol>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка
    <ol>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
    </ol>
  </li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
</ol>

Результат.

Выпадающий список

Как сделать выпадающий список в HTML? Довольно просто, с помощью тега <select>, который позволяет оформить элементы в виде выпадающего списка. Элементы выпадающего списка берутся в тег <option>.

Пример.

<select>
<option selected>Выбрать породу</option>
<option>Лабрадор-ретривер</option>
<option>Золотистый ретривер</option>
<option>Померанский шпиц</option>
<option>Бигль</option>
<option>Боксер</option>
</select>

Результат.

Элемент с атрибутом selected будет выбранным, то есть стоять в начале выпадающего списка. Его можно оставить пустым.

Расшифровка и перевод используемых тегов

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

Тег	Значение	Перевод
<ul>	Unordered list	Неупорядоченный список
<li>	List item	Элемент списка
<ol>	Order list	Упорядоченный список
<dl>	Description list	Список описаний (определений)
<dt>	Description list term	Термин (списка описаний)
<dd>	Description list description	Описание термина (списка описаний)
<select>	Select	Выбор
<option>	Option	Вариант.

На этом изучение списков HTML заканчивается.