4. Списки в HTML

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

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

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

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

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

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

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

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

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

Как сделать ненумерованный список в 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 - список будет без маркеров.

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

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

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

Так как же сделать нумерованный список в 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»- строчными римскими цифрами

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

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

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

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

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

Например:

4.4. Вложенные списки

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

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

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

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

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

До встречи!