3.2. Корневой элемент (определение границ документа)

Тэг <html> определяет границы документа html, ему соответствует конечный тэг </html>. Между этими двумя тэгами располагается собственно весь документ. Как и <! DOCTYPE> тэги <html> и </html> - не являются строго обязательными. Но, все-таки, их использование является правилами хорошего тона т.к. браузеры у пользователей могут быть всякие и не известно - насколько корректно они визуализируют такой код

Документы XHTML и HTML имеют один и только один корневой элемент. Этот элемент включает в себя все остальные элементы.

Синтаксис

<html [атрибуты]>...</html>

Атрибуты

Атрибуты интернационализации: lang, xml:lang

id="text" {только XHTML)

title = "text"

xmlns="http: / /www. w3. org/1999/xhtml" {Обязателен; только XHTML)

version="-//w3c//dtd html 4 .01//en" {Устаревший в HTML 4.01)

Все элементы документа содержатся в корневом элементе (говорят, что они являются потомками корневого элемента). Будучи корневым элементом, элемент html не может иметь предков (иными словами, не может содержаться внутри другого элемента).

В данном примере показан корневой элемент в XHTML-документе:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >

Поскольку это XHTML-документ, элемент html используется для указания пространства имен XML и языка документа.

В HTML-документах пространства имен не используются.

Пространство имен. Пространство имен (namespace) XML - это набор имен элементов и атрибутов, определенных в DTD конкретного языка разметки. В XML-документах вы должны явным образом указать пространство имен, чтобы клиент (в данном случае браузер) знал, что вы используете элемент q как цитату (quote), а не как вопрос (question), как это теоретически могло бы быть в каком-то другом XML-языке.

Пространства имен указываются с помощью атрибута xmlns в корневом элементе html. Значением этого атрибута указывается местоположение онлайновой документации по этому пространству имен. Идентификатор пространства имен для XHTML 1.0 и 1.1 является xmlns="http://www.w3.org/1999/xhtml".

Язык. Поскольку Web является всемирной, в HTML-спецификациях учитывается, что документы публикуются на самых разных языках. Поэтому важно указать язык, на котором написан документ (например, lang="en"). В XML-версии язык указывается так:

xml: lang="en".

В Рекомендации XHTML 1.0 предлагается включать в документ оба атрибута для обеспечения обратной совместимости.

Атрибут title добавляет поясняющий текст в виде всплывающей подсказки, которая отображается, когда курсор мыши задерживается в окне Web-страницы.

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

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

Синтаксис

<head[атрибуты]>...</head>

Атрибуты

Атрибуты интернационализации: lang, xml: lang, dir

id="text" (только XHTML)

profile="URL"

Каждый элемент head должен включать в себя элемент title, который содержит описание документа. Элемент head также может включать любой из следующих элементов в любом порядке: script, style, meta, link, object, isindex и base. Элемент head служит просто контейнером для этих элементов и не имеет своего собственногоо содержимого.

Рекомендуется, чтобы HTML-документы (и XHTML-документы без объявления XML) также содержали элемент meta, в котором указывается тип содержания и кодировка символов документа, хотя этот элемент и не является обязательным.

Другие элементы заголовка. К другим полезным HTML-элементам, помещаемым в элемент head документа, относятся:

base

Элемент <base /> указывает базовый адрес текущего документа, который служит отправной точкой для относительных адресов внутри документа (например, в атрибутах href элемента анкера <a>). Обязательно присутствие хотя бы одного из атрибутов: href и target. Значением атрибута href является базовый URL адрес для текущего документа. Значение атрибута target определяет имя фрейма, которое будет использоваться в гиперссылках по умолчанию. Например:

<base href="http://foo.com/index.html" target=”first” />

link

Элемент <link /> определяет взаимосвязь между текущим документом и другим ресурсом (файлом). С его помощью можно обозначать такие отношения, как индекс (index), следующий (next) и предыдущий (previous), связи документа с внешней таблицей стилей, с файлом, содержащим сценарий и др.

Атрибут rel указывает на отношение связанного документа к текущему. Например

<link rel="Next" href="next.htm" />

<link rel="Prev" href="prev.htm" />,

где атрибут href указывает адрес связанного документа, а атрибут rel указывает на предыдущий (prev) или последующий (next) это документ по отношению к текущему.

Другой пример

<link rel="stylesheet" href="style.css" type="text/css" />

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

rel = “stylesheet” указывает на то, что связанный документ является таблицей стилей,

href = “style.css” указывает на связанный файл,

type="text/css" определяет тип связанного документа (значение text/css указывает, что это текстовые данные, которые содержат каскадные таблицы стилей).

style

Еще одним методом связывания таблицы стилей с HTML-документом является встраивание его в заголовок документа при помощи элемента style.

Элемент <style> </style> предназначен для размещения внедренных таблиц стилей в документ. Например

<head>

<style type="text/css"> Описание стилей </style>

