Тег <head> используется для определения заголовочной части HTML-документа.

<head> не отображается на веб-странице, но содержит информацию, которая может быть использована браузером и другими приложениями. Этот тег содержит мета-информацию о документе, такую как заголовок, ключевые слова, ссылки на стили, скрипты и другие данные, которые необходимы для правильного отображения и интерпретации веб-страницы.

Синтаксис тега <head>

<head>
  <title>Заголовок документа</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Примеры использования

Заголовок документа

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

<head>
  <title>Мой сайт</title>
</head>

Установка кодировки

Метатег <meta> внутри <head> используется для определения кодировки документа. Это необходимо для правильного отображения символов на странице.

<head>
  <meta charset="UTF-8">
</head>

Подключение CSS-файла

Тег <link> внутри <head> используется для подключения внешнего CSS-файла к странице. В примере ниже мы подключаем файл style.css, который содержит стили для нашей веб-страницы.

<head>
  <link rel="stylesheet" href="style.css">
</head>

Для чего использовать тег <head>

Определение заголовка страницы с помощью тега <title>:

<title>Заголовок страницы</title>

Определение описания страницы с помощью метатега description:

<meta name="description" content="Описание страницы">

Определение ключевых слов для страницы с помощью метатега keywords:

<meta name="keywords" content="ключевые слова">

Ссылка на файлы стилей с помощью тега <link>:

<link rel="stylesheet" href="styles.css"> 

Ссылка на файлы скриптов с помощью тега <script>:

<script src="script.js"></script>

Определение кодировки страницы с помощью метатега charset:

<meta charset="UTF-8">

Определение масштаба страницы для мобильных устройств с помощью метатега viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Подробнее в статье «Шаблон простого сайта на HTML».

Атрибуты тега <head>

Тег <head> не имеет своих атрибутов, но поддерживает все глобальные атрибуты HTML.

Ограничения

Тег <head> должен быть расположен внутри тега <html> и содержать информацию о документе, такую как заголовок страницы, метаданные, скрипты и стили.

Нюансы

  • Тег <head> не отображается на странице, а содержит только метаданные и ссылки на внешние ресурсы.
  • Заголовок страницы указывается внутри тега <title>.
  • Метаданные, такие как описание страницы, ключевые слова, автор и так далее, указываются с помощью тега <meta>.
  • Ссылки на внешние ресурсы, такие как скрипты, стили и иконки, указываются с помощью тегов <link> и <script>.

Поддержка браузерами

Тег & lt;head> поддерживается всеми современными браузерами. Для более подробной информации о поддержке смотрите сайт caniuse.

Альтернативные теги

Тег <head> не имеет альтернативных тегов.

Актуальность

Тег <head> является важной частью HTML-документа и по-прежнему актуален для использования в веб-разработке.


Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023