Справочник по языку XHTML: Текст - параграфы P и списки OL, UL, DL

Текст - параграфы и списки

В этой главе:

Элемент P
Элемент BR
Списки: элементы OL, UL и LI
Списки определений: элементы DL, DT и DD
Элементы DIR и MENU

В этой главе рассматривается структуризация текста при помощи параграфов и списков. Для создания параграфов в HTML используется элемент P, а для списков – OL, UL, DL, DT, DD и LI. Кроме того, существует элемент BR, создающий разрыв строки.

Элемент P

Уже знакомый нам по ряду предыдущих примеров элемент P определяет параграф. Он не может содержать в себе иные элементы уровня блока, включая DIV, списки и вложенные элементы P. Как правило, браузеры создают отступ высотой приблизительно в одну строку между параграфами. Элемент P не может быть пустым (т.е. должен содержать какой-либо текст, рисунок, и т.п.), поскольку браузеры игнорируют пустые параграфы.

<p>В HTML 4 закрывающий тег необязателен.
<p>Но по правилам XHTML он необходим, так что лучше его всегда закрывать</p>
<p>А такое вот <p>вложение параграфов</p> недопустимо!</p>

В третьей строке выполнена недопустимая попытка создать «вложенный» параграф. При интерпретации такого кода браузер воспримет слово «Третий» как отдельный параграф, «Недопустимо!» будет четвертым, а последний закрывающий тег

окажется потерявшимся, и может вызвать ошибки при интерпретации дальнейшего содержимого документа. Следует также отметить, что параграфы могут содержать только строковые (inline) элементы, используемые для выделения текста (например, B, I, SAMP и т.д.). Таким образом, в него нельзя вкладывать не только его самого, но и любые другие блочные элементы (таблицы, списки и т.п.)

ПРИМЕЧАНИЕ
Хотя стандарт трактует элемент P как параграф, по своей сути в HTML этот элемент обозначает не более чем абзац. Действительно: параграф в обычном понимании может иметь совершенно произвольное содержание, включающее списки, таблицы и т.д. Такую, «полноценную», трактовку элемента параграфа мы получим лишь в XHTML 2.0, а, вернее - в HTML 5 (элемент section).

Таблица 2.15 Атрибуты элемента P
Атрибут	Примечание	Описание
id, class	Общие	Идентификаторы элемента
title, style	Общие	Определяет заголовок и стиль элемента
align	Отменен в XHTML 1.1	Определяет выравнивание текста на странице
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup	Общие	Определяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя

Подобно другим элементам уровня блока (DIV и заголовкам), элемент P имеет стандартный набор общих атрибутов и устаревший ALIGN, отвечающий за выравнивание текста (см. таблицу 2.15). Для параграфов, как и в других случаях, ALIGN может принимать все те же 4 значения: Center, Left, Right и Justify, которые заставляют текст выравниваться по центру, левому краю, правому краю и по ширине соответственно:

<p align="justify">Выровненный по ширине абзац</p>
<p style="text-align: justify">Тоже выровненный по ширине абзац</p>

Свойства P

Закрывающий тег: опционально в HTML, требуется в XHTML.
Совместимость: все.
Вложение: недопустимо.
Уникальный: нет.

Элемент BR

Если элемент P фактически разделяет текст на абзацы, то элемент BR просто обрывает текущую строку и начинает новую.

<p>Начало параграфа. <br /> Продолжение параграфа с новой строки.</p>
<br /><br /><br />
Интервал в три строки

Обратите внимание, что элемент BR, во-первых, всегда бывает пустым, а во-вторых, несколько подряд идущих тегов BR не принимаются за один, как P, а создают соответствующий отступ.

Поскольку элемент BR пустой, то список атрибутов для него весьма скромный. Это идентификаторы элемента (ID, CLASS) и заголовок со стилем (TITLE и STYLE), и никаких языковых или «поведенческих» атрибутов. Зато у него есть собственный атрибут CLEAR, который, правда, отменен в современных вариантах языков разметки. Он определяет, с какой позиции должна начинаться следующая строка для случая, когда текст обтекает встроенный объект (например, рисунок) и может принимать одно из значений, перечисленных в таблице 2.16.

Таблица 2.16. Допустимые значения атрибута CLEAR
Значение	Описание
None	Следующая строка начинается как обычно. С таким значением атрибут CLEAR можно не указывать, т.к. он принят по умолчанию
Left	Следующая строка начинается с первой пустой строки с левого края от объекта
Right	Следующая строка начинается с первой пустой строки с правого края от объекта
All	Следующая строка начинается с первой пустой строки после объекта

Различные варианты обрывов строк при обтекании объектов вы можете посмотреть в дополнительно примере, расположенном в Part_2/Text/p_br.html.

Свойства BR

Закрывающий тег: только XHTML.
Совместимость: все.
Вложение: недопустимо (пустой элемент).
Уникальный: нет.

Списки: элементы OL, UL и LI

Обычно списки используются для вывода информации в виде логической последовательности пунктов. В языке HTML для создания двух классических видов списков – нумерованных и ненумерованных служат, соответственно, элементы OL и UL. А элемент LI служит для обозначения элемента (строки) списка. Простейший ненумерованный список состоит из элемента UL и одного или более вложенных в него элементов LI:

<ul>
 <li>Строка – элемент ненумерованного списка</li>
 <li>Еще одна строка в списке</li>
<ul>

