Теги DIV и SPAN — группировка

Блочные теги

Группировка элементов: элементы DIV и SPAN

Начальный тег: обязателен, Конечный тег: обязателен

Определения атрибутов

href = uri [CT]
Этот атрибут указывает ресурс, предоставляющий дополнительную информацию о содержимом элемента DIV или SPAN.

Атрибуты, определяемые в любом другом месте

  • id, class (идентификаторы в пределах документа)
  • lang (информация о языке), dir (направление текста)
  • title (заголовок элемента)
  • style (встроенная информация о стиле information)
  • align (выравнивание)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover,
    onmousemove, onmouseout, onkeypress, onkeydown,
    onkeyup(внутренние события)

Элементы DIV и SPAN вместе с атрибутами id и class обеспечивают общий механизм добавления в документы структуры. Эти элементы определяют встраиваемую информацию (SPAN) или информацию уровня блока (DIV), но не налагают никаких других выражений для представления контекста. Таким образом, авторы могут использовать эти элементы с таблицами стилей, атрибутамиlang и т.д..

Предположим, Вы хотите сгенерировать документ в формате HTML на основе базы данных информации о клиентах. Поскольку HTML не включает элементов для идентификации таких объектов как «клиент», «номер телефона», «адрес электронной почты» и т.д., мы используем элементы DIV и SPAN для достижения нужных эффектов структуры и представления. Для структурирования информации мы могли использовать элемент TABLE следующим образом:

<!-- Пример данных из базы данных о клиентах: -->
<!-- Имя: Stephane Boyera, Тел.: (212) 555-1212, Email: sb@foo.org -->

<DIV id="client-boyera">
<P><SPAN>Информация о клиенте:</SPAN>
<TABLE>
<TR><TH>Фамилия:<TD>Boyera</TR>
<TR><TH>Имя:<TD>Stephane</TR>
<TR><TH>Тел:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>
</TABLE>
</DIV>

<DIV id="client-lafon">
<P><SPAN>Информация о клиенте:</SPAN>
<TABLE>
<TR><TH>Фамилия:<TD>Lafon</TR>
<TR><TH>Имя:<TD>Yves</TR>
<TR><TH>Тел:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>yves@coucou.com</TR>
</TABLE>
</DIV>

Затем мы легко сможем добавить объявление таблицы стиля для настройки представления этих записей.

Другой пример см. в разделе об атрибутах class и id.

Визуальные агенты пользователей обычно помещают символ перевода строки перед и после элементов DIV, например:

<P>ааааааааа<DIV>ббббббббб</DIV><DIV>ввввв<P>ввввв</DIV>

что обычно генерируется как:

ааааааааа
ббббббббб
ввввв

ввввв