Что внутри "head"? Метаданные в HTML
====================================

* Назад
* Обзор: Introduction to HTML
* Далее

Элемент head HTML-документа не отображается на странице в веб-браузере. Он содержит такую информацию, как:

* заголовок (title) страницы
* ссылки на файлы CSS (если вы хотите применить к вашему HTML стили CSS)
* ссылки на иконки
* другие метаданные (данные о HTML: автор и важные ключевые слова, описывающие документ.)

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

| Предварительные требования: | Базовое знакомство с HTML , описанное в Начало работы с HTML. |
| --- | --- |
| Задача: | Узнать о заголовке HTML, его значении, важнейших элементах, которые содержатся в нём, и о том, как он может повлиять на HTML-документ. |

Что такое <head>?
-----------------

Давайте снова посмотрим на HTML-документ из прошлой статьи:


```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Моя тестовая страница</title>
  </head>
  <body>
    <p>Это — моя страница</p>
  </body>
</html>
```


Содержимое `<head>`, в отличие от содержимого элемента `<body>`, не отображается на странице. Задача <head> — хранить метаданные документа. В приведённом выше примере <head> совсем небольшой:


```html
<head>
  <meta charset="utf-8" />
  <title>Моя тестовая страница</title>
</head>
```


Однако на больших страницах блок <head> может быть довольно объёмным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое <head> с помощью инструментов разработчика. Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнём.

Название страницы (title)
-------------------------

Мы уже видели, как работает элемент `<title>`: его используют для добавления заголовка (названия страницы) в документ. Элемент `<h1>` (en-US) тоже иногда называют заголовком страницы. Но это разные вещи!

* Элемент `<h1>` (en-US) виден на странице, открытой в браузере, — его используют **один раз на странице**, чтобы выделить название содержимого. Это может быть название истории, заголовок новости или что-то в этом роде.
* Элемент `<title>` — метаданные, название всего HTML-документа, а не заголовок внутри его содержимого.
### Активное изучение: разбор простого примера

1. Чтобы приступить к активному изучению, скачайте страницу title-example.html из нашего GitHub-репозитория. Это можно сделать двумя способами:
    1. Скопируйте и вставьте код страницы в новый текстовый файл в своём редакторе кода, затем сохраните его в любом удобном месте.
    2. Нажмите на странице кнопку "Raw", нажмите *Файл > Сохранить Как...* в меню браузера и выберите папку для сохранения.
2. Откройте файл в браузере. Вы увидите что-то вроде этого:

 ![A simple web page with the title set to 'title' element, and the 'h1' set to 'h1' element.](/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/title-example.png)Теперь должно стать совершенно ясно, в чём разница между `<h1>` и `<title>`!
3. Откройте код страницы в редакторе, измените содержимое элементов и обновите страницу в браузере. Развлекайтесь!

Содержимое элемента `<title>` используется и в других местах. Например, при добавлении страницы в избранное (*Bookmarks > Bookmark This Page* в Firefox), текст из `<title>` предлагается в качестве названия закладки.

![A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the 'title' element ](/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/bookmark-example.png)

Текст из `<title>` также появляется в результатах поиска, как мы скоро увидим.

Метаданные: Элемент <meta>
--------------------------

Метаданные — данные, которые описывают данные. У HTML есть «официальное» место для метаданных документа — элемент `<meta>`. Конечно, другие вещи, о которых мы говорим в этой статье, тоже можно назвать метаданными. Существует множество разновидностей `<meta>`. Не станем пытаться охватить их все сразу — так недолго и запутаться, а рассмотрим несколько самых популярных, чтобы разобраться, что к чему.

### Указываем кодировку текста документа

В заголовке примера выше есть следующая строка:


```html
<meta charset="utf-8" />
```


В этом элементе указана кодировка документа — набор символов, которые в нём можно использовать . `utf-8` — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком. Установить эту кодировку на всех веб-страницах, которые вы создаёте — отличная идея! Страница в такой кодировке прекрасно отображает как английские, так и японские символы:

![a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,](/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/correct-encoding.png)Если использовать, скажем, кодировку `ISO-8859-1` (набор символов для латиницы), текст страницы испортится:

![a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly](/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/bad-encoding.png)

**Примечание:** Некоторые браузеры (например, Chrome) автоматически исправляют неправильную кодировку, поэтому, в зависимости от используемого вами браузера, вы можете не увидеть эту проблему. Несмотря на это вам всё равно необходимо указывать кодировку UTF-8 для вашей страницы, чтобы избежать возможных проблем в других браузерах.

### Активное изучение: экспериментируем с символьными кодировками

