Элемент <head>

[Парный]

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

Заголовок может содержать в себе следующие элементы:

  • название документа (элемент <title>);
  • полный URL документа (элемент <base>);
  • управляющую информацию (элемент(ы) <meta>);
  • список ссылок (элемент <link>);
  • описание стилей (элемент <style>);
  • задание скриптов (элемент <script>).

Элемент <head> имеет один необязательный атрибут profile, указывающий на внешний файл мета-элементов. В качестве значения атрибута задается адрес URL. Задание элемента <head> в общем виде выглядит так:

<head profile="URL">
...список элементов заголовка...
...список элементов заголовка...
</head>

Элемент <title>

[Парный]

Элемент <title> задает название документа. Хотя этот элемент разметки, не является обязательным, его использование настоятельно рекомендуется. Он присваивает документу название, независимое от имени файла. Это название отображается в заголовке окна браузера. Также это имя используется по умолчанию при добавлении документа в папку "Избранное".

Содержимое элемента представляет собой текстовую строку неограниченной длины.

Название документа должно кратко характеризовать его содержание. Учитывая это, а также возможную минимизацию окна браузера, рекомендуется в названии документа ограничиться 50-60 символами. Содержание элемента <title> не должно включать в себя других элементов разметки. Например, нельзя с помощью элемента <i> вывести название документа курсивом, т.е. недопустима запись:

<title><i>Название документа</i></title>

Запись

<i><title>Название документа</title></i>

также неприемлема, так как элемент <i> не является элементом заголовка.

Элемент <base>

[Одиночный]

Элемент <base> используется для явного задания начальной части полного URL-адреса для ссылок. Это бывает удобно, потому что обычно используется относительная адресация. То есть при задании ссылки на документ указывается не полный его URL-адрес, а задается его месторасположение относительно текущего адреса. Так вот элемент <base> как раз и задает адрес, относительно которого и будут браться относительные ссылки. Пример относительной ссылки:

<a href="/doc/chp_1.html">Глава 1</a>

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

Абсолютная ссылка выглядела бы, например, так:

<a href="http://www.mysite.ru/doc/chp_1.html">Глава 1</a>

Использование элемента <base> позволяет поддерживать относительные ссылки в том случае, когда HTML-документ перемещен (или скопирован), а все остальное дерево документов, на которые он ссылается, нет. Адрес документа поменялся (например, документ лежал на www.mysite.ru, а теперь у вас дома, на диске С), однако при активизации относительной ссылки она будет взята браузером относительно исходного адреса, прописанного в элементе <base>.

Элемент <base> имеет один обязательный атрибут href, значением которого является базовая часть полного URL ссылок. В листинге показано применение элемента <base> и относительных ссылок:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Глава 1</title>
<base href= "http://www.mysite.ru">
</head>
<body>

...текст документа...
...текст документа...
<a href= "/img/foto1.gif">Ссылка на изображение foto1.gif</a>
...текст документа...
...текст документа...
<a href= "chp_2.html">К следующей главе</a>
...текст документа...
...текст документа...
</body>
</html>

В этом примере переход по относительным ссылкам задается относительно URL-адреса http://www.mysite.ru. Таким образом, заданные в этом документе ссылки в абсолютном варианте всегда (независимо от месторасположения документа) будут иметь следующий вид:

http://www.mysite.ru/img/foto1.gif
http://www.mysite.ru/chp_2.html

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

Начальный тег элемента <base> обязателен, конечный тег запрещен.

Элемент <base> можно использовать и в заголовке и в теле документа, причем несколько раз. Область действия элемента <base> определяется от места его задания и до конца документа, или до следующего объявления элемента <base>, если таковой имеется.

Элемент <meta>

[Одиночный]

Элементы <meta> используются для задания свойств документа (например, автора, описания, ключевых слов, кодировки текста и т.п.). При задании элемента meta начальный тег обязателен, конечный тег запрещен.

Атрибуты:

  • name — указывает имя свойства;
  • content — задает значение свойства;
  • scheme — указывает имя схемы, используемой для обработки значения свойства;
  • http-equiv — используется вместо атрибута name для указания имени http-сообщения;
  • lang — информация о языке. Необязательный атрибут;
  • dir — указывает направленность текста Необязательный атрибут.

Каждый элемент <meta> содержит в себе пару "свойство-значение". Атрибут name (http-equiv) указывает свойство, атрибут content — значение. Например:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-l">
<meta name="description" content="cascading style sheets, stylesheets,
CSS, CSS1, CSS2, HiperText Markup Language, HTML 4.0, HTML 4.01">
<meta name="keywords" content="cascading style sheets, stylesheets,
CSS, CSS1, CSS2, HiperText Markup Language, HTML 4.0, HTML 4.01">

В первом случае указана кодировка HTML-документа, во втором случае — описание документа, в третьем — ключевые слова. Оба последних элемента <meta> активно используются поисковыми роботами для получения информации о документе.

Атрибут http-equiv может использоваться вместо атрибута name, для задания свойств HTML-документа на уровне http-заголовка. Через атрибут http-equiv осуществляется доступ к полям HTTP-заголовка.

Одно из полезных применений этого элемента заключается в осуществлении принудительной перезагрузки документа браузером. Для этого с помощью атрибута http-equiv используется http-оператор refresh. Время, через которое надо произвести перезагрузку, указывается атрибутом content, а адрес загружаемого документа — атрибутом url оператора refresh. Пример написания:

