Глава 1.2. Структура HTML-документа

Любой HTML-документ состоит из трех основных секций:

  • строки, содержащей декларацию типа документа;
  • заголовка документа (заключенного в теги <HEAD>…</HEAD>);
  • тела документа (заключенного в теги <BODY>…</BODY> или <FRAMESET>…</FRAMESET>);

Перед каждой секцией и после нее могут находиться символы пробела, табуляции, новой строки и комментарии. Заголовок и тело документа должны быть заключены в теги <HTML>…</HTML>.

Пример простого HTML-документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Мой первый HTML-документ</TITLE>
</HEAD>
<BODY>
<P>Это HTML-документ.</P>
</BODY>
</HTML>

Поясним подробнее содержимое каждой секции.

1.2.1. Декларация типа документа

Поддержка: Internet Explorer Игнорируется
           Netscape Navigator Игнорируется

Рекомендуется начинать любой HTML-документ со строки, содержащей декларацию типа документа (DTD, document type declaration). HTML 4.0 поддерживает три типа таких деклараций:

  • Документ строго соответствует стандарту HTML 4.0, т. е. не содержит ни морально устаревших элементов, ни фреймов. Декларация имеет вид:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
  • Документ является переходным к стандарту HTML 4.0, т. е. может содержать морально устаревшие элементы. Декларация имеет вид:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
  • Документ содержит фреймы. Декларация имеет вид:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">

Поясним структуру приведенных деклараций. Каждая из них говорит о том, что последующий документ является HTML-документом, созданным в соответствии со стандартом HTML 4.0, разработанном W3C. Последние две буквы первой строки декларации обозначают язык DTD, который всегда является английским ( "EN"). Вторая строка декларации содержит URI, откуда обозреватель может загрузить данную DTD.

Примечания.

  1. Многие авторы оформляют эту декларацию в укороченном виде, опуская URI, т. е. так, как указано в приведенном выше примере.
  2. Декларация типа документа является рекомендуемой, но не обязательной частью HTML-документа, поскольку старые обозреватели ее игнорируют. Первым обозревателем, учитывающим ее, стал Netscape 6, который при отсутствии DTD отображает документы в режиме совместимости с Netscape 4, а при ее наличии — в соответствии с Веб-стандартами. Internet Explorer 6 также поддерживает два режима отображения в зависимости от заданной DTD.

WDH+ См. также WDH+: <!DOCTYPE ...> начинает работать.

1.2.2. Элемент HTML

Синтаксис: <HTML>…</HTML> (оба тега не обязательны)
Атрибуты:  lang, dir
Поддержка: Internet Explorer Атрибуты lang и dir игнорируются
           Netscape Navigator Атрибуты lang и dir игнорируются

Этот элемент указывает, что последующий документ является HTML-документом. Он следует за декларацией типа документа и включает в себя все остальное содержимое документа. Он часто содержит атрибут lang, задающий базовый язык документа. Иными словами, типичный HTML-документ имеет следующее строение:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<HTML lang="en">
  …Заголовок и тело документа…
</HTML>

1.2.3. Заголовок документа

1.2.3.1. Элемент HEAD

Синтаксис: <HEAD>…</HEAD> (оба тега не обязательны)
Атрибуты:  lang, dir
           profile = URI (URI словаря метаданных)
Поддержка: Internet Explorer Атрибуты lang, dir и profile игнорируются
           Netscape Navigator Атрибуты lang, dir и profile игнорируются

Заголовок документа, заключенный в элемент HEAD, содержит информацию об общих свойствах документа и не отображается обозревателями. Заголовок может включать в себя следующую информацию:

  • единственный титул документа (TITLE);
  • метаописатели документа (META);
  • базовый URI внешних ссылок (BASE);
  • ссылки на другие документы (LINK);
  • внутренние таблицы стилей (STYLE);
  • сценарии клиента (SCRIPT).

Элемент HEAD может иметь атрибут profile, указывающий местонахождения словаря метаданных. Предполагается, что такой словарь должен содержать имена метапеременных, значения которых определяются элементами META и LINK в заголовке документа, но пока работа по спецификации формата словарей метаданных не завершена.

