Элемент <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.

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

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

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

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