Голова улыбающейся девочки между тегами 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> — это мозги, которые всем управляют. Метаданные и стили, которые прописываются в <head>, указывают, как ваша страница ведёт себя в тех или иных случаях.

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

Скопировано

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

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

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

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

На собеседовании

Скопировано
Задать вопрос в рубрику
🤚 Я знаю ответ