Элемент head как найти

HTML Раздел Head

Элемент <head> представляет собой контейнер для метаданных (данные о данных) и помещается между тегами <html> и <body>.
Информация, вводимая в элемент <head>, не отображается в окне браузера, а помогает ему в обработке страницы.
Элементы, находящиеся внутри элемента <head>, играют очень важную роль: данные, содержащиеся в них, помогают браузеру в обработке страницы, а поисковым системам — в индексации документа.
Элемент <head> может содержать следующие теги: <title>, <style>, <meta>, <link>, <script>, и <base>.

Элемент <title>

Элемент <title> является единственным обязательным тегом заголовка и служит для того, чтобы дать документу название. Текст, размещенный внутри тега <title>, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке окна браузера. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.
Для каждого документа, элемент <title> не только необходим, но и очень полезен по ряду причин:

  • отсутствие названия документа заставит браузер при интерпретации HTML-кода вывести в заголовке окна браузера фразу типа Untitled Document (Документ без названия), что не соответствует ни тематике вашего сайта, ни его наполнению;
  • при попытке добавить созданный HTML-документ без элемента <title> в «закладки» браузера пользователю придется самостоятельно вписывать название добавляемой страницы;
  • поисковые системы, столкнувшись с безымянной страницей, занесут ее в свои базы данных под заголовком Untitled, что сделает такой документ безликим и похожим на миллионы других HTML-документов, размещенных в Интернете.

Пример HTML:

Попробуй сам

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wm-school.ru - онлайн учебники по HTML, CSS, JavaScript.</title>
</head>
<body>
Основной контент...
</body>
</html>

Элемент <meta>

С помощью элемента <meta> можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора html-документа и прочие свойства метаданных. Элемент <head> может содержать несколько элементов <meta>, потому что в зависимости от используемых атрибутов они несут различную информацию.

Кодировка HTML-страницы

Кодировку HTML-страницы нужно указывать для того, чтобы веб-браузер мог правильно отображать текст на странице. Если явно не указать кодировку, тогда браузер при отображении страницы будет определять ее автоматически. Если кодировка при этом будет определена не верно, то вместо текста будут отображаться иероглифы.
Самая распространённая современная кодировка — utf-8.

Указать браузеру пользователя какая кодировка используется на данной странице:

<meta charset="UTF-8">

Метаэлементы и поисковые системы

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

Описание содержимого страницы и ключевые слова:

<meta name="description" content="Описание содержимого страницы">
<meta name="keywords" content="Ключевые слова через запятую">

Для элемента <meta> доступны атрибуты charset, content, http-equiv, name, а также ‎глобальные атрибуты.

Атрибуты тега <meta>

Атрибут Значение / описание
charset Указывает кодировку символов для текущего HTML-документа: 

<meta charset="UTF-8">
content Определяет возвращаемое значение для свойства. Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name.
http-equiv Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте:
default-style — указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link>, который ссылается на таблицу стилей CSS, или идентификатор элемента <style>, содержащего таблицу стилей.
refresh — указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка «url=адрес_страницы».
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:

<meta http-equiv="refresh" content="30">

Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:

<meta http-equiv="refresh" content="0; url=https://wm-school.ru/">
name Обеспечивает дополнительное описание тега. Если этот атрибут опущен, он считается эквивалентным атрибуту http-equiv. Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv, charset или itemprop.
application-name — указывает название веб-приложения, используемого на странице.
author — используется для указания имени автора веб-страницы:

<meta name="author" content="Max White">

description — является описанием страницы, оно чаще всего используется поисковыми системами для определения, чему та посвящена, например:

<meta name="description" content="Описание содержимого страницы">

generator — указывает один из пакетов программного обеспечения, используемого для создания документа, например:

<meta name="generator" content="Joomla 3.5">

keywords — содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:

<meta name="keywords" content="Ключевые слова через запятую">

pragma — предотвращает кэширование страницы браузером, например:

<meta http-equiv="pragma" content="no-cache">

expires — может быть использован для указания того, когда у страницы должен истечь срок актуальности (и она
должна быть удалена из кэша), например:

<meta http-equiv="expires" content=" Fri, 04 Apr 2018 23:59:59 GMT">

