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

Атрибут title

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

title = text [CS]

Этот атрибут предоставляет информативные данные об элементе, в котором он содержится.

В отличие от элемента TITLE, который даёт информацию обо всём документе и может появиться в документе только один раз, атрибут title может содержаться в любом количестве элементов. См. определения элементов, чтобы удостовериться, что они поддерживают этот атрибут.

Значения атрибута title по разному могут рассматриваться ПА. К примеру, визуальные браузеры часто отображают title как "подсказку" (краткое сообщение, появляющееся при наведении указательного устройства на объект). Аудио ПА могут "произносить" информацию заголовка в аналогичном контексте. Например, установка этого атрибута для гиперссылки позволяет ПА (визуальным и не-) сделать сообщение о связанном ресурсе:

...какой-нибудь текст...
Here's a photo of 
<A href="http://someplace.com/neatstuff.gif" title="Me scuba diving">
   me scuba diving last summer
</A>
...ещё какой-нибудь текст...

Атрибут title при использовании с элементом LINK дополнительно играет роль указателя на внешнюю таблицу стилей. См. детали в разделе гиперссылки и таблицы стилей.

Метаданные

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

Например, чтобы специфицировать автора документа, можно использовать элемент META:

<META name="Author" content="Dave Raggett">

Элемент META определил свойство (здесь - "Author") и установил ему значение (здесь - "Dave Raggett").

Эта спецификация не определяет набор действительных свойств метаданных. Значение свойства и набор действительных значений для этого свойства должны быть определены в справочном словаре, называемом профиль. Например, профиль, созданный для помощи поисковым машинам при индексировании документов, может определять свойства, такие как " author ", " copyright ", " keywords " и т.д.

Спецификация метаданных

Вообще спецификация метаданных состоит из двух шагов:

Учтите, что, поскольку профиль определён для элемента HEAD, этот же профиль применяется и для всех элементов META и LINK в "шапке" документа.

От ПА не требуется поддержка механизма метаданных. Для тех ПА, которые поддерживают метаданные, эта спецификация не определяет, как метаданные должны интерпретироваться.

Элемент META

<!ELEMENT META - O EMPTY               -- родовая метаинформация -->
<!ATTLIST META
  %i18n;                                -- lang, dir, для использования с этим содержимым --
  http-equiv  NAME           #ПРЕДПОЛАГАЕТСЯ  -- HTTP имя заголовка ответа --
  name        NAME           #ПРЕДПОЛАГАЕТСЯ  -- имя метаинформации --
  content     CDATA          #НЕОБХОДИМ       -- ассоциированная информация --
  scheme      CDATA          #ПРЕДПОЛАГАЕТСЯ  -- выбор формы содержимого --
  >

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

Для следующих атрибутов допустимые значения и их интерпретация зависят от profile:

name = name [CS]

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

content = cdata [CS]

Определяет значение свойства. Эта спецификация не содержит списка действительных значений для этого атрибута.

scheme = cdata [CS]

Этот атрибут именует схему, используемую для интерпретации значения свойства (см. детали в разделе профили).

http-equiv = name [CI]

Этот атрибут может использоваться вместо атрибута name. HTTP серверы используют этот атрибут для получения информации для заголовка ответа HTTP.

Атрибут, определённый в другом месте

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

Каждый элемент META определяет пару свойство-значение. Атрибут name идентифицирует свойство, а атрибут content определяет значение свойства.

Например, следующее объявление устанавливает значение для свойства Author:

<META name="Author" content="Dave Raggett">

Атрибут lang может использоваться элементом META для определения языка значения атрибута content. Это делает возможным использование речевого синтеза, устанавливая зависящие от языка правила произношения.

В этом примере имя автора объявляется как французское:

<META name="Author" lang="fr" content="Arnaud Le Hors">

<META name="DC.identifier"
      content="http://www.ietf.org/rfc/rfc1866.txt">