Списки могут быть вложенными друг в друга, при этом они могут быть как одного типа, та и разного. Например, в нумерованный список может быть вложен нумерованный, а в него, в свою очередь, можно вложить еще один нумерованный список и так далее. В листинге 2.19 показан пример с вложенным списком (файл nestedlist.html)

Листинг 2.19. Вложенный список

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
 <title>Вложенный список</title>
</head>
<body>
<ol>
 <li>Первая строка нумерованного списка</li>
 <li>Вторая строка нумерованного списка</li>
 <ul>
  <li>Первая строка вложенного ненумерованного списка</li>
  <li>Вторая строка вложенного ненумерованного списка</li>
 </ul>
 <li>Последняя строка нумерованного списка.
</ol>
</body>
</html>

В данном случае создается нумерованный список, который выделяется номерами своих элементов слева от строки. Среди вложенных в OL элементов LI создается ненумерованный список (UL), который, в свою очередь, выделяется маркерами в виде окружности. Таким образом, список, заданный элементом UL, является вложенным списком по отношению к элементу OL. Браузеры выделяют вложенные списки дополнительными отступами (рис. 2.8).

Рис. 2.8. Вложенный список

Элементы списков имеют стандартный набор атрибутов, а так же несколько специальных, отвечающих за оформление списка (и потому отмененных в HTML 4). Все они приведены в таблице 2.17.

Таблица 2.17 Атрибуты элементов OL и UL
Атрибут	Примечание	Описание
id, class	Общие	Идентификаторы элемента
lang, dir	Общие	Информация о языке и направление текста
title, style	Общие	Определяют заголовок и стиль элемента
type	Устаревший	Определяет вид маркера для ненумерованного списка или стиль нумерации – для нумерованного
start	Устаревший, только для OL	Определяет номер первого элемента в нумерованном списке
value	Устаревший, только для LI	Определяет номер элемента LI в нумерованном списке
compact	Устаревший	Заставляет браузер выводить строки списка с обычным интервалом (Netscape 3 и более ранних версий выводил элементы списка с увеличенным интервалом)
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup	Общие	Определяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя

Наиболее интересным является атрибут TYPE, отвечающий за тип нумерации или внешний вид маркеров, в зависимости от типа списка. Для ненумерованного списка он может принимать три значения:

«disk» – маркер в виде жирной точки (принято по умолчанию);
«circle» – маркер в виде окружности;
«square» – маркер в виде квадратика.

Для нумерованных списков выбор значений несколько больше:

«1» – нумерация арабскими цифрами (принято по умолчанию);
«A» – нумерация прописными латинскими буквами;
«a» – нумерация строчными латинскими буквами;
«I» – нумерация прописными римскими цифрами;
«i» – нумерация строчными римскими цифрами.

Различные виды списков, оформленных при помощи атрибута TYPE, вы можете посмотреть на примере файла Text/lists_old.html.

Свойства OL, UL, LI

Закрывающий тег: OL, UL – требуется; LI – опционально в HTML, требуется в XHTML.
Совместимость: все.
Вложение: OL, UL – допустимо; LI – недопустимо.
Уникальный: нет.

Списки определений: элементы DL, DT и DD

Помимо обычных списков, существуют также списки-определения, задаваемые элементом DL. Они состоят из двух частей: определения (DT) и описания (DD). При помощи подобных списков удобно выводить, например, список терминов и их определений. Так, в листинге 2.20 приведен пример списка определений с основными терминами, связанными с тематикой этой книги (см. также файл def_list.html).

Листинг 2.20. Список определений

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
 <title>Списки определений</title>
</head>
<body>
<dl>
 <dt>WWW</dt>
  <dd>Word Wide Web - Всемирная паутина</dd>
 <dt>HTML</dt>
  <dd>HyperText Markup Language - Язык разметки гипертекста</dd>
 <dt>Браузер</dt>
  <dd>Программа для просмотра документов HTML в WWW</dd>
</dl>
</body>
</html>

В примере дан список определений для таких терминов, как WWW, HTML и браузер. На экране это будет представлено в виде, подобном тому, что мы встречаем в словарях или энциклопедиях (рис. 2.9).

Рис. 2.9. Отображение списка определений

Что касается атрибутов, то для элементов, определяющих список определений, имеется все те же стандартные атрибуты, что и для обычных списков. Исключение составляют лишь отсутствие таких специальных атрибутов, как TYPE, START, VALUE и COMPACT.

Свойства DL, DT, DD

Закрывающий тег: DL – требуется; DT, DD – опционально в HTML, требуется в XHTML.
Совместимость: все.
Вложение: DL – допустимо; DT, DD – недопустимо.
Уникальный: нет.

Элементы DIR и MENU

Существовавшие в ранних версиях HTML элементы DIR и MENU дублировали, по сути, элемент UL: первый предназначался для создания списков файлов, второй – для вывода обычного одноколоночного списка. Поскольку браузеры все равно выводили все эти списки одинаково (как UL), то элементы DIR и MENU были отменены в HTML 4 вместе со всеми своими атрибутами. По своей структуре все эти элементы полностью идентичны UL:

<dir>
 <li>Строка 1</li>
 <li>Строка 2</li>
</dir>

ПРИМЕЧАНИЕ
Что касается вывода, то браузер должен выводить список DIR точно так же, как это делает одноименная команда DOS с ключом /W. Но ни одна из графических программ просмотра все равно этого не делает, так что использование всех этих элементов не только нежелательно ввиду их исключения из стандарта, но и лишено всякого смысла.

Атрибуты тегов DIR и MENU, полностью идентичны тем, что определены для UL - см. таблицу 2.17.