robots — показывает, должны ли поисковые системы включать данную страницу в результаты поиска. Например, значение nofollow устанавливает, что поисковые системы могут включать данную страницу в результаты поиска, но не должны показывать страницы, на которые ведут ссылки с нее:

<meta name="robots" content="nofollow">

viewport — позволяет разработчикам управлять размером исходной области просмотра на различных устройствах:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width — указывает браузеру задать ширину области просмотра равную ширине экрана устройства какой бы она ни была;
initial-scale=1.0 — устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

Элемент <link>

Элемент <link> в НТМL-документе сообщает браузеру, где находится внешний файл CSS, используемый для форматирования страницы.

Элемент <link> должен использовать три следующих атрибута:

  • href — указывает путь к файлу CSS, который часто расположен в папке с именем css или
    styles;
  • type — определяет тип документа, на который указывает ссылка. Должно быть указано значение text/css;
  • rel — определяет отношение между НТМL-страницей и связанным файлом. При создании ссылки на файл
    CSS должно быть указано значение stylesheet.

В коде НТМL-страницы можно использовать более чем одну таблицу стилей. В этом случае для каждого файла CSS необходимо указать отдельный элемент <link>.

Пример HTML:

Попробуй сам

<link type="text/css" rel="stylesheet" href="mystyle.css">

Элемент <style>

Вы можете включить правила CSS в НТМL-страницу, поместив их внутри элемента <style>, который обычно находится в элементе <head>.

Пример HTML:

Попробуй сам

<style>
body {background-color:lime;}
p {color:red;}
</style>
Обратите внимание: в HTML5 атрибут type тега <style> указывать необязательно.

Элемент <script>

Элемент <script> позволяет присоединять к документу различные сценарии. Сам код сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента <script>.

В следующем примере внешний файл script.js подключается к HTML-документу и генерирует всплывающее окно при клике пользователем по кнопке:

Пример HTML:

Попробуй сам

<!DOCTYPE html>
<html>
<head>
<title>Javascript External Script</title>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<input type="button" onclick="Hello();" name="ok" value="Кликни меня">
</body>
</html>

Элемент <base>

Элемент <base> служит для указания полного базового URL-адреса документа, относительно которого вычисляются все относительные адреса. Это поможет избежать проблем в случае переноса вашей страницы в другое место. Иначе говоря, все ссылки будут работать, как и прежде.
Основным атрибутом элемента <base> является href. В качестве его значения используется адрес базовой папки, относительно которой и будут вычисляться относительные адреса. По умолчанию корневой адрес равен доменному имени сайта.
Еще одним полезным атрибутом этого тега является target. Атрибут target определяет, в какое окно будут загружаться страницы по ссылкам, встречающимся в HTML-документе. По умолчанию ссылки открываются в том же окне браузера.

Пример HTML:

Попробуй сам

<base href="http://www.wm-school.ru/images/" target="_blank">

Задачи

  • Переброска на другую страницу

    Сделайте так, чтобы через 5 секунд после загрузки страницы посетитель был переброшен по URL-адресу «../../html/html_head.html».

    Подсказка: Добавьте элемент <meta>. Установите для него атрибуты http-equiv и content

    Задача HTML:

    Посмотреть решение »

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--Пишите код здесь-->
</head>
<body>
<p>Сейчас вы узнаете о теге head</p>
</body>
    </html>

  • Ключевые слова

    Укажите для HTML-документа следующие ключевые слова: «HTML, CSS, JavaScript».

    Задача HTML:

    Реши сам »

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--Пишите код здесь-->
</head>
<body>
<p>Уроки HTML...</p>
</body>
    </html>

  • Описание страницы

    Укажите для текущей HTML-страницы следующее описание: «Уроки HTML».

    Задача HTML:

    Реши сам »

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--Пишите код здесь-->
</head>
<body>
<p>Уроки HTML...</p>
</body>
    </html>

  • Стиль для страницы

    Укажите для текущей HTML-страницы следующее стилевое оформление: цвет текста заголовка h1 — «blue», цвет текста абзаца р — «coral», фон страницы — «khaki».

    Задача HTML:

    Реши сам »

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--Пишите код здесь-->
</head>
<body>
<h1>Заголовок</h1> 
<p>Параграф</p>
</body>
    </html>

Источник

16.11.2020

Марат

3

0

