Использование списков в HTML. Вложенные списки.
http://belarusweb.net
Основы создания сайтов

Создание списков в HTML.
Теги <ol>, <ul>, <li>, <dl>, <dt>, <dd>

Нумерованные списки. Теги <ol> и <li>,

В HTML 5 используется три вида списков: нумерованный, маркированный и список определения.

Нумерованный список формируется парным тегом <ol> (от англ. ordered list). Сам элемент 'ol' используется, как контейнер для пунктов списка, которые формируются парными тегами <li> и располагаются друг за другом.

По умолчанию пункты списка нумеруются браузером по порядку, начиная с единицы. Если нумерацию нужно начать не с единицы, то используется атрибут start, который задает число, с которого будет начинаться нумерованный список. В качестве значения атрибут принимает целые числа. Можно также изменить порядок нумерации на обратный. Для этого служит атрибут reversed, который используется без значений. Атрибут введен в HTML 5 и работает во всех браузерах, кроме IE.

Имеется также возможность устанавливать вид маркера нумерованного списка. Для этого используется атрибут type, который может принимать значения "A | a | I | i | 1", которые, соответственно, означают:

  • заглавные латинские буквы,
  • строчные латинские буквы,
  • заглавные римские цифры,
  • строчные римские цифры,
  • арабские цифры.

Поскольку все перечисленные значения, и не только, могут быть с легкостью установлены через стили CSS, использование атрибута type, по мнению автора, не целесообразно, хотя и допускается в HTML 5.

Использование нумерованного списка показано в примере 2.10.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Нумерованный список</title>
</head>
<body>
	<em style="color: green">Весенние месяцы по порядку:</em>
	
	<ol start="3" title="Весенние месяцы">
		<li>март</li>
		<li>апрель</li>
		<li>май</li>
	</ol>
	
	<em style="color: red">Летние месяцы в обратном порядке:</em>
	
	<!-- Перечисляем в обратном порядке. В IE не работает! -->
	<ol start="8" reversed>
		<li>август</li>
		<li>июль</li>
		<li>июнь</li>
	</ol>
</body>
</html>

Пример 2.10. Использование элемента 'ol'

Кстати, браузеры отображают все списки как блочные элементы, поэтому при отображении примера отчетливо видны вертикальные отступы. Попробуйте набрать код самостоятельно, задайте спискам желтый фон и посмотрите результат.

Маркированные списки. Теги <ul> и <li>,

Маркированный список формируется парным тегом <ul> (от англ. unordered list). Сам элемент 'ul' используется, как контейнер для пунктов списка, которые формируются, как и в случае с нумерованными списками, парными тегами <li> и располагаются друг за другом.

Маркированный список вместо цифр и букв использует маркеры в виде кружков. Изменить внешний вид маркеров можно при помощи стилей CSS. Что касается атрибута type, то его в HTML 5 убрали. Так что, остались только универсальные атрибуты и атрибуты-события.

Код, содержащий элемент 'ul', показан в примере 2.11.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Маркированный список</title>
</head>
<body>
	<em style="color: green">Весенние месяцы:</em>
	<!-- Задаем фон, чтобы визуально увидеть область,  
	занимаемую списком, как блочным элементом -->
	<ul style="background-color: yellow">
		<li>март</li>
		<li>апрель</li>
		<li>май</li>
	</ul>
</body>
</html>

Пример 2.11. Использование элемента 'ul'

Списки определений. Теги <dl>, <dt>, <dd>

Список определений формируется парным тегом <dl> (от англ. definition list). Сам элемент 'dl' используется, как контейнер для пунктов списка. Каждый такой пункт, в свою очередь, состоит из элементов 'dt' (от англ. definition term) и 'dd' (от англ. definition description), сформированных, соответственно, парными тегами <dt> и <dd>. Первый из них содержит определяемый термин, а второй – определение термина.

Давайте для наглядности посмотрим пример 2.12.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Список определений</title>
</head>
<body>
		
	<dl title="Список из двух определений">
		<dt>HTML</dt>
			<dd>Стандартный язык гипертекстовой разметки веб-документов, <br>
			который повсеместно используется во Всемирной паутине.</dd>
		
		<dt>CSS</dt>
			<dd>Формальный язык описания внешнего вида документа, <br>
			написанного с использованием языка разметки.</dd>
	</dl>
</body>
</html>

Пример 2.12. Использование элемента 'dl'

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

Иногда возникает необходимость создания вложенных списков, которые представляют собою списки, расположенные в пунктах внешнего списка. Рассмотрим создание вложенных списков на примере 2.13.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Вложенные списки</title>
</head>
<body>
	<!-- Пусть будет нумерованный список -->	
	<ol>
		<!-- В каждый пункт помещаем новый список -->
		<li>Три сорта яблок:
			<ul>
				<li>Антоновка,</li>
				<li>Штрефель,</li>
				<li>Кубань.</li>
			</ul>
		</li>
		<!-- А сюда поместим нумерованный список -->
		<li>Три сорта груш:
			<ol>
				<li>Чижовская,</li>
				<li>Вильямс,</li>
				<li>Дюшес.</li>
			</ol>
		</li>
	</ol>
</body>
</html>	

Пример 2.13. Использование вложенных списков

Как видим, создавать вложенные списки совсем не трудно. Для этого нужно внимательно между открывающим тегом <li> и закрывающим тегом </li> для нумерованных и маркированных списков расположить вложенный список требуемого вида. Что касается списков определений, то вложенный список следует располагать между открывающим тегом <dd> и закрывающим тегом </dd>. Это может понадобиться, например, если нужно дать термину несколько определений.

Комментарии (0)

Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!