<LINK rel="DC.identifier"
         type="text/plain"
         href="http://www.ietf.org/rfc/rfc1866.txt">

META и заголовок HTTP

Атрибут http-equiv может использоваться вместо атрибута name и имеет специальное значение при возврате документов по протоколу Hypertext Transfer Protocol (HTTP). HTTP серверы могут использовать имя свойства, специфицированное атрибутом http-equiv, для создания заголовка в стиле [RFC822] для ответа HTTP. См. спецификацию HTTP ([RFC2616]) о правильных "шапках" HTTP.

Следующая выдержка из объявления META:

<META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">

даст в результате "шапку" HTTP:

Expires: Tue, 20 Aug 1996 14:25:27 GMT

Это может использоваться при кэшировании для определения того, когда вызывать свежую копию ассоциированного документа.

META и машины поиска

Обычно META специфицирует ключевые слова, которые используются поисковыми машинами для повышения качества и скорости поиска. Если несколько элементов META предоставляют информацию, связанную с языком документа, поисковые машины могут осуществлять фильтрацию на основе атрибута lang для отображения результата поиска с использованием языковых установок пользователя. Например,

<-- Для говорящих на американском английском -->
<META name="keywords" lang="en-us" 
         content="vacation, Greece, sunshine">
<-- Для говорящих на британском английском -->
<META name="keywords" lang="en" 
         content="holiday, Greece, sunshine">
<-- Для говорящих на французском -->
<META name="keywords" lang="fr" 
         content="vacances, Gregrave;ce, soleil">

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

См. дополнительно раздел помощь машинам поиска в индексации Вашего Web-сайта.

META и PICS

Platform for Internet Content Selection/Платформа для Выбора Содержимого Internet (PICS, специфицированная в [PICS]) это инфраструктура для ассоциирования лэйблов ( метаданных ) с содержимым Internet. Созданная первоначально как помощь родителям и педагогам для контроля за тем, к чему дети могут получить доступ в Internet, она также даёт возможность использовать лэйблы для пометок кода, политики безопасности и обслуживания прав интеллектуальной собственности.

Этот пример иллюстрирует, как можно использовать объявление META для включения лэйбла PICS 1.1:

<HEAD>
 <META http-equiv="PICS-Label" content='
 (PICS-1.1 "http://www.gcf.org/v2.5"
    labels on "1994.11.05T08:15-0500"
      until "1995.12.31T23:59-0000"
      for "http://w3.org/PICS/Overview.html"
    ratings (suds 0.5 density 0 color/hue 1))
 '>
  <TITLE>... заголовок документа ...</TITLE>
</HEAD>

META и информация по умолчанию

Элемент META может использоваться для спецификации информации по умолчанию для следующих объектов документа:

В следующем примере определён набор символов документа - ISO-8859-5:

<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5">

Профили метаданных

Атрибут profile элемента HEAD определяет размещение профиля метаданных. Значением атрибута profile является URI. ПА могут использовать этот URI двумя способами:

Это пример ссылки на гипотетический профиль, определяющий используемые свойства для индексации документа. Свойства, определённые этим профилем, включая " author ", " copyright ", " keywords " и " date ", имеют свои значения, установленные последовательными объявлениями META:

<HEAD profile="http://www.acme.com/profiles/core">
 <TITLE>How to complete Memorandum cover sheets</TITLE>
 <META name="author" content="John Doe">
 <META name="copyright" content="© 1997 Acme Corp.">
 <META name="keywords" content="corporate,guidelines,cataloging">
 <META name="date" content="1994-11-06T08:49:37+00:00">
</HEAD>

Атрибут scheme позволяет авторам предоставлять ПА информацию, более подходящую для корректной интерпретации метаданных. Иногда такая дополнительная информация может быть критичной, если метаданные специфицированы в другом формате. Например, автор может установить дату в (неоднозначном) формате "10-9-97", что может означать 9 октября 1997 или 10 сентября 1997 г. Значение атрибута scheme " Month-Day-Year " может однозначно определить значение этой даты.

