Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

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

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

Нумерованные списки (упорядоченные)

Для создания упорядоченных или нумерованных списков используется тег <OL>...</OL>, который является блочным и может содержать только теги <LI>...</LI>, отвечающие за создание пунктов списка. А вот <LI> может содержать и блочные, и встроенные теги, и, конечно, обычный текст (все почти как у HTML-таблиц, правда?).

По умолчанию браузеры нумеруют списки арабскими числами (1, 2, 3,...), но в старых версиях HTML у тегов <OL> и <LI> существовал атрибут type, который изменял тип нумерации для всего списка или его отдельных элементов. Как вы уже поняли, вместо устаревшего type мы снова будем применять стили (CSS) и атрибут style.

style="list-style:decimal" — нумерация арабскими числами (по умолчанию).
style="list-style:upper-alpha" — нумерация заглавными буквами латинского алфавита (A, B, C,...).
style="list-style:lower-alpha" — строчными буквами латиницы (a, b, c,...).
style="list-style:upper-roman" — римскими числами написанными заглавной латиницей (I, II, III,...).
style="list-style:lower-roman" — римскими числами написанными строчной латиницей (i, ii, iii,...).

Пример создания нумерованных списков в HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Нумерованные списки в HTML</title>
</head>
<body>
 <ol style="list-style:upper-alpha">
  <li>Ниф-Ниф</li>
  <li>Нуф-Нуф</li>
  <li>Наф-Наф</li>
 </ol>
</body>
</html>

Результат в браузере

  1. Ниф-Ниф
  2. Нуф-Нуф
  3. Наф-Наф

Маркированные списки (неупорядоченные)

Маркированные списки называются так потому, что напротив их элементов браузеры рисуют определенные значки (маркеры). Чтобы создать неупорядоченный или маркированный список, необходимо использовать тег <UL>...</UL>, естественно он тоже является блочным. А в создании элементов списка учавствует все тот же тег <LI>...</LI>, который может содержать встроенные и блочные теги.

Виды маркеров можно менять, раньше этим тоже занимался type, а сейчас это делает CSS.

style="list-style:disc" — маркеры в виде кружков (по умолчанию).
style="list-style:circle" — макеры в виде окружностей.
style="list-style:square" — маркеры-квадратики.

Пример создания маркированных списков в HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Маркированные списки в HTML</title>
</head>
<body>
 <ul style="list-style:square">
  <li>Бим</li>
  <li>Бом</li>
  <li>Бум</li>
 </ul>
</body>
</html>

Результат в браузере

  • Бим
  • Бом
  • Бум

Кроме нумерации, вокруг списков браузеры создают небольшие пустые поля (внешние отступы). Их размер зависит от типа и версии браузеров.

Домашнее задание.

  1. Возьмите задание одного из предыдущих уроков и дополните, как показано в результате этого домашнего задания.
Вложенные таблицы← Содержание →Метатеги и их типы
Учебник HTML