HTML тег <head>

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

Синтаксис

Содержимое тега пишется между открывающим (<head>) и закрывающим (</head>) тегами.

Тег <head> включает в себя следующие элементы:

  • Тег <title> задает заголовок окна веб-страницы (обязательный элемент).
  • Тег <style> сообщает о том, что в HTML документе используется код CSS.
  • Тег <base> задает базовый абсолютный URL для всех относительных URL-адресов.
  • Тег <link> определяет отношение между текущим HTML-документом и ресурсом, на который он ссылается, либо содержит ссылку на внешнюю таблицу стилей.
  • Тег <meta> предоставляет дополнительную информацию (метаданные) об HTML-документе.
  • Тег <script> содержит скрипт (как правило на языке JavaScript), либо указывает на внешний файл со скриптом.
  • Тег <noscript> устанавливает альтернативный текст, который показывается, если браузер не поддерживает скрипты либо пользователь сам их отключил.

Пример

<!DOCTYPE html>
<html>
  <head>
      <title>Заголовок документа</title>
  <style type="text/css">
      body {
        background-color: #d3d3d3;
      }
      p {
        color:  #1c87c9;
      }
      a {
        color: red;
      }
    </style>
  </head>
  <body>
     <p>Абзац</p>
     <a>Ссылка</a>
  </body>
</html>

Результат

В нашем примере в теге <head> мы использовали два тега - <title> и <style>. В теге <title> мы установили заголовок документа, который отображается в окне браузера. В теге <style> мы задали стили документа: фон документа будет оранжевым, текст в абзацах, обозначенных тегом <p>, будет синего цвета, а ссылки, обозначенные тегом <a> - розового.

Пример

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
<p> Содержимое страницы</p>
  </body>
</html>

Результат

В нашем примере мы указали ссылку на содержащийся в CSS папке документ style.css, в котором содержатся стили документа.

Пример

<!DOCTYPE html>
<html>  
   <head>
       <meta name="title" content="Учебник HTML и CSS">
       <meta name="description" content="Основы HTML и CSS для начинающих"> 
       <meta http-equiv="refresh" content="30">
   </head>
   <body>
        <p> Содержимое страницы</p>
    </body>
</html>

Результат

В теге <meta> мы записали предназначенные для поисковиков метаданные - заголовок и описание (meta title, meta description).

Атрибуты

Атрибут Значение Описание
profile URL Указывает адрес профиля метаданных.
Не поддерживается в HTML5.
media media_query Указывает, для какого медиа / устройства оптимизирован медиаресурс.
Новый элемент в HTML5.
type text/css Указывает тип мультимедиа для тега <style>.
Новый элемент в HTML5.

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

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





Похожие статьи