16. Группировка контента.

О визуальном оформлении:

• по умолчанию в браузере при отображении текста последовательность из нескольких пробельных символов заменяется одним пробелом
• текст не разбивается на абзацы
• текст растягивается на всю ширину окна браузера

Для группировки контента HTML предлагает контейнерные элементы div, p, pre, blockquote, hr, ol, ul, dl, figure.

Все перечисленные элементы являются блочными:

• занимают всю доступную ширину контейнера;
• высота элемента определяется его содержимым;
• элемент всегда начинается с новой строки.

div

Элемент div позволяет создать универсальный контейнер-блок. Основная идея использования – выделение фрагмента и дальнейшая настройка его при помощи CSS. В этом смысле div является блочным аналогом span.

p

Элемент p определяет текстовый абзац. Абзацы, идущие друг за другом, разделяются между собой отбивкой. По стандарту закрывающий тег обязателен. Если его нет, считается, что конец абзаца совпадает с началом следующего абзаца или другого блочного элемента. Внутри абзаца не должны встречаться элементы p. Несколько пустых абзацев подряд отображаются как один пустой абзац (и не занимаю места на странице).

Выравниванием текста внутри абзаца управляет атрибут align (justify – растягивает текст по ширине, вставляя дополнительные пробелы):

align="left|center|right|justify"

Атрибут align объявлен в HTML5 устаревшим!

pre

Контейнерный элемент pre определяет блок предварительно форматированного текста. Такой текст отображается (по умолчанию) моноширинным шрифтом и со всеми пробелами.

blockquote

Контейнерный элемент blockquote выделяет цитату внутри документа как блок (отступы слева и справа, отбивка сверху и снизу). При необходимости атрибут cite позволяет указать источник цитаты.

<blockquote cite="http://en.wikipedia.org/wiki/Apple">
Apple
</blockquote>

hr

Автономный элемент hr рисует горизонтальную линию. В HTML5 ему придали семантическое значение: переход к новой теме в рамках параграфа.

Элемент hr имеет набор собственных атрибутов (все они устарели в HTML5):

• align выравнивание линии
• color цвет линии (и отмена 3D-эффектов)
• noshade (логический) рисует линию без 3D-эффектов
• size толщина линии в пикселях
• width ширина линии в процентах или пикселах

Cписки

Список – взаимосвязанный набор отдельных фраз, которые начинаются с маркера или цифры. В HTML списки представлены блочными элементами ul (маркированный список) и ol (нумерованный список). Каждый элемент списка заключается в контейнер li.

У элемента ul есть атрибут type, который управляет видом маркера (disc|circle|square).

Для ol допустимы атрибуты type (A|a|I|i|1), start (число, с которого будет начинаться список), reversed (логический, нумерация по убыванию (3,2,1)).

Внимание: атрибут type устарел в HTML5 (и для ul, и для ol). А атрибут reversed не поддерживается в IE.

У элемента li можно указать атрибут type (возможные значения зависят от обрамляющего списка), а при помощи атрибута value задать конкретное значение (для нумерованных списков). Атрибут type устарел в HTML5.

Список определений - особая разновидность списка, каждое вхождение состоит из термина и определения.

Зачем: глоссарий, диалоги, пары «ключ-значение».

Сам список – контейнер dl, термин – элемент dt, определение термина – элемент dd (dt и dd находятся на одном уровне вложенности).

<dl>
<dt>HTML-документ</dt>
<dd>
Обычный текстовый файл, который может содержать...
</dd>
</dl>

Фигуры

В HTML5 появился новый элемент для группировки – figure. Семантическое назначение – создать логически неделимую единицу контента из группы элементов и подписи.

Для задания подписи следует использовать элемент figcaption. Он должен быть первым или последним элементом в контейнере figure.

<figure>
<figcaption>Listing 23. Using the code element</figcaption>
<code>
var fruits = ["apples", "oranges", "mangoes", "cherries"];<br>
document.writeln("I like " + fruits.length + " fruits");
</code>
</figure>
<figure>

main

Элемент main (HTML5) описывает группу основного контента (это не секции, хотя похоже).

W3C HTML 5.1 – в документе не более одного main; HTML Living Standard – количество main не ограничено.

IE не поддерживает main (а Edge – поддерживает).