Голова улыбающейся девочки между тегами head. В голове теги title, style, script, base, link и логотип Доки
Иллюстрация: Кира Кустова

<head>

Какие настройки страницы скрываются в невидимой голове? Говорим о заголовке страницы, фавиконке, способах подключения стилей и скриптов.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Элемент <head> содержит основную информацию о документе: метаданные (например, заголовок окна или кодировку), ссылки на скрипты и таблицы стилей.

Эта информация не отображается на странице браузера. Пользователи увидят только заголовок окна страницы — его задаёт тег <title>, ну и фавиконку, если вы её поставите.

Пример выдачи страницы в поисковике, показаны заголовок и фавикон

Пример

Секция статьи "Пример"
        
          
          <html>  <head>    <title>Заголовок страницы</title>  </head></html>
          <html>
  <head>
    <title>Заголовок страницы</title>
  </head>
</html>

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

Кроме <title>, внутри контейнера <head> можно разместить и другие элементы: <base>, <link>, <meta>, <script>, <style>. Вот пример того, как можно поставить фавиконку — маленькую иконку в углу вкладки браузера.

        
          
          <head>  <link rel="shortcut icon" type="image/png" href="/favicon.png"></head>
          <head>
  <link rel="shortcut icon" type="image/png" href="/favicon.png">
</head>

        
        
          
        
      

На практике

Секция статьи "На практике"

Алёна Батицкая советует

Секция статьи "Алёна Батицкая советует"

🛠 <head> является невидимой частью вашей страницы. По факту это блок, предназначенный для технической информации.

Единственное, что торчит наружу — заголовок страницы и фавиконка.

🛠 Есть ещё метатеги, нужные для правильного отображения сниппета вашего сайта в поисковых системах.

Поскольку этот тег невидим для пользователя, то и применять к нему стили не имеет никакого смысла. Вы просто не увидите никакого результата. Не тратьте своё время 🙂