html | html_tags |

Чаще всего тег head — это третий тег в структуре страницы. Тег head — это двойной тег.

Но для данного тега, закрывающийся тег считается необязательным(html5).

<head></head>

О теге head

  1. Что такое тег head
  2. Как посмотреть содержание тега head

  1. Что такое тег head

    Как уже было выше сказано, что такое тег head — это двойной тег, который, стоит вторым тегом на странице по умолчанию

    Синтаксис тега head

    <head></head>

    Как переводится на русский тег head

    тег head — переводится на русский, как «

    голова

    «

    Для чего нужен тег head

    тег head необходим для хранения других элементов, что позволяет браузеру быстрее их обнаружить!
    Содержимое тега head не показывается на странице, кроме мета тега title

    Свойство display тег head

    Если мы откроем исследовать элемент и попробуем посмотреть свойства тега head, то увидим, что у данного тега значение по умолчанию
    display:none

    Нажмите, чтобы открыть в новом окне.

    Свойство display тег head

    Какие теги допустимы в теге head

    Внутри тега <head> можно размещать следующие элементы: <base>, <basefont>, <bgsound>, <link>, <meta>, <script>, <style>, <title>.

  2. Как посмотреть содержание тега head

    Есть два способа посмотреть и проверить, что у вас в теге head

    Нажимаем «ctrl + U» по странице и получим весь код страницы, который отработал :

    Нажмите, чтобы открыть в новом окне.

    Как посмотреть содержание тега head

    И второй вариант нажимаем исследовать элемент и проверяем, что внутри тега head :

    Нажмите, чтобы открыть в новом окне.

    Как посмотреть содержание тега head

Не благодарите, но ссылкой можете поделиться!

COMMENTS+

 
BBcode

Источник

Элемент <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://artzolin.ru/">
</head>
<body>
    <p><a href="html-theory/html-head/">Руководство по HTML Head</a>.</p>
</body>
</html>

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

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

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

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

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

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

  • 18 декабря, 2019
  • 1163

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

  • 26 ноября, 2019
  • 87

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

  • 6 ноября, 2019
  • 97

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

Источник

Тег <head> (от англ. head — голова) предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными.

Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.

Содержимое <head> не отображается напрямую на веб-странице, за исключением элемента <title>, он задаёт заголовок окна веб-страницы.

Внутри контейнера <head> допускается размещать следующие элементы: <base>, <link>, <meta>, <script>, <style>, <title>.

Основные элементы

  • html
  • head
  • body

Синтаксис¶

Закрывающий тег не обязателен.

Атрибуты¶

Нет.

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

  • WHATWG HTML Living Standard
  • HTML5
  • HTML 4.01 Specification

Описание и примеры¶

<!DOCTYPE html>
<html>
  <head>
    <!-- Этот раздел предназначен для заголовка страницы
         и технической информации. -->
  </head>

  <body>
    <!-- А здесь надо размещать всё,
         что хочется увидеть на странице. -->
  </body>
</html>

Ссылки¶

  • Тег <head> MDN (рус.)
Источник

Для чего нужен HTML-тег head

Теги верхнего уровня <head /> и <body /> являются обязательными элементами веб-страницы и формируют ее структуру. В общих чертах разметка любого html-документа выглядит следующим образом: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Заголовок страницы</title>
</head>
<body>
    <p>Содержимое страницы</p>
</body>
</html>

Как видно выше, тег <head /> содержит метаданные о странице, а тег <body /> — непосредственно содержимое страницы. Информация внутри <head /> не видна пользователю (за исключением <title />, но об этом позже), зато активно используется:

  • роботами в процессе индексации вашего сайта,
  • соц. сетями и месседжерами, когда кто-то шарит страницу вашего сайта,
  • ну и конечно, самим браузером в процессе отрисовки страницы.

Какие теги помещаются между тегами <head> … </head>

В <head /> разрешается добавлять следующие теги title, meta, link, style, script, noscript, и base. Наличие любого из них является опциональным. Даже если <head /> будет пустым или вообще отсутствовать, браузер сможет отрисовать страницу, правда, выглядеть она скорее всего будет не очень.

Вот минимум, который стоит включать в каждую страницу

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Заголовок страницы</title>

Обычно <head /> выглядит примерно так:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Заголовок страницы</title>