1.2.3.2. Титул документа: элемент TITLE

Синтаксис: <TITLE>…</TITLE>
Атрибуты:  lang, dir
Поддержка: Internet Explorer Атрибуты игнорируются, титул отображается в заголовке обозревателя
           Netscape Navigator Атрибуты игнорируются, титул отображается в заголовке обозревателя

Каждый HTML-документ должен иметь единственный титул, который отображается обозревателями в строке заголовка. Текст титула может содержать специальные символы, но не должен содержать других элементов. Пример:

<HEAD>
  <TITLE>Справочник Веб-разработчика</TITLE>
</HEAD>

Титул документа должен кратко отражать суть его содержимого; рекомендуемый размер титула — не более 60 символов.

1.2.3.3. Метаописатели документа: элемент META

Синтаксис: <META> (содержимого и конечного тега нет)
Атрибуты:  lang, dir (для атрибута content)
           http-equiv = NAME (заголовок сообщения HTTP)
           name = NAME (название свойства)
           content = CDATA (значение свойства)
           scheme = CDATA (имя схемы, интерпретирующей значение свойства)
Поддержка: Internet Explorer Атрибуты lang, dir и scheme игнорируются (2.0+)
           Netscape Navigator Атрибуты lang, dir и scheme игнорируются (4.0+)

Элемент META содержит метаописатели таких свойств документа, как имя автора документа, его описание, ключевые слова и т. д. Спецификация HTML 4.0 не содержит стандартного списка этих свойств, поэтому авторы пока свободны в их определении.

Каждый элемент META содержит пару атрибутов: название свойства (name) и значение свойства (content), например, следующий метаописатель задает имя автора документа:

<META name="Author" content="Ю. С. Лукач">

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

<META name="Author" lang="en" content="Yury S. Lukach">

Многие поисковые системы используют свойства description (описание документа) и keywords (ключевые слова) для извлечения дополнительной информации о документе. При этом описание должно быть кратким (не длиннее 200 символов), а список ключевых слов разделяться запятыми:

<META name="Description" content="Web Developer's Handbook. HTML Reference.">
<META name="Keywords" content="Web development, HTML reference">

Некоторые поисковые системы поддерживают также свойство robots, содержащее указания для роботов, собирающих информацию о документах в Сети. Значение свойства robots — это список следующих директив, разделенных запятыми:

index эта страница должна быть индексирована
noindex эта страница не должна быть индексирована
follow прослеживать гиперссылки на странице
nofollow не прослеживать гиперссылки на странице
all = index, follow (принято по умолчанию)
none = noindex, nofollow

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

<META name="robots" content="noindex,follow">

Вместо атрибута name метаописатель может содержать атрибут http-equiv для указания того, что данное свойство является заголовком сообщения HTTP. Такие метаописатели указывают обозревателю, как следует отображать данный документ. Существует три базовых свойства документа, которые задаются таким образом:

<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
  • язык таблиц стилей, принятый по умолчанию:
<META http-equiv="Content-Style-Type" content="text/css">
  • язык программирования сценариев, принятый по умолчанию:
<META http-equiv="Content-Script-Type" content="text/javascript">

Кроме того, атрибут http-equiv используется в следующих конструкциях:

<META http-equiv="Expires" content="Sun, 7 May 2000 12:04:32 GMT">
  • задает дату и время истечения срока действия документа: полезен для того, чтобы заставить обозреватель загрузить документ не из кэш-памяти, а с сервера;
<META http-equiv="Refresh" content="10; URL=http://www.newserver.com/newpage.htm">
  • указывает серверу, что через 10 секунд после завершения загрузки текущего документа нужно загрузить вместо него http://www.newserver.com/newpage.htm.

Метаописатели могут также содержать атрибут scheme, задающий формат значения свойства и предусмотренный для использования совместно со словарями метаданных. В настоящее время этот атрибут не обозревателями не поддерживается.

