Кратко
СкопированоЭлемент <head> содержит основную информацию о документе: метаданные (например, заголовок окна или кодировку), ссылки на скрипты и таблицы стилей.
Эта информация не отображается на странице браузера. Пользователи увидят только заголовок окна страницы — его задаёт тег <title>, ну и фавиконку, если вы её поставите.
Пример
Скопировано
<html> <head> <title>Заголовок страницы</title> </head></html>
<html>
<head>
<title>Заголовок страницы</title>
</head>
</html>
Как пишется
СкопированоКроме <title>, внутри контейнера <head> можно разместить и другие элементы: <base>, <link>, <meta>, <script>, <style>, <template>, <noscript>. Вот пример того, как можно поставить фавиконку — маленькую иконку в углу вкладки браузера.
<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> является невидимой частью вашей страницы. По факту это блок, предназначенный для технической информации.
Единственное, что торчит наружу — заголовок страницы и фавиконка.
🛠 Есть ещё метатеги, нужные для правильного отображения сниппета вашего сайта в поисковых системах.
Поскольку этот тег невидим для пользователя, то и применять к нему стили не имеет никакого смысла. Вы просто не увидите никакого результата. Не тратьте своё время 🙂
На собеседовании
Скопировано отвечает
СкопированоКогда мы размещаем стили внутри тега <head>, браузер понимает, как и с какими стилями отрисовывать контент при первом рендере. То есть, чтобы отобразить страницу, браузеру нужно знать какой контент нарисовать (HTML) и как должны выглядеть элементы (CSS). Если браузер не получит CSS заранее, то HTML-элементы сначала отобразятся со стилями по умолчанию, а после загрузки CSS применятся новые стили. Это вызовет мигание контента. Добавление тега <link> co стилями в начало документа предотвращает повторную перерисовку.
Тег <script> обычно идёт перед закрывающимся тегом <. Это даёт уверенность, что элементы, к которым идёт обращение в скрипте, существуют на странице.
Мы можем размещать скрипт в <head>, если он должен выполнится первым и не полагается на то, существует ли элемент на странице. Или если добавляем атрибуты async или defer к тегу <script>. Про их отличия можно почитать подробнее в доке про <script>.
defer сообщает браузеру, что скрипт нужно загружать в фоновом режиме и запустить его, как только DOM-дерево будет полностью построено.
Ещё один способ — указать атрибут <script type, который говорит браузеру, что скрипт нужно запустить как модульный. Модульные скрипты по дефолту являются отложенными, то есть <script type равносильно <script type, и указание defer не будет иметь никакого эффекта.