`<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> является невидимой частью вашей страницы. По факту это блок, предназначенный для технической информации.

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

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

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