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

Элементы <head> описывают свойства документа, такие как заголовок (title), character, мета-информацию для SEO, иконки favicon, ссылки на CSS-стили и Js-скрипты для корректной работы HTML-документа и т.д.

HTML-элементы, которые можно использовать внутри элемента: <title>, <base>, <link>, <style>, <meta>, <script> и <noscript>.

HTML-элемент <title>

Элемент <title> определяет заголовок документа. Элемент title является обязательным во всех HTML/XHTML документах для того, чтобы они были валидными.

В документе разрешен только один элемент title, и он должен располагаться в элементе <head>. Элемент title должен содержать простой текст, описывающий тему текущей страницы; он не может содержать другие теги разметки.

Название документа может использоваться для разных целей. Например:

  • Для отображения заголовка в строке заголовка браузера и в панели задач;
  • Для отображения заголовка, когда она добавляется в избранное или в закладки;
  • Чтобы отобразить заголовок веб-страницы в результатах поиска.

В следующем примере показано, как разместить заголовок в документе HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>A simple HTML document</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

Хороший заголовок должен быть коротким и соответствовать содержанию документа, поскольку поисковые роботы обращают особое внимание на слова, используемые в заголовке. Название в идеале должно быть менее 65 символов в длину. Смотрите руководство по созданию правильного title

HTML-элемент <base>

HTML-элемент <base> используется для определения базового URL для всех относительных ссылок, содержащихся в документе. Например, вы можете установить базовый URL один раз в верхней части своей страницы, и тогда все последующие относительные ссылки будут использовать этот URL. Вот пример:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Defining a base URL</title>
    <base href="https://zolin.digital/">
</head>
<body>
    <p><a href="html-theory/html-head/">Руководство по HTML Head</a>.</p>
</body>
</html>

Гиперссылка в приведенном выше примере будет преобразована в https://zolin.digital/html-theory/html-head/ независимо от URL текущей страницы. Это связано с тем, что относительный URL-адрес, указанный в ссылке: html-theory/html-head/, добавляется в конец базового URL-адреса: https://zolin.digital/.

HTML-элемент <base> должен появляться перед любым элементом, который ссылается на внешний ресурс. HTML допускает только один базовый элемент для каждого документа.

Элемент <link> определяет связь между текущим документом и внешними ресурсами. Обычно <link> используется для ссылки на внешние CSS-таблицы или Js-скрипты.

<head>
    <title>Linking Style Sheets</title>
    <link rel="stylesheet" href="style.css">
</head>

Подробнее см. Руководство по CSS.

Элемент <head> документа HTML может содержать любое количество элементов <link>. У элемента <link> есть атрибуты, но не может быть содержимого.

HTML-элемент <style>

Элемент <style> используется для определения информации о встроенных стилях в HTML-документе. Правила внутри элемента <style> определяют, как HTML-элементы должны отображаться в браузере.

<head>
    <title>Embedding Style Sheets</title>
    <style>
        body { background-color: YellowGreen; }
        h1 { color: red; }
        p { color: green; }
    </style>
</head>

Встроенные CSS-таблицы должны использоваться, когда текущий документ имеет уникальные стили. Если одна и та же таблица стилей используется в нескольких документах, то правильнее использовать внешнюю таблицу стилей. Подробнее см. Руководство по стилям в HTML.

HTML-элемент <meta>

Элемент <meta> предоставляет метаданные об HTML-документе. Метаданные — это набор данных, которые описывают и предоставляют информацию о других данных. Вот пример:

<head>
    <title>Specifying Metadata</title>
    <meta charset="utf-8">
    <meta name="author" content="John Smith">
</head>

Подробнее о метаданных в следующей главе.

HTML-элемент <script>

Тег <script> используется для встраивания ссылки на исполняемый скрипт на стороне клиента (например, JavaScript) в документах HTML/XHTML. Тег <script> может появляться любое количество раз в элементе <head>.

В следующем примере в браузере отобразится приветственное сообщение:

<head>
    <title>Adding JavaScript</title>
    <script>
        document.write("<h1>Hello World!</h1>") 
    </script>
</head>

Элементы script и noscript будут подробно разобраны в Руководстве по скриптам в HTML.

Похожие посты

Руководство по тегам и элементам в HTML

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…

Руководство по мета-тегам в HTML

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.