1.2.3.4. Базовый URI документа: элемент BASE

Синтаксис: <BASE> (содержимого и конечного тега нет)
Атрибуты:  href = URI (базовый URI документа)
           target = фрейм (имя фрейма для отображения ссылок)
Поддержка: Internet Explorer Соответствует стандарту
           Netscape Navigator Соответствует стандарту

Элемент BASE задает в обязательном атрибуте href базовый URI для данного документа, который используется обозревателем для приведения относительных URI к полным. Подробности см. в Приложении 2.

Если документ не содержит элемента BASE, то его собственный URI считается базовым по умолчанию. В большинстве случаев этого вполне достаточно, поэтому на практике элемент BASE употребляется только в двух ситуациях:

  • когда документ хранится в нескольких узлах Сети, и мы хотим указать "эталонное" хранилище;
  • когда URI документа неизвестен (например, при его получении по электронной почте).

Рассмотрим следующий пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
  <TITLE>Наша продукция</TITLE>
  <BASE href="http://www.bestseller.com/products/intro.html">
</HEAD>
<BODY>
  <P>Лучшие в мире <A href="../images/hornhoof.gif">рога и копыта</A>!
</BODY>
</HTML>

С учетом базового URI ссылка "../images/hornhoof.gif" в этом примере соответствует полному URI "http://www.bestseller.com/images/hornhoof.gif".

Необязательный атрибут target используется только во фреймовых документах и задает имя фрейма, в котором должны отображаться по умолчанию все документы, на которые в данном документе имеются ссылки.

1.2.3.5. Взаимосвязь документов: элемент LINK

Синтаксис: <LINK> (содержимого и конечного тега нет)
Атрибуты:  id, class, style, title, lang, dir, события
           rel = типы ссылок (прямая ссылка)
           rev = типы ссылок (обратная ссылка)
           href = URI (URI ссылки)
           target = фрейм (имя фрейма для отображения ссылки)
           type = тип файла (тип файла, на который указывает ссылка)
           media = устройства (устройства для отображения ссылки)
           hreflang = код языка (язык ссылки)
           charset = кодировка (кодировка ссылки)
Поддержка: Internet Explorer Атрибуты type, hreflang и charset игнорируются;
              допустимые значения media: screen, print и all (5.0+)
           Netscape Navigator Атрибуты type, media, hreflang и charset игнорируются (4.0+)

Элемент LINK определяет взаимосвязь между документами. Заголовок документа может содержать любое количество этих элементов. Многие обозреватели не поддерживают элементы LINK, поэтому авторы не должны полагаться на то, что обозреватель сделает перечисленные в них ссылки доступными пользователю.

Каждый элемент LINK должен содержать атрибут rel или rev и атрибут href. При этом атрибут rel определяет прямую ссылку, а атрибут rev — обратную ссылку. Например,

<LINK rel="Glossary" href="glossary.html">

означает, что документ glossary.html является глоссарием терминов для текущего документа (прямая ссылка), а

<LINK rev="Subsection" href="section2.html">

означает, что текущий документ является подразделом документа section2.html (обратная ссылка). Значением атрибутов rel и rev является список типов ссылок, разделенных пробелами.

Важным применением элемента LINK является подключение к документу внешней таблицы стилей. В этом случае элемент LINK имеет вид:

<LINK rel="StyleSheet" href="style.css" type="text/css">

Такой элемент может дополнительно содержать атрибут media для указания того, к отображению на каких устройствах применяется данная таблица стилей:

<LINK rel="StyleSheet" href="aural.css" type="text/css" media="aural">

Необязательный атрибут target используется только во фреймовых документах и задает имя фрейма, в котором должна отображаться по умолчанию цель ссылки.

Наконец, атрибуты hreflang и charset указывают на язык и кодировку ссылки и предназначены для указания поисковым системам, где искать альтернативные версии данного документа. Для этого используется тип ссылки Alternate:

<LINK
  rel="Alternate"
  type="text/html"
  href="indexru.htm"
  hreflang="ru"
  charset="windows-1251"
  lang="ru" title="Русская версия">