Чтобы проверить это, вернитесь к HTML из примера `<title>` (странице title-example.html), поменяйте meta charset на `ISO-8859-1` и попробуйте написать что-нибудь на японском или русском. Вот текст из нашего примера (кстати, там написано *«рис горячий»*):


```html
<p>Пример на японском: ご飯が熱い。</p>
```

### Указываем автора и описание

У элементов `<meta>` часто есть атрибуты `name` и `content`:

* `name` — тип элемента, то есть какие именно метаданные он содержит.
* `content` — сами метаданные.

Два полезных элемента метаданных — указание автора страницы и краткое описание её содержимого. Рассмотрим эти элементы на примере:


```html
<meta name="author" content="Крис Миллс" />
<meta
 name="description"
 content="Задача MDN — в том, чтобы обучить
новичков всему тому, что нужно им для разработки веб-сайтов и приложений." />
```


По указанному имени автора (author) можно найти человека, который написал страницу, и связаться с ним. Некоторые системы управления содержимым (CMS) автоматически обрабатывают эту информацию и делают её доступной для таких целей.

Краткое описание (description) содержимого страницы учитывается поисковыми системами при совпадении ключевых слов. Такое называют поисковой оптимизацией, или SEO.

### Активное изучение: как поисковые системы используют описание

Описание из `<meta name="description">` используется на страницах поисковой выдачи. Проведём небольшое исследование такого сценария.

1. Перейдите на главную страницу Mozilla Developer Network.
2. Откройте исходный код страницы (кликните правой кнопкой мыши и выберите *Просмотреть код* в контекстном меню.)
3. Найдите тег meta с описанием. Он выглядит так:

```html
<meta
 name="description"
 content="Веб-документация на MDN
предоставляет собой информацию об открытых веб-технологиях,
включая HTML, CSS и различные API для веб-сайтов и
прогрессивных веб-приложений. Также на сайте содержатся материалы
для разработчиков о таких продуктах Mozilla, как Инструменты разработчика Firefox." />
```

4. Теперь найдите "Mozilla Developer Network" в своём поисковике (мы использовали Google). Обратите внимание, что описание и название из `<meta>` и `<title>` используется в результатах поиска, — мы не зря указали их!

![Результат поиска в Google](/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/updated_search_result__ru.jpg)

**Примечание:** Google также показывает важные страницы MDN под ссылкой на главную страницу. Такие ссылки называются sitelinks, и их можно настроить через Google Search Console, чтобы пользователи могли сразу перейти к ним со страницы поиска.

**Примечание:** Многие типы `<meta>` больше не используются. Так, поисковые системы больше не используют данные из элемента `<meta type="keywords" content="ваши, ключевые, слова, введите, здесь">`, в котором указывали ключевые слова, по которым можно найти страницу: спамеры засовывали туда все слова, какие могли придумать, чтобы их сайты почаще появлялись в поиске.

### Другие виды метаданных

В сети вы найдёте также другие типы метаданных. Многие из них — это собственные форматы, созданные для предоставления определённым сайтам (например, социальных сетей) специальной информации, которую они могут использовать.

Например, Протокол Open Graph создан Facebook чтобы предоставить сайтам дополнительные возможности использования метаданных. В исходном коде MDN Web Docs вы можете найти строки:


```html
<meta
 property="og:image"
 content="https://developer.mozilla.org/mdn-social-share.png" />
<meta
 property="og:description"
 content="Веб-документация на MDN предоставляет
собой информацию об открытых веб-технологиях, включая HTML, CSS и различные API для веб-сайтов
и прогрессивных веб-приложений. Также на сайте содержатся материалы для разработчиков о таких
продуктах Mozilla, как Инструменты разработчика Firefox." />
<meta property="og:title" content="MDN Web Docs" />
```


Один из результатов добавления этих метаданных в том, что когда вы добавите ссылку MDN Web Docs на facebook, она отобразится с изображением и описанием, улучшая опыт взаимодействия \_(User eXperience, UX)\_.

![Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.](/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/facebook-output.png)У Twitter также есть собственный формат метаданных, с помощью которого создаётся аналогичный эффект, при отображении URL сайта на twitter.com:


```html
<meta name="twitter:title" content="MDN Web Docs" />
```

Добавление иконок
-----------------

Чтобы добавить своему сайту узнаваемости, можно указать в метаданных разные иконки.

Favicon, один из старожилов интернета, стал первой из таких иконок. Браузеры показывают её в заголовке вкладки и в списке избранных страниц.
 ![The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.](/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/bookmark-favicon.png)

Чтобы добавить на страницу favicon:

1. Сохраните изображение в формате `.ico` (многие браузеры поддерживают и в более привычных форматах, таких как `.gif` или `.png`) в папку со своим документом. Старые браузеры, например, Internet Explorer 6, поддерживают только формат `.ico`
2. Добавьте ссылку на иконку в `<head>` документа:

