— Продвигаемся далее и изучим новые теги.

— Я думал мы уже закончили с тегами, ведь уже даже атрибуты рассмотрели.

Начни Учить Full-Stack JavaScript СЕЙЧАС!

— Ооо нет, тегов еще огромное количество. Например, сегодня мы рассмотрим списки и теги для их создания.

— Отлично, я готов!

Списки широко используются в HTML для группировки информации. Существует три вида списков: маркированный, нумерованный и список определений.

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

В маркированном списке каждый элемент выделяется каким-то маркером, по умолчанию это закрашенный кружочек. Добавляется такой список с помощью парного тега <ul>. А потом добавляем каждый пункт этого списка - с помощью тега <li>.

<h2>Что я должен знать, что бы стать Frontend разработчиком</h2>
<ul>
  <li>JS</li>
  <li>HTML</li>
  <li>CSS</li>
</ul>

— Круто. А можно, что бы рисовались не кружочки? Я вот хочу, например, квадратики.

— Легко. Для этого тебе нужно воспользоваться атрибутами. Добавлять их ты научился в прошлой лекции.

Что бы изменить вид маркера, добавь тегу <ul> атрибут type. Для этого атрибута может быть несколько значений:

  • disc отобразит маркер в виде круга
  • circle - в виде окружности
  • square - квадратные метки
<h2>Что я должен знать, что бы стать Front-end разработчиком</h2>
<ul>
  <li>JS</li>
  <li>HTML</li>
  <li>CSS</li>
</ul>

— Ну а если я хочу вместо всяких квадратиков и кружочков добавить самые обычные цифры? Неужели самому прийдется писать их?

— Конечно нет. Для этого тебе надо создать нумерованный список.

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

В нумерованном списке каждому элементу добавляется его порядковый номер. Такой список можно создать с помощью тега <ol>. А каждый пункт такого списка…

— Я знаю, я знаю. Создается с помощью тега <li>.

— Ты совершенно прав. Точно так же, как и со списком <ul>.

<h2>Что я должен знать, чтобы стать Frontend разработчиком</h2>
<ol>
  <li>JS</li>
  <li>HTML</li>
  <li>CSS</li>
</ol>

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

<ol>
  <li>reversed - задает отображение списка в обратном порядке.</li>
  <li>
    type - задает вид маркера для использования в списке (в виде букв или цифр).
    Например, `1` - значение по умолчанию, десятичная нумерация.
    А `I` -  нумерация римскими заглавными цифрами (I, II, III, IV).
  </li>
  <li>
    start - задает начальное значение, от которого пойдет отсчет нумерации.
  	Например, со значение 3 нумерация элементов списка начнется с цифры 3.
  </li>
</ol>

— Стой, ты забыл сказать значение для атрибута reversed.

— Ну не совсем забыл. Просто у этого атрибута нет значения.

— Как же его тогда использовать?

— Еще легче, чем атрибуты со значением. Ты просто пишешь его имя и все. Смотри:

<ol reversed type="I" start="10">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ol>

<!-- Результат:
X. Пункт 1
IX. Пункт 2
VIII. Пункт 3
-->

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

Существует еще один вид списка. Он встречается не так часто как предыдущие два. Называется он - список определений.

Добавляется список определений с помощью тега <dl>. Но в отличие от списков <ol> и <ul>, элемент списка добавляется НЕ с помощью тега <li>.

Здесь каждый пункт состоит из двух элементов — термина и его определения. Для термина используется тег <dt>, а для определения — тег <dd>.

<dl>
  <dt>Термин 1</dt>
  <dd>Определение термина 1</dd>
  <dt>Термин 2</dt>
  <dd>Определение термина 2</dd>
</dl>

— Интересно, а зачем такие списки вообще нужны?

— Список определений отлично подходит для расшифровки терминов, создания словаря или справочника.

— Думаю я уже готов пробовать писать свои списки…

— Тогда вперед, к практическим задачам.