Списки в HTML

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

---

В повседневной жизни мы часто записываем информацию в виде списков:

• список дел на завтра
• список достопримечательностей, которые хотим посмотреть в очередной поездке
• список покупок и т.д. и т.п.

На сайтах тоже часто часть информации оформляется в виде списков. Итак, учимся делать списки в HTML!

Всего выделяют 4 вида списков:

1. Ненумерованные (неупорядоченные)
2. Нумерованные (упорядоченные)
3. Списки определений
4. Вложенные списки

Названия звучат может быть немного угрожающе. На самом деле создавать списки - легко! И Вы сейчас в этом убедитесь.

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

Ненумерованный список -  список, в котором элементы выделяются специальными маркерами – буллетами (визуально похоже на след от пули). А вот и пример ненумерованного списка:

Как сделать ненумерованный список в HTML? Для этого необходимо:

Шаг 1: Использовать тег <ul>...</ul>

<ul> - это аббревиатура от английского "Unordered List", что в переводе означает "неупорядоченный список".

Шаг 2: Каждый элемент списка поместить в теге <li> ...</li>

<li> - это аббревиатура от английского "List Item", что в переводе означает "элемент списка".

Давайте посмотрим, как это работает на примере:

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

list-style-type:circle - маркер будет отображаться кружочком

list-style-type:square - будет выглядеть как квадратик

list-style-type:none - список будет без маркеров.

Посмотрим, как например будет выглядеть список с квадратиками

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

Нумерованный список - список, в котором каждый элемент имеет свой порядковый номер. Нумерованный список используют, если важен порядок элементов. Например:

Так как же сделать нумерованный список в HTML? Для этого необходимо:

Шаг 1: Использовать тег <ol>...</ol>

<ol> - это аббревиатура от английского "Ordered List", что в переводе означает "упорядоченный список".

Шаг 2: Каждый элемент списка поместить в теге <li> ...</li>

<li> - это аббревиатура от английского "List Item", что в переводе означает "элемент списка".

Пример упорядоченного (нумерованного) списка ниже:

По умолчанию элементы нумерованного списка помечаются арабскими цифрами (1, 2, 3, 4, 5 и т.д.). С помощью атрибута type можно это поменять:

type="A" - строки будут нумероваться заглавными буквами

type="a" - строчными буквами

type="I" - заглавными римскими цифрами

type="i"- строчными римскими цифрами

Давайте к примеру пронумеруем наш список дел римскими цифрами

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

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

Список определений, (англ Description List, тег <dl>) включает в себя элементы, которые

• обозначают какое-то понятие, термин (description term) - тег <dt>
• описывают каждое из этих понятий (description data) - тег <dd>

Например:

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

Иногда в элемент списка нужно включить еще один список. HTML позволяет "вкладывать" один список в другой, при этом вложенные списки отображаются с большим отступом по сравнению с родительским списком. К тому же, для неупорядоченных (ненумерованных) списков, браузер обычно изменяет вид маркеров вложенного списка.

Вот как это выглядит:

Списки можно комбинировать между собой, например:

Смотрим как это выглядит в HTML:

В качестве элементов списков можно использовать картинки или ссылки. Также, с помощью CSS список можно расположить горизонтально, а если заменить в нем каждый элемент ссылкой - получится полноценное меню сайта. Но это тема для отдельного урока.
До встречи!