```html
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
```


Для разных устройств можно указывать разные иконки. Например, на главной странице MDN:


```html
<!-- Для iPad 3 с Retina-экраном высокого разрешения: -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="144x144"
 href="https://developer.mozilla.org/static/img/favicon144.png" />
<!-- Для iPhone с Retina-экраном высокого разрешения: -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="114x114"
 href="https://developer.mozilla.org/static/img/favicon114.png" />
<!-- Для iPad первого и второго поколения: -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="72x72"
 href="https://developer.mozilla.org/static/img/favicon72.png" />
<!-- Для iPhone, iPod Touch без Retina и устройств с Android 2.1+: -->
<link
 rel="apple-touch-icon-precomposed"
 href="https://developer.mozilla.org/static/img/favicon57.png" />
<!-- Для других случаев - обычный favicon -->
<link
 rel="shortcut icon"
 href="https://developer.mozilla.org/static/img/favicon32.png" />
```


В комментариях указано, для чего используется каждая иконка — например, при добавлении страницы на домашний экран iPad будет использована иконка в высоком разрешении.

Не беспокойтесь о реализации всех этих типов значков — это довольно продвинутая функция, и мы не станем возвращаться к ней в курсе. Основная цель — показать вам, что это такое, если вы столкнётесь с ними при просмотре исходного кода других веб-сайтов.

Подключение CSS и JavaScript
----------------------------

Современные сайты используют CSS, чтобы выглядеть привлекательнее, и добавляют интерактивные функции через JavaScript: видеоплееры, карты, игры. Обычно связанные стили добавляют на страницу через элемент `<link>`, а скрипты — через элемент `<script>` .

* Элемент `<link>` помещают в заголовок документа. У него есть два атрибута: `rel="stylesheet"` показывает, что мы указываем *стиль* документа, а в `href` указан путь к файлу:

```html
<link rel="stylesheet" href="my-css-file.css" />
```

* Элемент `<script>` не обязательно находится в заголовке — на самом деле лучше поместить его в самом конце страницы, прямо перед закрывающем тегом `</body>`. Так браузер сначала отобразит саму страницу, а уже затем загрузит и запустит скрипт — иначе скрипт может обратиться к ещё не созданному элементу страницы и сломаться.

```html
<script src="my-js-file.js"></script>
```

**Примечание**: Элемент `<script>` кажется пустым, но это не всегда так, и указывать закрывающий тег обязательно. Вместо того чтобы ссылаться на внешний скрипт, код можно писать прямо внутри этого элемента — так можно не тратить время на загрузку отдельного скрипта, но зато не выйдет сослаться на один js-файл с нескольких страниц.
### Активное изучение: добавляем на страницу CSS и JavaScript

1. Для этого упражнения скачайте файлы meta-example.html, script.js и style.css и положите их в одну папку на своём компьютере. Проверьте, что они сохранились с правильными именами и расширениями.
2. Откройте HTML в браузере и текстовом редакторе.
3. Следуя изученному материалу, добавьте на страницу скрипт и стиль с помощью элементов `<link>` и `<script>`.

Если всё получилось, когда вы сохраните HTML и обновите страницу в браузере, вы увидите кое-что новенькое:

![Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.](/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/js-and-css.png)

* JavaScript добавил на страницу пустой список. При нажатии на красную область появляется окно, в которое можно ввести текст нового пункта списка. При нажатии на кнопку OK пункт добавляется на страницу. Текст существующих пунктов списка можно редактировать, нажимая на них.
* CSS покрасил фон зелёным и увеличил размер шрифта, а также стилизовал элементы, добавленные JavaScript. Красный прямоугольник и рамка вокруг списка — тоже его рук дело.

**Примечание:** Если вам никак не удаётся подключить CSS или JS, посмотрите на наш готовый пример — страницу css-and-js.html.

Основной язык HTML страницы
---------------------------

Наконец, стоит отметить, что вы можете (и действительно должны) установить язык для своей страницы. Это можно сделать, добавив атрибут lang в открывающий HTML-тег (как в примере meta-example.html: и как показано ниже):
```

<html lang="en-US">
```


```
<html lang="ru">
```


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

Можно также указать язык для части документа. Например, мы могли бы установить язык для части страницы на японском:


```html
<p>Пример на японском: <span lang="ja">ご飯が熱い。</span>.</p>
```


Коды языков определены в стандарте ISO 639-1. Подробнее о работе с языками можно узнать в Языковые тэги в HTML и XML.

Заключение
----------

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

* Назад
* Обзор: Introduction to HTML
* Далее