Заголовок страницы

HTML тег

Тег содержит головные элементы HTML документа, цель которых сообщать браузерам и поисковым системам техническую информацию о веб-странице (метаданные, стили, ссылки и т.д.). Пользователям эта информация не показывается.

Синтаксис

Содержимое тега пишется между открывающим () и закрывающим () тегами.

Тег включает в себя следующие элементы:

Пример

html> html> head> title>Заголовок документа title> style type="text/css"> body < background-color: #d3d3d3; > p < color: #1c87c9; > a < color: red; > style> head> body> p>Абзац p> a>Ссылка a> body> html>

Результат

В нашем примере в теге мы использовали два тега — и . В теге мы установили заголовок документа, который отображается в окне браузера. В теге мы задали стили документа: фон документа будет оранжевым, текст в абзацах, обозначенных тегом , будет синего цвета, а ссылки, обозначенные тегом — розового.

Пример

html> html> head> link rel="stylesheet" type="text/css" href="css/style.css"> head> body> p> Содержимое страницы p> body> html>

Результат

В нашем примере мы указали ссылку на содержащийся в CSS папке документ style.css, в котором содержатся стили документа.

Пример

html> html> head> meta name="title" content="Учебник HTML и CSS"> meta name="description" content="Основы HTML и CSS для начинающих"> meta http-equiv="refresh" content="30"> head> body> p> Содержимое страницы p> body> html>

Результат

Атрибуты

Атрибут	Значение	Описание
profile	URL	Указывает адрес профиля метаданных. Не поддерживается в HTML5.
media	media_query	Указывает, для какого медиа / устройства оптимизирован медиаресурс. Новый элемент в HTML5.
type	text/css	Указывает тип мультимедиа для тега . Новый элемент в HTML5.

Тег также поддерживает глобальные атрибуты и атрибуты событий.

Источник

: элемент метаданных документа

HTML-элемент содержит машиночитаемую информацию (metadata) о документе, например его заголовок, скрипты и страницы стилей.

Примечание: в основном содержит информацию для машинной обработки, а не для восприятия человеком. Информацию, видимую человеком, такую как заголовки верхнего уровня и перечисленные авторы, смотрите в элементе .

Категории контента	Отсутствуют.
Допустимое содержимое	Если документ является документом (en-US) с атрибутом srcdoc (en-US) , или если информация о заголовке доступна из протокола более высокого уровня (например, строки темы в электронном письме HTML), то ноль или более элементов содержащих метаданные.Иначе, один или более элементов содержащих метаданные, один из которых является элементом .
Пропуск тегов	Открывающий тег может быть пропущен, если первым, что находится внутри элемента является другой элемент. Закрывающий тег может быть пропущен, если первое, что следует за элементом не является пробелом или комментарием.
Допустимые родители	Элемент ( является его первым дочерним элементом).
Допустимые ARIA-роли	нет
DOM-интерфейс	HTMLHeadElement

Атрибуты

К этому элементу применимы глобальные атрибуты.

URI (en-US) одного или более профилей метаданных, разделённых пробелами.

Пример

doctype html> html> head> title>Заголовок страницыtitle> head> html> 

Примечание

HTML5-совместимые браузеры автоматически создают элемент , если его теги пропущены в разметке. Такое поведение не гарантируется в старых браузерах.

Спецификации

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 21 июн. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник

Html стандартные теги head

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

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

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

   Обновлено 20 декабря 2021

   Кратко

   Скопировать ссылку «Кратко» Скопировано

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

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

   

   Пример

   Скопировать ссылку «Пример» Скопировано

          html> head> title>Заголовок страницыtitle> head> html>    Скопировать Скопировано Не удалось скопировать   

   Как пишется

   Скопировать ссылку «Как пишется» Скопировано

   Кроме , внутри контейнера можно разместить и другие элементы: , , , , . Вот пример того, как можно поставить фавиконку — маленькую иконку в углу вкладки браузера.

        head> link rel="shortcut icon" type="image/png" href="/favicon.png"> head>    Скопировать Скопировано Не удалось скопировать   

   На практике

   Скопировать ссылку «На практике» Скопировано

   Дока Дог советует

   Скопировать ссылку «Дока Дог советует» Скопировано

   🛠 — это мозги, которые всем управляют. Метаданные и стили, которые прописываются в , указывают, как ваша страница ведёт себя в тех или иных случаях.

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

   Скопировать ссылку «Алёна Батицкая советует» Скопировано

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

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

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

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

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

   Скопировать ссылку «На собеседовании» Скопировано

   Почему принято размещать со стилями внутри , а перед закрывающим тегом < / body>? Когда можно нарушить это правило?

   Скопировать ссылку «Почему принято размещать link со стилями внутри head, а script перед закрывающим тегом /body? Когда можно нарушить это правило?» Скопировано

   Скопировать ссылку «Марина Дорошук отвечает» Скопировано

   Когда мы размещаем стили внутри тега , браузер понимает как и с какими стилями отрисовывать контент при первом рендере. То есть, чтобы отобразить страницу, браузеру нужно знать какой контент нарисовать (HTML) и как должны выглядеть элементы (CSS). Если браузер не получит CSS заранее, то HTML-элементы сначала отобразятся со стилями по умолчанию, а после загрузки CSS применяться новые стили. Это вызовет мигание контента. Добавление тега co стилями в начало документа предотвращает повторную перерисовку.

   Тег обычно идёт перед закрывающимся тегом < / body>. Это даёт уверенность, что элементы, к которым идёт обращение в скрипте, существуют на странице.

   Мы можем размещать скрипт в , если он должен выполнится первым и не полагается на то, существует ли элемент на странице. Или если добавляем атрибуты async или defer к тегу . Про их отличия можно почитать подробнее в доке про .

   defer сообщает браузеру, что скрипт нужно загружать в фоновом режиме и запустить его, как только DOM-дерево будет полностью построено.

   Ещё один способ — указать атрибут , который говорит браузеру, что скрипт нужно запустить как модульный. Модульные скрипты по дефолту являются отложенными, то есть равносильно , и указание defer не будет иметь никакого эффекта.

   Источник

   Читайте также:  Редактор html страниц позволяет вставить таблицу 1с