Элемент <head>
является контейнером для всех элементов, которые предоставляют дополнительную информацию о документе.
Элементы <head>
описывают свойства документа, такие как заголовок (title
), character
, мета-информацию для SEO, иконки favicon
, ссылки на CSS-стили и Js-скрипты для корректной работы HTML-документа и т.д.
HTML-элементы, которые можно использовать внутри элемента: <title>
, <base>
, <link>
, <style>
, <meta>
, <script>
и <noscript>
.
HTML-элемент <title>
Элемент <title>
определяет заголовок документа. Элемент title
является обязательным во всех HTML/XHTML документах для того, чтобы они были валидными.
В документе разрешен только один элемент title
, и он должен располагаться в элементе <head>
. Элемент title
должен содержать простой текст, описывающий тему текущей страницы; он не может содержать другие теги разметки.
Название документа может использоваться для разных целей. Например:
- Для отображения заголовка в строке заголовка браузера и в панели задач;
- Для отображения заголовка, когда она добавляется в избранное или в закладки;
- Чтобы отобразить заголовок веб-страницы в результатах поиска.
В следующем примере показано, как разместить заголовок в документе HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>A simple HTML document</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Хороший заголовок должен быть коротким и соответствовать содержанию документа, поскольку поисковые роботы обращают особое внимание на слова, используемые в заголовке. Название в идеале должно быть менее 65 символов в длину. Смотрите руководство по созданию правильного title
HTML-элемент <base>
HTML-элемент <base>
используется для определения базового URL для всех относительных ссылок, содержащихся в документе. Например, вы можете установить базовый URL один раз в верхней части своей страницы, и тогда все последующие относительные ссылки будут использовать этот URL. Вот пример:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Defining a base URL</title>
<base href="https://artzolin.ru/">
</head>
<body>
<p><a href="html-theory/html-head/">Руководство по HTML Head</a>.</p>
</body>
</html>
Гиперссылка в приведенном выше примере будет преобразована в https://artzolin.ru/html-theory/html-head/
независимо от URL текущей страницы. Это связано с тем, что относительный URL-адрес, указанный в ссылке: html-theory/html-head/
, добавляется в конец базового URL-адреса: https://artzolin.ru/
.
HTML-элемент <base>
должен появляться перед любым элементом, который ссылается на внешний ресурс. HTML допускает только один базовый элемент для каждого документа.
HTML-элемент <link>
Элемент <link>
определяет связь между текущим документом и внешними ресурсами. Обычно <link>
используется для ссылки на внешние CSS-таблицы или Js-скрипты.
<head>
<title>Linking Style Sheets</title>
<link rel="stylesheet" href="style.css">
</head>
Подробнее см. Руководство по CSS.
Элемент <head>
документа HTML может содержать любое количество элементов <link>
. У элемента <link>
есть атрибуты, но не может быть содержимого.
HTML-элемент <style>
Элемент <style>
используется для определения информации о встроенных стилях в HTML-документе. Правила внутри элемента <style>
определяют, как HTML-элементы должны отображаться в браузере.
<head>
<title>Embedding Style Sheets</title>
<style>
body { background-color: YellowGreen; }
h1 { color: red; }
p { color: green; }
</style>
</head>
Встроенные CSS-таблицы должны использоваться, когда текущий документ имеет уникальные стили. Если одна и та же таблица стилей используется в нескольких документах, то правильнее использовать внешнюю таблицу стилей. Подробнее см. Руководство по стилям в HTML.
HTML-элемент <meta>
Элемент <meta>
предоставляет метаданные об HTML-документе. Метаданные — это набор данных, которые описывают и предоставляют информацию о других данных. Вот пример:
<head>
<title>Specifying Metadata</title>
<meta charset="utf-8">
<meta name="author" content="John Smith">
</head>
Подробнее о метаданных в следующей главе.
HTML-элемент <script>
Тег <script>
используется для встраивания ссылки на исполняемый скрипт на стороне клиента (например, JavaScript) в документах HTML/XHTML. Тег <script>
может появляться любое количество раз в элементе <head>
.
В следующем примере в браузере отобразится приветственное сообщение:
<head>
<title>Adding JavaScript</title>
<script>
document.write("<h1>Hello World!</h1>")
</script>
</head>
Элементы script
и noscript
будут подробно разобраны в Руководстве по скриптам в HTML.