<LINK
  rel="Alternate"
  type="text/html"
  href="indexfr.htm"
  hreflang="fr"
  lang="fr" title="Version francaise">

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

<LINK
  rel="Alternate"
  media="print"
  lang="ru" title="Справочник в формате PostScript"
  type="application/postscript"
  href="manual.ps">

В частности, альтернативная внешняя таблица стилей может быть задана элементом:

<LINK rel="Alternate StyleSheet" href="style.css" type="text/css" media="...">

1.2.3.6. Внутренние таблицы стилей: элемент STYLE

Синтаксис: <STYLE>…</STYLE>
Атрибуты:  lang, dir
           type = тип файла (тип таблицы стилей)
           media = устройства (устройства для отображения документа)
           title = текст (титул таблицы стилей)
Поддержка: Internet Explorer Атрибуты lang и dir игнорируются;
              допустимые значения media: screen, print и all (5.0+)
           Netscape Navigator Атрибуты lang, dir и media игнорируются (4.0+)

Элемент STYLE позволяет включать в документ внутренние таблицы стилей. Заголовок документа может содержать любое количество этих элементов. Старые обозреватели не поддерживают элементы STYLE, поэтому рекомендуется заключать содержимое элемента STYLE в комментарий, как показано ниже.

Обязательный атрибут type указывает на тип таблицы стилей, т. е. на язык, на котором описываются стили. Для каскадных таблиц стилей этот атрибут всегда должен иметь значение "text/css". Пример:

<HEAD>
  <STYLE type="text/css">
  <!--
    H1 {border-width: 1; border: solid; text-align: center}
  -->
  </STYLE>
</HEAD>
<BODY>
  <H1>Этот заголовок имеет указанный выше стиль</H1>
</BODY>

HTML позволяет авторам создавать документы, учитывающие особенности устройств, на которых документ будет отображаться. Для того, чтобы использовать разные таблицы стилей для различных устройств, включите в элемент STYLE атрибут media:

<STYLE type="text/css" media="screen">
<!--
  H1 {color: blue}
-->
</STYLE>
<STYLE type="text/css" media="print">
<!--
  H1 {text-align: center}
-->
</STYLE>

1.2.4. Тело документа: элемент BODY

Синтаксис: <BODY>…</BODY> (оба тега не обязательны)
Атрибуты:  id, class, style, title, lang, dir, события
           onload = сценарий (документ загружен)
           onunload = сценарий (документ выгружен)
Поддержка: Internet Explorer Атрибуты lang и dir игнорируются
           Netscape Navigator Атрибуты lang и dir игнорируются

Тело документа содержит HTML-элементы, предназначенные для отображения обозревателем. Тело заключается в теги <BODY>…</BODY> или <FRAMESET>…</FRAMESET>, если документ содержит фреймы (о них см. Главу 1.7). Напомним, что наше описание не включает морально устаревшие элементы и атрибуты. Поэтому элемент BODY должен использовать только общие атрибуты и два нестандартных обработчика событий:

  • onload — происходит, когда обозреватель завершил загрузку документа в окно;
  • onunload — происходит, когда обозреватель завершил удаление документа из окна.

Все остальные атрибуты тела документа являются морально устаревшими и должны заменяться на стили CSS, например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
  BODY { background: white; color: black}
  A:link { color: red }
  A:visited { color: maroon }
  A:active { color: purple }
</STYLE>
</HEAD>
<BODY>
  …тело документа…
</BODY>
</HTML>

1.2.5. Блочные и текстовые элементы

Большинство элементов HTML, используемых в теле документа, подразделяются на блочные (block-level) и текстовые (inline) элементы. Блочные элементы могут содержать как текстовые элементы, так и другие блочные элементы. При отображении они всегда выводятся как отдельный абзац. Текстовые элементы могут содержать только текст и другие текстовые элементы, но не могут содержать блочных элементов. При отображении они выводятся в текущей строке.

Ниже при описании каждого из элементов HTML мы указываем, к какому из этих двух типов он относится.