В других случаях, атрибут scheme может предоставлять дополнительную не критичную информацию для ПА.

Например, следующее объявление scheme может помочь ПА определить, что значение свойства " identifier " - это код ISBN:

<META scheme="ISBN"  name="identifier" content="0-8230-2355-9">

Значения атрибута scheme зависят от свойства name и ассоциированного profile.

Тело документа

Элемент BODY

<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- тело документа -->
<!ATTLIST BODY
  %attrs;                                    -- %coreattrs, %i18n, %events --
  onload          %Script;   #ПРЕДПОЛАГАЕТСЯ  -- документ был загружен --
  onunload        %Script;   #ПРЕДПОЛАГАЕТСЯ  -- документ был удалён --
  >

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

background = uri [CT]

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

text = color [CI]

Не рекомендуется. Устанавливает цвет текста (для визуальных браузеров).

link = color [CI]

Не рекомендуется. Цвет непосещённых гиперссылок (для визуальных браузеров).

vlink = color [CI]

Не рекомендуется. Цвет посещённых гиперссылок (для визуальных браузеров).

alink = color [CI]

Не рекомендуется. Цвет гиперссылок при выборе пользователем (для визуальных браузеров).

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

В теле документа находится содержимое документа. Содержимое может быть представлено ПА разными способами. Например, для визуальных ПА можно представить тело как канву, на которой появляется содержимое: текст, изображения, цвета, графика и т.д. В аудио ПА то же содержимое может быть звучащей речью. Поскольку сейчас предпочтительно использование таблиц стилей для спецификации представления документа, атрибуты представления BODY не рекомендуются.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
 <TITLE>A study of population dynamics</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
  link="red" alink="fuchsia" vlink="maroon">
  ... тело документа...
</BODY>
</HTML>

Использование таблиц стилей приведёт к тому же результату:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>A study of population dynamics</TITLE>
 <STYLE type="text/css">
  BODY { background: white; color: black}
  A:link { color: red }
  A:visited { color: maroon }
  A:active { color: fuchsia }
 </STYLE>
</HEAD>
<BODY>
  ... тело документа...
</BODY>
</HTML>

Использование внешних (связанных) таблиц стилей позволяет более гибко управлять представлением, не пересматривая документ-источник HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>A study of population dynamics</TITLE>
 <LINK rel="stylesheet" type="text/css" href="smartstyle.css">
</HEAD>
<BODY>
  ... тело документа...
</BODY>
</HTML>

Идентификаторы элемента: атрибуты id и class

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

id = name [CS]

Устанавливает имя элемента. Имя должно быть уникальным для данного документа.

class = cdata-list [CS]

Устанавливает имя класса или набор имён классов для элемента. Любому количеству элементов может быть назначено то же имя или имена класса. Множественные имена классов могут разделяться пробельными символами.

Атрибут id назначает элементу уникальный идентификатор (который может проверяться разборщиком SGML). Например, следующие параграфы различаются значениями своих id :

<P id="myparagraph"> Этот параграф имеет уникальное имя.</P>
<P id="yourparagraph"> Этот параграф тоже имеет уникальное имя.</P>

Атрибут id имеет несколько ролей в HTML:

Атрибут class одновременно назначает элементу одно или более имён классов; можно сказать, что элемент принадлежит данным классам. Имя класса может разделяться несколькими объектами элемента. Атрибут class имеет несколько ролей в HTML:

В следующем примере элемент SPAN используется вместе с атрибутами id и class для разметки сообщений документа. Сообщения появляются в английской и французской версиях.

<!-- Сообщения на английском -->
<P><SPAN id="msg1" class="info" lang="en">Variable declared twice</SPAN>
<P><SPAN id="msg2" class="warning" lang="en">Undeclared variable</SPAN>
<P><SPAN id="msg3" class="error" lang="en">Bad syntax for variable name</SPAN>

