Раздел документа head определяет его заголовок и не является обязательным элементом, однако хорошо составленный заголовок может быть весьма полезен. Задачей заголовка является представление необходимой информации для браузера. Элементы, находящиеся внутри раздела head (кроме названия документа, описываемого с помощью элемента title), не отображаются на экране.
Заголовок может содержать в себе следующие элементы:
- название документа (элемент
title); - полный URL документа (элемент
base); - управляющую информацию (элемент
meta); - список ссылок (элемент
link); - описание стилей (элемент
style); - задание скриптов (элемент
script).
Элемент head имеет один необязательный атрибут profile, указывающий на внешний файл мета-элементов. В качестве значения атрибута задается адрес URL. Задание элемента head в общем виде выглядит так:
<head profile="URL"> ...список элементов заголовка... ...список элементов заголовка... </head>
Элемент <title>.
Элемент title задает название документа. Этот элемент разметки, строго говоря, не является обязательным, однако его использование настоятельно рекомендуется. Он присваивает документу название, независимое от имени файла. Это название отображается в строке заголовка браузера. Также это имя используется по умолчанию при добавлении документа в папку «Избранное».
Открывающий и закрывающий теги элемента title являются обязательными. Его содержимое представляет собой текстовую строку неограниченной длины.
Название документа должно кратко характеризовать его содержание. Учитывая это, а также возможную минимизацию окна браузера, рекомендуется в названии документа ограничиться 50-60 символами. Содержание элемента title не должно включать в себя других элементов разметки. Например, нельзя с помощью элемента <i> вывести название документа курсивом, т.е. недопустима запись:
<title><i>Название документа</i></title>
Запись
<i><title>Название документа</title></i>
также неприемлема, так как элемент <i> не является элементом заголовка.
Элемент <base>.
Элемент base используется для явного задания полного URL-адреса документа. Это бывает полезно ввиду того, что общепринятым стилем задания гипертекстовых ссылок является относительная их адресация. То есть при задании ссылки на документ указывается не полный его URL-адрес, а задается его месторасположение относительно текущего адреса. Так вот элемент base как раз и задает адрес, относительно которого и будут браться относительные ссылки. Пример относительной ссылки:
<a href="/book/chapter_1.html">Глава 1</a>
Такой стиль полезен тем, что при переносе всего дерева документов в другое место не требуется изменять ссылки в самих документах.
Задание абсолютной ссылки заключается в указании полного URL-адреса целевого документа, например:
<a href="http://www.somehost.ru/book/chapter_1.html">Глава 1</a>
Использование элемента base позволяет поддерживать относительные ссылки в том случае, когда HTML-документ перемещен (или скопирован), а все остальное дерево документов, на которые он ссылается, нет. Адрес документа поменялся (например, документ лежал на www.somehost.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.somehost.ru"> </head> <body> ...текст документа... ...текст документа... <a href= "/images/photo.gif">Ссылка на изображение photo.gif</a> ...текст документа... ...текст документа... <a href= "chapter_2.html">К следующей главе</a> ...текст документа... ...текст документа... </body> </html>
В этом примере переход по относительным ссылкам задается относительно URL-адреса http://www.somehost.ru. Таким образом, заданные в этом документе ссылки в абсолютном варианте всегда (независимо от месторасположения документа) будут иметь следующий вид:
http://www.somehost.ru/images/photo.gif
http://www.somehost.ru/chapter_2.html
Если базовый адрес не был бы задан, то эти ссылки интерпретировались бы относительно каталога, в котором находится данный документ. Соответственно при перемещении документа изменялись бы цели относительных ссылок.
Начальный тег элемента base обязателен, конечный тег запрещен.
Элемент base можно использовать и в заголовке и в теле документа, причем несколько раз. Область действия элемента base определяется от места его задания и до конца документа, или до следующего объявления элемента base, если таковой имеется.
Элемент <meta>.
Элемент meta используется для задания некоторых свойств документа (а именно: автора, списка ключевых слов, кодировки и т.п.), благодаря чему позволяет управлять обработкой HTML-документа. Этот элемент, вместе с элементом title является наиболее используемым при задании заголовка. При задании элемента 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.somehost.ru/page.html">
При таком задании через 5 секунд после загрузки текущего документа браузер автоматически перейдет к загрузке документа page.html. Если URL не задан, то происходит просто обновление документа. На этом построены все чаты.
Практически во всех HTML-документах элемент meta используется для их описания посредством задания списка ключевых слов и краткой информации о содержимом документа. Ключевые слова вместе с названием документа помогают поисковым машинам найти документ. В своих отчетах они выдают название документа, прописанное в элементе <title>, и краткое его описание, заданное через элемент meta. Для указания списка ключевых слов и краткой информации о документе в заголовке используются два meta элемента:
<meta name="description" content="Наибольшее количество анекдотов в сети. Постоянное пополнение. ЗАХОДИ - не соскучишься"> <meta name="keywords" content="анекдот; прикол; лучшие анекдоты; шутка">
Через элемент meta можно указать кодировку содержимого документа. Элемент 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>