</head>,

где type="text/css" указывает, что это текстовые данные, которые содержат каскадные таблицы стилей.

script

С помощью этого элемента в заголовок документа можно добавить код JavaScript или VBScript.

meta

Элемент <meta /> используется для включения информации о документе, такой, как кодировка символов, дата создания, автор, копирайт, список ключевых слов и т.д.

Синтаксис

<meta [атрибуты]/>

Атрибуты

Интернационализация: lang, xml:lang

id="text" (только XHTML)

content="text" (Обязательный)

http-equiv="text"

Данные, включаемые в элемент meta, могут использовать серверы, Web-браузеры и поисковые системы, но для читателя они невидимы. Этот элемент всегда должен помещаться в элемент head документа.

В документе может использоваться несколько элементов meta. Существует два типа элементов meta, в которых используется либо атрибут name, либо атрибут http-equiv. В любом случае необходим атрибут content, в котором указывается значение (или значения) именованной информации или функции. В приведенном примере показан синтаксис обоих типов элементов meta:

<meta http-equiv="name" content="content" />

<meta name="name" content="content" />

Атрибут http-equiv. Информация, указанная в атрибуте http-equiv, обрабатывается так, как если бы она пришла в заголовке HTTP-ответа. Заголовки HTTP сдержат информацию, которую сервер передает браузеру непосредственно перед отправкой HTML-документа, например информацию о типе данных (media type), и другие значения, влияющие на работу браузера. Следовательно, атрибут http-equiv предлагает информацию, которая будет, с зависимости от описания, изменять способ обработки документа браузером.

Заголовок HTTP - это не то же самое, что заголовок в элементе head HTML-документа. HTTP-заголовки существуют вне текстовых документов HTML, и их добавляет сервер. Если документ запрашивается через HTTP-запрос (т. е. через Web), то HTTP-заголовок присоединяется, чтобы дать браузеру представление о том, какой тип документа ожидать. Его содержимое не отображается.

Атрибут name. Атрибут name используется для вставки скрытой информации о документе, которая не соответствует HTTP-заголовкам. Например:

<meta name="author" content="Jennifer Niederst Robbins" />

<meta name="copyright" content="2010, O'Reilly Media" />

Вы можете создавать свои собственные элементы name или использовать один из предложенных компаниями-производителями поисковых систем и браузеров для стандартизации.

Указание типа информации и кодировки символов. Рекомендуется (хотя и не является обязательным), чтобы тип информации и кодировка символов указывались внутри документов (X)HTML, чтобы эта информация сохранялась в документе.

Делается это при помощи элемента meta, как показано в следующем примере:

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

или

<meta http-equiv="content-type" content="text/html; charset = windows-1251" />

Использование атрибута lang позволяет указывать язык, на котором задаются значения атрибутов, но менять языки рекомендуется только для атрибута content.

Идентификация типа информации

Тип информации (media type или мультимедиа), очень похожий на MIME-типы, используемые при отправке вложений в электронной почте, является еще одним видом данных, пересылаемых в HTTP-заголовке.

Для HTML-документов тип информации всегда одинаков - text/html. Весьма просто. Для XHTML-документов все не столь очевидно.

Документы XHTML 1.0 могут обрабатываться либо как XML, либо как HTML-документы. Хотя более подходящим является тип XML, из-за отсутствия в браузере поддержки XML-файлов, многие авторы решают отправлять файлы XHTML 1.0 как тип text/html, применяемый для HTML-документов. Если XHTML-документы обрабатываются таким образом, они могут быть не проанализированы как XML-документы.

Файлы XHTML 1.0 также могут обрабатываться как XML с указанием MIME-типов application/xhtml+xml, application/xml или text/xml. Консорциум W3C рекомендует использовать только application/xhtml+xml.

Для XHTML 1.1 не разрешается использовать тип text/html. Это создает проблему, поскольку некоторые браузеры не знают, что нужно делать с типами, отличными от text/html. Это еще одна причина, по которой XHTML 1.1 трудно реализовать должным образом и по которой разработчики обычно выбирают стандарт XHTML 1.0.

Кодировка символов

Рекомендуется, хотя и не является обязательным, чтобы кодировка символов указывалась во всех документах. В кодировках символов описывается реальный набор глифов или форм символов, используемый в документе. Наборы символов стандартизованы: вы можете обращаться к ним при помощи стандартных номеров. Например, для документов, написанных на английском языке, наиболее распространенная кодировка ISO-8859-1, которая включает в себя все символы западноевропейских языков.

Кодировка должна задаваться на сервере в НТТР - заголовке. Она также может быть указана в объявлении XML для XHTML-документов, в которых используется кодировка, отличная от стандартной для XML кодировки UTF-8 или UTF-16. В тех случаях, когда необходимо подменить или, наоборот, подтвердить заданное сервером значение (и если при этом не используется объявление XML), можно указать кодировку с помощью элемента meta, как показано в приведенном выше примере.

