Общая структура документа HTML

Элементы инлайн и уровня блока

Некоторые элементы HTML, которые могут появляться в BODY , называются " элементы уровня блока ", а другие - " inline/инлайн " (известные также как "text level/уровня текста"). Значение может быть выведено из нескольких понятий:

Модель содержимого

Вообще, элементы уровня блока могут содержать инлайн-элементы и другие элементы уровня блока. Вообще, инлайн-элементы могут содержать только данные и другие инлайн-элементы. Сущностью этого структурного отличия является идея, что элементы блока создают более "широкие" структуры, чем инлайн-элементы.

Форматирование

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

Как правило элементы уровня блока начинаются с новой строки, а инлайн-элементы - нет. Информацию о пробелах, разрывах строки и форматировании блоков см. в разделе о "тексте" .

Направление (текста)

По техническим причинам - включение двунаправленного текстового алгоритма "[UNICODE]" , элементы уровня блока и инлайн различаются тем, как они наследуют информацию о направлении. См. детали в разделе "наследование направления текста" .

"Таблицы стилей" предоставляют значения для спецификации представления произвольных элементов, в том числе - элементов уровня блока и инлайн-элементов. В некоторых случаях, таких как инлайн-стиль элементов-списков, это подходит, но в целом авторам не рекомендуется таким образом переопределять согласованную интерпретацию элементов HTML.

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

Группирование элементов: элементы 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