Найти в Дзене
Конспекты верстальщика
1 подписчик

Его не видно, а он есть. Элемент <head> и его содержимое

40
2 мин
Элемент <head> содержит метаданные (информацию о других данных). Его контент не показывается пользователям на странице, но влияет на работу сайта, отображение контента, визуальное оформление ссылки на сайт в соцсетях и др. Сейчас разберём, что прячет в себе этот «серый кардинал». Внутри <head> на очень многих страницах можно встретить элементы: <title> Внимание! Не путайте <title> с заголовками статьи (<h1>-<h6>). <Title> задаёт заголовок всего HTML-документа, а не его части. Значение <title> на странице можно узнать четырьмя способами: <link> По структуре <link> похож на элемент <a>, ведь он: Вот только <link> прописывается в хеде, а не теле HTML-документа. Плюс он предназначен не для перехода на внешние ресурсы, а для привязки этих ресурсов к документу. У элемента <link> часто можно встретить два атрибута: Примеры значений rel и href Вы можете посмотреть в моём коде на codepan. io. <script> Элемент <script> содержит JavaScript код, необходимый для работы сайта. Его можно в
Оглавление

Элемент <head> содержит метаданные (информацию о других данных). Его контент не показывается пользователям на странице, но влияет на работу сайта, отображение контента, визуальное оформление ссылки на сайт в соцсетях и др. Сейчас разберём, что прячет в себе этот «серый кардинал».

Внутри <head> на очень многих страницах можно встретить элементы:

  • <title> - заголовок HTML-документа;
  • <link> - привязка шрифтов, стиля и не только;
  • <script> - необходимые скрипты;
  • <meta> - другие метаданные.

<title>

Внимание! Не путайте <title> с заголовками статьи (<h1>-<h6>). <Title> задаёт заголовок всего HTML-документа, а не его части.

Значение <title> на странице можно узнать четырьмя способами:

  • Откройте инструмент разработчика, разверните <head> и найдите элемент <title>.
  • Посмотрите название вкладки в браузере. Если его не видно целиком, наведите курсор на вкладку.
  • Если Вы нашли сайт в поисковой выдаче, обратите внимание на название главной ссылки. Это и есть содержимое <title>.
  • Добавьте страницу в панель закладок. Браузер сам предложит её имя в соответствии с элементом <title>.
Выделенный элемент <title> и его анатомия. Фото окна в инструменте разработчика. Синий цвет – теги, белый – заголовок HTML-документа.
Выделенный элемент <title> и его анатомия. Фото окна в инструменте разработчика. Синий цвет – теги, белый – заголовок HTML-документа.

<link>

По структуре <link> похож на элемент <a>, ведь он:

  • Является void-элементом.
  • Имеет атрибут href со схожей функцией.

Вот только <link> прописывается в хеде, а не теле HTML-документа. Плюс он предназначен не для перехода на внешние ресурсы, а для привязки этих ресурсов к документу.

У элемента <link> часто можно встретить два атрибута:

  • rel= «» - определяет, что передаёт привязываемый ресурс HTML-документу.
  • href= «» - содержит URL на этот ресурс.

Примеры значений rel и href Вы можете посмотреть в моём коде на codepan. io.

<script>

Элемент <script> содержит JavaScript код, необходимый для работы сайта. Его можно встретить не только внутри <head>, но и внутри <body>. Подробнее об элементе <script> расскажу позже, когда доберусь до JavaScript.

<meta>

Довольно разнообразный по возможностям элемент. Разберём некоторые его популярные вариации.

-3

<meta charset= «utf-8» >. Задаёт кодировку веб-страницы (кодировка – это метод хранения символов). Сейчас используют кодировку UTF-8, поскольку она включает в себя большинство символов из всех известных человеку языков.

<meta content= «author» content= «Имя автора кода» >. Некоторые CMS по этой строчке находят автора HTML-кода и позволяют с ним связаться.

<meta name= «description» content= «Описание страницы» >. Значение атрибута content задаёт описание страницы. Именно оно прописано в поисковой выдаче под названием ссылки.

Задание

Хотите посмотреть, что будет с сайтом после удаления элемента <head>? Тогда:

  1. Зайдите на любой популярный сайт (например, YouTube: там элемент <head> отвечает за привязку стилей, так что изменения будут очевиднее).
  2. Откройте инструмент разработчика. Для этого нажмите правой кнопкой мыши в любой части экрана. В контекстном меню выберите «Посмотреть код» или «Исследовать» (в разных браузерах по-разному).
  3. Найдите окно с HTML-кодом. Внутри него должен быть элемент <head>. Удалите его.
  4. Теперь закройте инструмент разработчика. Вы увидите, мягко говоря, развалившийся сайт. Не пугайтесь: перезагрузите страницу, и всё вернётся на свои места.

Обобщающий конспект

-4