Использование элемента meta для клиентской догрузки. Клиентской догрузкой (client-pull) называется способность браузера (клиента) автоматически запрашивать (загружать) новый документ с сервера. Для пользователя это будет выглядеть так: страница отображается, а через определенный промежуток времени происходит ее обновление для дополнения новой информацией или замена на совершенно новую страницу.

Эту методику можно использовать для автоматического перенаправления пользователей на новый URL (например, если старый URL был выведен из употребления).

При клиентской догрузке используется значение атрибута refresh, который был впервые введен Netscape. Этот атрибут заставляет браузер выждать указанное число секунд (обозначенное целочисленным значением атрибута content), а затем загрузить новую страницу. Если страница не указана, браузер просто перезагружает текущую страницу.

В следующем примере браузер получает задание перезагрузить страницу через 15 секунд (предполагается, что на серверной стороне за это время произойдет что-то, что введет в HTML-документ новую информацию):

<meta http-equiv="refresh" content="15" />

Чтобы выполнить перезагрузку другого файла, укажите URL документа в атрибуте content:

<meta http-equiv="refresh" content="2; url=http://doc2.html" />

Обратите внимание, что значение атрибута content заключено в один набор кавычек. Хотя URL обычно требует своего дополнительного набора кавычек, в атрибуте content они опускаются.

Другие области использования http-equiv. Рассмотрим еще несколько значений атрибута http-equiv:

expires. Указывается дата и время, по истечении которого документ будет считаться устаревшим. Web-роботы могут использовать эту информацию для удаления устаревших документов из индексов поисковых систем. Используется формат времени и даты, соответствующий стандартному формату для заголовков НТТР, поскольку предполагается, что атрибут http-equiv повторяет поле заголовка НТТР. Пример

<meta http-equiv="expires" content="Wed 12 Jun 2001 10:52:00 EST" />

content-language. Это значение может использоваться для указания языка, на котором написан документ. Браузер может послать соответствующий заголовок Accept-Language, который заставит сервер выбрать документ, написанный на соответствующем языке.

В данном примере для браузера указывается, что естественным языком документа является французский:

<meta http-equiv="content-language" content="fr" />

Имена в элементе meta для поисковых систем. Поисковые системы предлагают использовать в элементах meta несколько имен, помогающих этим поисковым машинам в поиске страниц. Обратите внимание, что не все поисковые системы используют метаданные, но добавление их в документ не повредит. В данном случае различия между элементами name и http-equiv достаточно размыты, поэтому большинство имен в элементе meta также работают как определения http-equiv.

description. Указывается краткое, написанное простым текстом описание содержимого Web-страницы, которое особенно полезно, если документ содержит мало текста, представляет собой набор фреймов или если в верхней его части расположены большие по объему скрипты.

Поисковые системы, которые распознают такие описания, могут помещать их на странице результатов поиска. Некоторые поисковые системы используют только первые 20 слов описания, так что сразу переходите к главному.

<meta name="description" content="Jennifer Robbins resume and web design samples" />

keywords. Вы можете указать название и описание документа со списком ключевых слов, разделяемых запятыми. Это будет полезно для индексирования документа. Обратите внимание: поисковые системы в основном отбрасывают ключевые слова в элементе meta из-за большого количества спама и ухудшения качества этой информации. Существует все большая тенденция к отходу от невидимых метаданных к видимой информации в самих материалах Web-страниц.

<meta name="keywords" content="designer, web design, branding, logo design" />

author. Указывается автор Web-страницы.

meta name="author" content="Jennifer Robbins" />

copyright. Указывается информация по защите авторских прав на документ.

<meta name="copyright" content="2010, O'Reilly Media" />

Комментарии

Комментарии в HTML документах оформляются следующим образом

<!-- Написано Иваном Ивановым -->

Они не влияют каким-либо образом на представление документа, т.е. они игнорируются браузером.

Название документа

Наиболее важным (и единственным обязательным) элементом заголовка является название документа (title), который содержит описание материалов на странице.

Синтаксис

<title [атрибуты]>...</title>

Атрибуты

Интернационализация: lang, xml:lang

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

Названия должны содержать только ASCII-символы (буквы, цифры и элементарные знаки пунктуации). Специальные символы (например, &) должны использоваться в названии только в форме символьной сущности, например:

<title> The Adventures of Peto & Fleck</title>

Название - это то, что отображается в списке «Избранное» или «Закладки пользователя». Описательные названия также являются способом повышения доступности, поскольку это первое, что слышит пользователь при употреблении инструмента для чтения с экрана. Поисковые системы также используют названия документов. По этой причине важно создавать продуманные и описательные названия для всех документов и избегать неопределенных названий, таких, как «Welcome» или «MyPage». Также, возможно, вам придется отслеживать длину названия, чтобы они могли отображаться в верхней линейке браузера.