<base href="https://site.com/page">

<link rel="icon" sizes="192x192" href="https://site.com/favicon.png">
<link rel="stylesheet" href="https://site.com/css/style.css">
<style>
    body {
        font-size: 14px;
    }
</style>

<script src="https://site.com/js/script.js"></script>
<script>
    alert('Lorem ipsum');
</script>

<noscript>
    <link rel="stylesheet" href="https://site.com/css/no-js.css">
</noscript>

Давайте теперь более подробно рассмотрим каждый тег…

Тег <title />

Этот тег определяет заголовок страницы, текст который вводится на вкладке браузера рядом с фавиконом (который, кстати тоже задается внутри тега <head />, но об этом чуть позже).

Кроме того, поисковые системы очень часто используют значение тега <title /> в качестве заголовка поискового сниппета, поэтому этот тег — абсолютный “мастхэв”.

Вот некоторые рекомендации по поводу заголовка страницы:

  • Следите за количеством символов (лучше не больше 50-60)
  • Не борщите с ключевиками
  • Помещайте основную ключевую фразу в начало заголовка
<title>Основная ключевая фраза - дополнительная фраза | Название сайта</title>

Тег <meta>

Этот тег используется для передачи метаданных о странице, т.е. с его помощью можно сообщить браузеру и роботам о том, какие данные и в каком виде на этой странице находятся. Это в общих чертах.

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

<meta> не имеет закрывающего тега и имеет следующие атрибуты:

  • charset — кодировка страницы
  • name — название метаданных, которые содержатся в данном теге
  • http-equiv — формат ответа сервера
  • content — само значение

Атрибуты name и http-equiv являются взаимоисключающими и не могут вместе находиться в одном теге.

Итак основная <meta>

<!--
    Кодировка документа. Лучше всего использовать универсальную - UTF-8.
    В ней корректно отображаются латинский алфавит, кириллические символы, иероглифы и эмодзи
-->
<meta charset="utf-8">

<!--
    Сообщаем браузеру, что ширина страницы определяется шириной экрана. Таким образом, независимо от того, на каком
    устройстве пользователь просматривает ваш сайт, ширина страницы будет совпадать с шириной экрана устройства
-->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--
    Короткое (не более 150 символов) описание контента страницы.
    Может быть использовано в сниппете поисковых систем
-->
<meta name="description" content="Описание того, что содержится на странице">

Как использовать meta name viewport?

Viewport — это размер видимой области страницы. Он, понятное дело, сильно отличается в зависимости от размера экрана устройства, на котором пользователь просматривает ваш сайт.

Если вы не используете meta name=viewport в разметке страницы, то скорее всего мобильный браузер просто уменьшит ее для того чтобы впихнуть в границы экрана. Контент на странице станет трудночитаемым и пользователю придется увеличивать части страницы и бесконечно скроллить, чтобы что-то разглядеть. Не айс.

Для решения этой проблемы используйте приведенный ниже код 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width сообщает браузеру о том, что ширина страницы должна быть привязана к ширине экрана устройства.

initial-scale=1.0 устанавливает начальный уровень зума.

Это все, конечно, здорово, но для того, чтобы сайт одинаково хорошо смотрелся на всех устройствах не достаточно. Нужно также максимально отказаться от фиксированных размеров элементов страницы и использовать media queries в CSS.

Обо всем этом в рамках данной статьи рассказать не получится. Обещаю посвятить теме адаптивного дизайна отдельную статью.

Дополнительная <meta>

<!--
    Рекомендуемый цвет окна браузера, когда в нем открыта вкладка с этой страницей.
    К сожалению, пока это актуально только для Chrome на Android, а также дефолтном браузере Samsung
-->
<meta name="theme-color" content="#51adf6">

<!-- Рекомендация Google не переводить содержимое страницы -->
<meta name="google" content="notranslate">

<!-- Подтверждение владения сайтом -->
<meta name="google-site-verification" content="verification_token"><!-- Google Search Console -->
<meta name="yandex-verification" content="verification_token"><!-- Yandex Webmasters -->

<!--
    Определение гео-данных. Может быть полезно, если ваш сайт нацелен на опреденный регион.
    Эта информация может быть использована поисковиками при формировании выдачи.
