Элемент <head> содержит метаданные (информацию о других данных). Его контент не показывается пользователям на странице, но влияет на работу сайта, отображение контента, визуальное оформление ссылки на сайт в соцсетях и др. Сейчас разберём, что прячет в себе этот «серый кардинал».
Внутри <head> на очень многих страницах можно встретить элементы:
- <title> - заголовок HTML-документа;
- <link> - привязка шрифтов, стиля и не только;
- <script> - необходимые скрипты;
- <meta> - другие метаданные.
<title>
Внимание! Не путайте <title> с заголовками статьи (<h1>-<h6>). <Title> задаёт заголовок всего HTML-документа, а не его части.
Значение <title> на странице можно узнать четырьмя способами:
- Откройте инструмент разработчика, разверните <head> и найдите элемент <title>.
- Посмотрите название вкладки в браузере. Если его не видно целиком, наведите курсор на вкладку.
- Если Вы нашли сайт в поисковой выдаче, обратите внимание на название главной ссылки. Это и есть содержимое <title>.
- Добавьте страницу в панель закладок. Браузер сам предложит её имя в соответствии с элементом <title>.
<link>
По структуре <link> похож на элемент <a>, ведь он:
- Является void-элементом.
- Имеет атрибут href со схожей функцией.
Вот только <link> прописывается в хеде, а не теле HTML-документа. Плюс он предназначен не для перехода на внешние ресурсы, а для привязки этих ресурсов к документу.
У элемента <link> часто можно встретить два атрибута:
- rel= «» - определяет, что передаёт привязываемый ресурс HTML-документу.
- href= «» - содержит URL на этот ресурс.
Примеры значений rel и href Вы можете посмотреть в моём коде на codepan. io.
<script>
Элемент <script> содержит JavaScript код, необходимый для работы сайта. Его можно встретить не только внутри <head>, но и внутри <body>. Подробнее об элементе <script> расскажу позже, когда доберусь до JavaScript.
<meta>
Довольно разнообразный по возможностям элемент. Разберём некоторые его популярные вариации.
<meta charset= «utf-8» >. Задаёт кодировку веб-страницы (кодировка – это метод хранения символов). Сейчас используют кодировку UTF-8, поскольку она включает в себя большинство символов из всех известных человеку языков.
<meta content= «author» content= «Имя автора кода» >. Некоторые CMS по этой строчке находят автора HTML-кода и позволяют с ним связаться.
<meta name= «description» content= «Описание страницы» >. Значение атрибута content задаёт описание страницы. Именно оно прописано в поисковой выдаче под названием ссылки.
Задание
Хотите посмотреть, что будет с сайтом после удаления элемента <head>? Тогда:
- Зайдите на любой популярный сайт (например, YouTube: там элемент <head> отвечает за привязку стилей, так что изменения будут очевиднее).
- Откройте инструмент разработчика. Для этого нажмите правой кнопкой мыши в любой части экрана. В контекстном меню выберите «Посмотреть код» или «Исследовать» (в разных браузерах по-разному).
- Найдите окно с HTML-кодом. Внутри него должен быть элемент <head>. Удалите его.
- Теперь закройте инструмент разработчика. Вы увидите, мягко говоря, развалившийся сайт. Не пугайтесь: перезагрузите страницу, и всё вернётся на свои места.