<meta http-equiv="refresh"
content="5; url=http://www.mysite.ru/page1.html">

При таком задании через 5 секунд после загрузки текущего документа браузер автоматически перейдет к загрузке документа page1.html. Если URL не задан, то происходит просто обновление документа. На этом построены все чаты.

Практически во всех HTML-документах элемент <meta> используется для их описания посредством задания списка ключевых слов и краткой информации о содержимом документа. Ключевые слова вместе с названием документа помогают поисковым машинам найти документ. В своих отчетах они выдают название документа, прописанное в элементе <title>, и краткое его описание, заданное через элементы <meta>. Для указания списка ключевых слов и краткой информации о документе в заголовке используются два <meta> элемента:

<meta name="description" content="Наибольшее количество анекдотов
в сети. Постоянное пополнение. ЗАХОДИ - не соскучишься">
<meta name="keywords"
content="анекдот; прикол; лучшие анекдоты; шутка">

Через элемент <meta> можно указать кодировку содержимого документа:

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

С помощью элемента <meta> можно запретить кэширование документа, что бывает полезно при частом обновлении документа. Для осуществления этой операции в элемент <meta> включается оператор cache-control (в HTTP 1.0 применялся оператор Pragma). Оператор устанавливается в положение no-cashe. Элемент <meta> тогда примет вид:

<meta http-equiv="cache-control" content="no-cache">

При кэшировании документа можно указать время, до которого имеет место соответствие закэшированного документа с его оригиналом на сервере. В данном случае используется HTTP-оператор Expires и элемент meta принимает вид:

<meta http-equiv="Expires"
content="Monday, 18-Мау-2005 00:00:01">

В данном случае дата задается для корректировки HTTP-заголовка и поэтому должна иметь указанный формат.

Элемент <link>

[Одиночный]

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

Атрибуты:

  • href — указывает URL-адрес документа, взаимоотношение с которым описывается;
  • rel — атрибут, определяющий отношение между текущим и внешним документами. С помощью этого атрибута W3C пытается запрограммировать клавишу "Вперед" браузера;
  • rev — атрибут, определяющий отношение между текущим и внешним документами. С помощью этого атрибута W3C пытается запрограммировать клавишу "Назад" браузера;
  • hreflang — необязательный атрибут, указывающий базовый язык целевого Web-ресурса. Этот атрибут может использоваться только в сочетании с атрибутом href. В качестве значения пишется код языка;
  • charset — указывает кодировку символов целевого документа.

Один элемент link устанавливает связь только с одним внешним документом. Однако в HTML-документе может присутствовать несколько элементов link.

Элемент link обычно содержит URL-адрес документа, с которым задается взаимоотношение, и тип самого взаимоотношения, который показывает, чем документ, указанный в ссылке, является по отношению к текущему документу.

Перечень возможных типов взаимоотношений:

Для атрибута rev

  • made — адрес электронной почты автора текущего документа;
  • author — автор данного документа;
  • editor — страница редактора данного документа;
  • owner — страница владельца данного документа.

Для атрибута rel

  • start — начальная страница;
  • index — алфавитный указатель;
  • previous — предыдущая страница;
  • next — следующая страница;
  • bookmark — закладка;
  • copyright — авторское право;
  • alternate — альтернативная версия документа;
  • help — справочное пособие.

Запись
<link href="http://www.somehost.ru/charter_3.html" rel="next">
читается как:
документ по адресу http://www.somehost.ru/charter_3.html является следующим в логической последовательности после данного.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Вторая глава</title>
<link rev="made" href="mailto:ivanov@mail.ru">
<link rev="author" href="Александр Иванов">
<link rel="next" href=charter_3.html">

<link rel="previous" href="charter_l.html">
<link rel="index" href="toc.html">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<meta name="description" content="HTML, CSS, JavaScript">
<meta name="keywords" lang="ru" content="HTML, CSS, JavaScript">
</head>
<body>
...текст документа...
...текст документа...
...текст документа...
</body>

</html>

На данный момент информация о взаимоотношениях документов, задаваемых элементом link, браузерами никак не учитывается и не отображается. Пользователь может увидеть эти сведения, только просмотрев HTML-код документа. Консорциум W3C уже не один год занимается разработкой браузера с возможностью программирования кнопок "Вперед" и "Назад". Однако разработки этой компании пока не нашли своего применения в популярных и общеиспользуемых браузерах.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Документ на русском языке</title>
<link title ="Этот же документ на английском языке"
type="text/html" rel="alternate"
href="http://www.mybook.ru/charter_3/english_3.html"
hreflang="en">
<link title ="Этот же документ на французском языке"
type="text/html" rel="alternate"
href="http://www.mybook.ru/charter_3/french_3.html"
hreflang =fr>
<link title ="Этот же документ на немецком языке"
type="text/html" rel="alternate"
href="http://www.mybook.ru/charter_3/deutch_3.html"
hreflang="de">
</head>
<body>

...текст документа на русском языке...
...текст документа на русском языке...
...текст документа на русском языке...
</body>
</html>

Сегодня основное практическое применение элемента link, заключается в подключении внешних таблиц стилей (CSS).

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Название документа</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
...текст документа...
...текст документа...
...текст документа...

</body>
</html>