-->
<meta name="ICBM" content="55.7563885286146,37.61566760038"><!-- В формате широта, долгота -->
<meta name="geo.position" content="55.7563885286146,37.61566760038"><!-- В формате широта, долгота -->
<meta name="geo.region" content="RU"><!-- Код страны согласно стандарту ISO 3166 -->
<meta name="geo.placename" content="Moscow">

Это далеко не полный список того, что можно указать при помощи тега <meta />. Например, можно еще «сформировать» сниппет для шаринга страницы в соц. сетях и мессенджерах. Подробнее об этом смотрите в конце этой статьи.

Что такое meta http-equiv?

Мета-теги с атрибутом http-equiv — довольно сложная для восприятия тема. Говоря простым языком, при помощи таких тегов можно передавать браузеру информацию о том, как следует обрабатывать страницу в формате заголовка ответа сервера.

При помощи тегов <meta> с атрибутом http-equiv можно, например, обновлять страницу или перенаправлять на другую

<!-- Обновление страницы через 5 минут -->
<meta http-equiv="refresh" content="300">

<!-- Перенаправление на https://site.com через 10 секунд -->
<meta http-equiv="refresh" content="10;URL='https://site.com/'" />

В HTML5 большая часть meta http-equiv не поддерживается (set-cookie, expires).

Тег <link>

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

<link> также не имеет закрывающего тега и его параметры передаются в виде атрибутов.

Ниже приведены наиболее распространенные примеры использования тега <link>:

<!-- Подключение внешнего CSS-файла -->
<link rel="stylesheet" href="https://site.com/css/style.css">

<!-- Подключение фавиконки -->
<link rel="icon" sizes="192x192" href="https://site.com/favicon.png">

