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

    HTML

    <head>

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

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

    1. Кратко
    2. Пример
    3. Как пишется
    4. На практике
      1. Дока Дог советует
      2. Алёна Батицкая советует
    5. На собеседовании
      1. Почему принято размещать <link> со стилями внутри <head>, а <script> перед закрывающим тегом </body>? Когда можно нарушить это правило?

    Кратко

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

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

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

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

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

    Это партнёрская рубрика, мы выпускаем её совместно с сервисом онлайн-образования Яндекс Практикум. Приносите вопрос, на который не знаете ответа, в задачи, мы разложим всё по полочкам и опубликуем. Если знаете ответ, присылайте пулреквест на GitHub.

    Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.

    Читайте также