HTML списки

В этой главе:

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

  • Маркированные списки

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

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

  • Таблица тегов для списков

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

Стандартом пятой версии html поддерживается 3 вида списков: нумерованные списки, маркированные и списки определений. Также можно создавать вложенные списки, т.е. вкладывать списки друг в друга.

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

Нумерованный список, его еще часто называют упорядоченным списком (Ordered List), представляет собой определенную последовательность элементов. То есть каждый последующий пункт такого списка будет на единицу больше предыдущего.

Для создания нумерованных списков используется тег <ol>, внутри которого располагаются его элементы с данными, за указание которых отвечает специальный тег <li>.

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
12
<html>
  <body>
 
    <h4>Нумерованный список:</h4>
    <ol>
      <li>Кофе</li>
      <li>Чай</li>
      <li>Молоко</li>
    </ol>
 
  </body>
</html>

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

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

Другим распространенным способом структуризации данных является создание маркированного списка. Маркированные списки представляют собой ненумерованные или неупорядоченные (Unordered List) перечни элементов, для обозначения которых используются специальные маркеры.

Для создания маркированных списков применяется тег <ul>, внутри которого располагаются элементы самого списка (как и в случае с упорядоченными списками используется тег <li>).

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
12
<html>
  <body>
 
    <h4>Маркированный список:</h4>
    <ul>
      <li>Кофе</li>
      <li>Чай</li>
      <li>Молоко</li>
    </ul>
 
  </body>
</html>

Атрибут type

Атрибут type определяет вид маркера, который будет использоваться в упорядоченном списке перед элементами.

В отличие от упорядоченных списков маркированные (неупорядоченные) списки не поддерживают атрибут type.

Варианты маркеров для упорядоченных списков:

Значение

Описание

1

Десятичные цифры (1, 2, 3..)

a

Список в алфавитном порядке, строчные буквы (a, b, c..)

A

Список в алфавитном порядке, заглавные буквы (A, B, C..)

i

Римские цифры, строчные (i, ii, iii, iv..)

I

Римские цифры, заглавные (I, II, III, IV..)

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
  <body>
 
    <h4>Упорядоченный список c атрибутом type - значение "a":</h4>
    <ol type="a">
      <li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
    </ol>
 
    <h4>Упорядоченный список c атрибутом type - значение "I":</h4>
    <ol type="I">
      <li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
    </ol>
 
  </body>
</html>

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

Списки определений - это особый тип структуризации информации, идеально подходящий для отображения толковых и терминологических словарей, а также справочников средствами html.

В отличае от нумерованных и маркированных списков, которые могут содержать по несколько элементов, расположенных друг за другом, элементы списка определений должны состоять из двух частей: самого определения (термина) и его содержательной части (описания).

Список определений создается с помощью тега <dl> (Definition List), внутри которого указывается тег <dt> (Definition Term), выделяющий термин, и тег <dd> (Definition Description), содержащий описание к данному термину.

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
<html>
  <body>
 
    <h4>Список определений:</h4>
    <dl>
      <dt>Кофе</dt><dd>Бодрящий горячий напиток</dd>
      <dt>Молоко</dt><dd>Полезный холодный напиток</dd>
    </dl>
 
  </body>
</html>

Внутри элемента <dd> вы можете размещать абзацы, строки, изображения, ссылки, другие списки и т.д.

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

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

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

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
  <body>
 
    <h4>Вложенный список:</h4>
    <ul>
      <li>Кофе</li>
      <li>Чай
        <ol>
          <li>Черный чай</li>
          <li>Зеленый чай</li>
        </ol>
      </li>
      <li>Молоко</li>
    </ul>
 
  </body>
</html>

Таблица тегов для списков

Тег

Описание

<ul>

Определяет маркированный(неупорядоченный) список.

<ol>

Создает нумерованный(упорядоченный) список.

<li>

Определяет элемент списка.

<dl>

Создает список определений.

<dt>

Oпределяет термин в списке определений.

<dd>

Cоздает описание элемента в списке определений.

<menu>

Определяет список/меню команд.