MDN will be in maintenance mode on Thursday September 21st, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

Предварительные требования:

Базовое знакомство с HTML , описанное в Getting started with HTML.

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

Что такое заголовок HTML?

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

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

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>

На страницах побольше в заголовке может быть куча различной информации — сходите на свои любимые сайты и посмотрите на их заголовки через developer tools. Сейчас мы не станем рассказывать обо всём, что может очутиться в заголовке, но зато научим вас включать в заголовок самые полезные данные и закрепим знания упражнениями. Приступим.

Добавляем название страницы

Мы уже видели, как работает элемент <title> — его используют, чтобы дать документу название. Его можно спутать с элементом <h1> — заголовком верхнего уровня для тела документа, который тоже иногда назвают заголовком страницы. Не путайте эти элементы!

  • Элемент <h1> виден на странице, открытой в браузере — его используют один раз на странице, чтобы выделить название сожержимого. Это может быть название истории, заголовок новости, или что-то в этом роде.
  • Элемент <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.Теперь должно стать совершенно ясно, в чём разница между <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

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

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

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

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

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

<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,Если использовать, скажем, кодировку 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

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

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

<p>Japanese example: ご飯が熱い。</p>

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

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

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

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

<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">

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

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

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

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

  1. Перейдите на главную страницу Mozilla Developer Network.
  2. Откройте исходный код страницы (кликните правой кнопкой мыши и выберите Просмотреть код в контекстном меню.)
  3. Найдите тег meta с описанием. Он выглядит так:
    <meta name="description" content="The Mozilla Developer Network (MDN) provides
    information about Open Web technologies including HTML, CSS, and APIs for both
    Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
  4. Теперь поищите "Mozilla Developer Network" в своём любимиом поисковике (в примере используется Yahoo.) Обратите внимание, что в результатах поиска виден текст из <meta> и <title> — мы не зря указали их!

    A Yahoo search result for "Mozilla Developer Network"

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

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

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

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

Open Graph Data — формат метаданных, который Facebook использует при отображении ссылок на внешние сайты. В исходном коде страниц MDN указаны такие данные:

<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

Когда Facebook видит ссылку на MDN, он отображает её с красивой картинкой динозавра и описанием — так пользователю не обязательно переходить по ссылке, чтобы узнать, куда она ведёт.

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter придумал собственный формат метаданных, который работает похожим образом помогает показывать ссыки на twitter.com:

<meta name="twitter:title" content="Mozilla Developer Network">

Добавляем иконку

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

Favicon, один из старожилов интернета, стал первой из таких иконок. Браузеры показывают её в заголовке вкладки и в списке избранных страниц.The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

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

  1. Сохраните изображение в формате .ico, .gif или .png, в папку со своим документом. Старые браузеры, например, Internet Explorer 6, поддерживают только формат .ico
  2. Добавьте ссылку на иконку в <head> документа:
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

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

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

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

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

Добавляем на страницу CSS и JavaScript

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

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

    <link rel="stylesheet" href="my-css-file.css">
  • Элемент <script> не обязательно находится в заголовке — на самом деле лучше поместить его в самом конце страницы, прямо перед закрывающем тегом </body>. Так браузер сначала отобразит саму страницу, а уже затем загрузит и запустит скрипт — иначе скрипт может обратиться к ещё не созданному элементу страницы и сломаться.

    <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.

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

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

Указываем основной язык документа

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

<html lang="en-US">

Это очень полезная информация. Поисковые системы используют её, чтобы эффективнее индексировать страницы — например, показывать их пользователям, использующим этот язык. Скринридеры — программы, читающие страницы вслух для незрячим людям — настраивают своё произношение по этим данным (например, слово «динозавр» встречается и в русском, и в украинском, но читается по-разному.)

Части документа на другом языке помечают похожим образом. В нашем знакомом примере с фрагментом на японском правильно указать язык так:

<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>

Коды языков определены в стандарте ISO 639-1. Нам полезнее всего будет русский — ru. Подробнее о работе с языками можно узнать в Language tags in HTML and XML.

Заключение

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

Метки документа и участники

 Внесли вклад в эту страницу: thoughtspile, nikin93, kolanski
 Обновлялась последний раз: thoughtspile,