<!-- Сообщения на французском -->
<P><SPAN id="msg1" class="info" lang="fr">Variable deacute;clareacute;e deux fois</SPAN>
<P><SPAN id="msg2" class="warning" lang="fr">Variable indeacute;finie</SPAN>
<P><SPAN id="msg3" class="error" lang="fr">Erreur de syntaxe pour variable</SPAN>

Следующие правила CSS (Каскадной Таблицы Стилей) могут сообщить визуальным ПА, что необходимо отобразить информационные сообщения зелёным цветом, предупреждения - жёлтым, а ошибки - красным:

SPAN.info    { color: green }
SPAN.warning { color: yellow }
SPAN.error   { color: red }

Обратите внимание, что французское " msg1 " и английское " msg1 " не могут появляться в одном документе, поскольку они разделяют одно значение id . Авторы могут также использовать атрибут id для уточнения представления определённых сообщений, делать их якорями назначения и т.п.

Почти любому элементу HTML может быть назначен идентификатор и информация класса.

Предположим, например, что мы создаём документ о языке программирования. Документ содержит несколько отформатированных примеров. Мы используем элемент PRE для форматирования примеров. Мы назначаем также цвет фона (зелёный) всем объектам элемента PRE, принадлежащих классу " example ".

<HEAD>
<TITLE>... заголовок документа ...</TITLE>
<STYLE type="text/css">
PRE.example { background : green }
</STYLE>
</HEAD>
<BODY>
<PRE class="example" id="example-1">
...здесь - код примера...
</PRE>
</BODY>

Установив в этом примере атрибут id , мы можем

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

Некоторые элементы 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 --
  >

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

Элементы 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

Заголовки: элементы H1, H2, H3, H4, H5, H6

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">
<!--
  имеется шесть уровней заголовков: от H1 (самый верхний)
  до H6 (самый нижний).
-->

<!ELEMENT (%heading;)  - - (%inline;)* -- заголовок
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

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

Элемент heading кратко описывает смысл раздела, которому он предшествует. Информация заголовка может использоваться ПА, например, для автоматического создания оглавления документа.

Имеется шесть уровней заголовков HTML: от H1 (самый крупный/верхний) до H6. Визуальные браузеры обычно отображают более значительный заголовок более крупным шрифтом.

В этом примере видно, как с помощью элемента DIV ассоциировать заголовок с разделом документа, который следует за ним. Это позволит Вам определить таблицу стилей для данного раздела (фон, шрифт и т.д.).

<DIV class="section" id="forest-elephants" >
<H1>Forest elephants</H1>
<P>In this section, we discuss the lesser known forest elephants.
...раздел продолжается...
<DIV class="subsection" id="forest-habitat" >
<H2>Habitat</H2>
<P>Forest elephants do not live in trees but among them.
...этот раздел продолжается...
</DIV>
</DIV>

Эта структура может быть украшена с помощью таблицы стилей:

<HEAD>
<TITLE>... заголовок документа ...</TITLE>
<STYLE type="text/css">
DIV.section { text-align: justify; font-size: 12pt}
DIV.subsection { text-indent: 2em }
H1 { font-style: italic; color: green }
H2 { color: green }
</STYLE>
</HEAD>

Элемент ADDRESS

<!ELEMENT ADDRESS - - (%inline;)* -- информация об авторе -->
<!ATTLIST ADDRESS
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

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

Элемент ADDRESS может использоваться авторами для указания контактной информации в документе или в большой части документа, например, в форме. Этот элемент часто появляется в начале или в конце документа.

Например, страница на W3C Web-сайте, относящаяся к HTML, может содержать следующую контактную информацию:

<ADDRESS>
<A href="../People/Raggett/">Dave Raggett</A>, 
<A href="../People/Arnaud/">Arnaud Le Hors</A>, 
contact persons for the <A href="Activity">W3C HTML Activity</A><BR> 
$Date: 1999/12/24 23:07:14 $
</ADDRESS>