Добро пожаловать!
Здесь вы можете найти ответ на интересующий вас вопрос в отрасли сайтостроения, познакомится ближе с web технологиями и web стандартами.

HTML

Глава 2. Раздел заголовков.

Раздел документа 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>