<!--
    Определение канонического URL. Таким образом можно сообщить поисковым роботам о том,
    что указанная страница (например, https://site.com/posts/post1234) является "первоисточником",
    а другие страницы со схожим контентом (например, https://site.com/posts/post1234?from=search) - это ее вариации.
    Это позволит избежать проблем с попаданием в индекс дублей, а также передавать весь "вес" неканонических URLов
    каноническим.
-->
<link rel="canonical" href="https://site.com/posts/post-1234">

<!--
    Альтернативные версии страницы (например, на другом языке, или для других устройств)
-->
<link rel="alternate" href="https://en.example.com/" hreflang="en">
<link rel="alternate" media="only screen and (max-width: 640px)"  href="http://m.site.com/">

Вот еще несколько примеров использования <link>

<!--
    Ссылка на страницу, которая находится выше данной в иерархической структуре,
    т.е. является родительской страницей
-->
<link rel="index" href="https://site.com/top-level/">

<!--
    Ссылки на первую, последнюю, предыдущую, следующую страницы (соответственно)
    в серии страниц
-->
<link rel="first" href="https://site.com/page/1">
<link rel="last" href="https://site.com/page/30">
<link rel="prev" href="https://site.com/page/5">
<link rel="next" href="https://site.com/page/7">

<!-- Ссылки на RSS-фиды -->
<link rel="alternate" href="https://feeds.feedburner.com/site" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://site.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

<!-- Предзагрузка контента на странице для оптимизации скорости загрузки -->
<link rel="dns-prefetch" href="https://site.com/">
<link rel="preconnect" href="https://site.com/">
<link rel="prefetch" href="https://site.com/">
<link rel="prerender" href="https://site.com/">
<link rel="preload" href="https://site.com/image.png" as="image">
<!-- ### Если вам интересно узнать об этом подробнее, напишите в комментариях ### -->

Тег <style />

Этот тег используется для вывода информации о стилях элементов на странице. Внутри тега используется тот же синтаксис, что и в CSS-файле. Если вам нужно задать стили каким-либо элементам на странице, и по какой-то причине вы не можете или не хотите выносить эти стили в CSS-файл, их можно описать внутри этого тега.

Этот тег может быть использован в разметке страницы неоднократно, и его можно помещать не только в <head />, но и в <body />.

<head>
    <style>
        body {
            background: #EFEFEF;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <style>
        #container {
            background: #000;
            font-size: 16px;
        }
    </style>
    <div id="container">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</body>

Тег <script />

Этот тег может использоваться как для вывода javascript-кода, так и для подключения внешних js-файлов. Во втором случае необходимо использовать атрибут src, при этом внутри тега не должно ничего быть.

<script src="https://site.com/js/jquery.js"></script>
<script>
    jQuery(document).ready(function($){
       $('body').append('<p>Lorem ipsum dolor sit amet</p>');
    });
</script>

Как и <style />, тег <script /> может быть использован в разметке страницы неоднократно, и его можно помещать не только в <head />, но и в <body />.

Тег <noscript />

Этот тег используется для вывода контента, который предназначен исключительно для браузеров, в которых отключена поддержка javascript. Это своеобразный контейнер, внутри которого можно размещать другие валидные в <head /> элементы: <meta>, <link>, <style />.

<head>
    <link rel="stylesheet" href="https://site.com/css/style.css">
    <noscript>
        <link rel="stylesheet" href="https://site.com/css/no-js.css">
    </noscript>
</head>

<body>
    <noscript>
        <style>
            #no-js {
                background: red;
                color: white;
                padding: 12px;
            }
        </style>
        <p id="no-js">Для корректной работы сайта, пожалуйста, включите в настройках браузера поддержку javascript</p>
    </noscript>
</body>

Если тег <noscript /> используется внутри <body />, в него можно помещать любой валидный HTML.

Тег <base>

Этот тег используется для указания базового URL для всех относительных путей на странице и/или дефолтного значения атрибута target ссылок на странице.

<head>
    <!-- Определение базовых параметров ссылок на странице -->
    <base href="https://site.com/" target="_blank">
</head>

<body>
    <!--
        Когда пользователь кликнет по этой ссылке, у него в новой вкладке откроется адрес
        https://site.com/pages/page-123
    -->
    <a href="pages/page-123">Какая-то страница</a>
</body>

Тег <base> может размещаться только в <head /> и должен быть только один. Наличие этого тега необязательно, если вы используете абсолютные пути.

Бонус: Микро разметка Open Graph для шаринга

Социальные кнопки для шаринга в соц. сетях и мессенджерах уже давно стали практически неотъемлемой частью современного интернета и сейчас редко встретишь сайт, на котором их нет. Пользователи с удовольствием делятся интересным и/или полезным контентом в своих профилях, тем самым привлекая дополнительную аудиторию.

При нажатии на кнопку Поделиться парсеры соц. сетей пытаются разобраться в том, что за контент находится на добавляемой странице, и, исходя из этого, сформировать сниппет. Для облегчения этой задачи была создана специальная микроразметка Open Graph, при помощи которой парсеру можно сообщить, какой контент находится на странице.

По сути Open Graph это набор мета-тегов с атрибутом property, в которых можно указать заголовок страницы, ее краткое описание, превью-изображение, язык, название сайта и т.д.

<meta property="og:url" content="https://site.com/pages/page-123"> <!-- URL данной страницы -->
<meta property="og:type" content="website"> <!-- Тип контента (для страниц используйте тип website) -->
<meta property="og:title" content="Заголовок страницы">
<meta property="og:description" content="Краткое описание контента на странице">
<meta property="og:image" content="https://site.com/images/image.jpg"> <!-- Превью -->
<meta property="og:image:alt" content="Описание того, что изображено на превью">
<meta property="og:site_name" content="Название сайта">
<meta property="og:locale" content="ru_RU"> <!-- Язык контента на странице -->

Хотя изначально разметка Open Graph создавалась для Facebook, сейчас ее понимают большинство соц. сетей и мессенджеров, хотя интерпретируют ее немного по-своему.

Попробуйте поделиться этой статьей в различных соц. сетях и сравните сниппеты.

В заключение хочу подытожить все вышесказанное.

Тег <head /> является обязательным структурным элементом любого HTML-документа. Это своеобразный контейнер для тегов, которые описывают то, что находится в документе и как это нужно выводить (title, meta, style, base). Кроме того, в <head /> подключаются скрипты и стили, а также другие файлы необходимые для корректной отрисовки страницы (link, script).

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

Источник

Понравилась статья? Поделить с друзьями:
  • Как найти удаленную почту в gmail com
  • Как составить план изложения 9 класс огэ
  • Как найти площадь треугольника через среднюю линию
  • Судья не колеблясь исправил свою ошибку как пишется
  • Как найти киз на лекарство