Спецификация HTML 4.01
Группирование элементов: элементы DIV и SPAN
7.5.4 Группирование элементов: элементы DIV и SPAN
<!ELEMENT DIV - - (%flow;)* -- общий язык/контейнер стиля --> <!ATTLIST DIV %attrs; -- %coreattrs, %i18n, %events -- > <!ELEMENT SPAN - - (%inline;)* -- общий язык/контейнер стиля --> <!ATTLIST SPAN %attrs; -- %coreattrs, %i18n, %events -- >
Начальный тег: необходим, Конечный тег: необходим
Атрибуты, определённые в другом месте
- id, class (идентификаторы документа)
- lang (язык), dir (направление текста)
- title (заголовок элемента)
- style (инлайн-стиль)
- align (выравнивание)
- onclick, ondblclick,
onmousedown, onmouseup,
onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)
Элементы DIV и SPAN в сочетании с атрибутами id и class предоставляют общий механизм для добавления структуры к документу. Эти элементы определяют содержимое как инлайн (SPAN) или уровня блока (DIV), но не навязывают других идиом представления содержимого. Таким образом, авторы могут использовать эти элементы в сочетании с таблицами стилей, атрибутом lang и т.д. и приспособить HTML к выполнению нужных задач.
Предположим, например, что мы хотим сгенерировать документ HTML, на основе информации из базы данных клиента. Поскольку HTML не имеет элементов, идентифицирующих объект, таких как "client", "telephone number", "email address" и т.д., мы используем DIV и SPAN для достижения желаемого структурного эффекта и представления. Можно использовать элемент TABLE для структурирования информации:
<!-- Пример данных из базы данных клиента: --> <!-- Имя: Stephane Boyera, Tel: (212) 555-1212, Email: sb@foo.org --> <DIV id="client-boyera" class="client"> <P><SPAN class="client-title">Client information:</SPAN> <TABLE class="client-data"> <TR><TH>Last name:<TD>Boyera</TR> <TR><TH>First name:<TD>Stephane</TR> <TR><TH>Tel:<TD>(212) 555-1212</TR> <TR><TH>Email:<TD>sb@foo.org</TR> </TABLE> </DIV> <DIV id="client-lafon" class="client"> <P><SPAN class="client-title">Client information:</SPAN> <TABLE class="client-data"> <TR><TH>Last name:<TD>Lafon</TR> <TR><TH>First name:<TD>Yves</TR> <TR><TH>Tel:<TD>(617) 555-1212</TR> <TR><TH>Email:<TD>yves@coucou.com</TR> </TABLE> </DIV>Позже мы легко можем добавить объявление таблицы стилей для более точной настройки представления объектов этой базы данных.
Другие примеры использования см. в разделе атрибуты class и id.
Визуальные ПА обычно помещают разрыв строки перед и после элементов DIV, например:
<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>что обычно отображается так:
aaaaaaaaa bbbbbbbbb ccccc ccccc