HTML тег <meta>

Значение и применение

Тег <meta> обеспечивает метаданные о HTML документе. Метаданные не отображаются на странице, но интерпретируются браузерами и поисковыми системами.

Мета элементы, как правило, используются, чтобы указать описание страницы, ключевые слова, автора документа и другие метаданные. Разрешается и, как правило, необходимо использовать несколько метатегов. Тег <meta> всегда размещается внутри тега <head>. XHTML требует закрывающего тега <meta/>, в HTML элемент считается одиночным.

Подробную информацию о использовании мета тегов вы можете получить также в статье учебника HTML 5 "Метаданные в HTML".

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

Тег	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<meta>	Да	Да	Да	Да	Да	Да

Атрибуты

Атрибут	Значение	Описание
charset	character_set	Задает кодировку символов для HTML документа.
content	text	Задает значение, связанное с атрибутами name и http-equiv, в зависимости от контекста.
http-equiv	content-security-policy content-type default-style refresh	Фактически эквивалентен гипертекстовому заголовку (имитация http-заголовка), формируют заголовок страницы и определяют его обработку. Как правило, они управляют действиями браузеров и используются для формирования информации, выдаваемой обычными http-заголовками.
name	application-name author description generator keywords	Определяет имя документа на уровне метаданных.
scheme	format/URI (универсальный идентификатор ресурса)	Не поддерживается в HTML 5. Указывает полезную информацию о схеме или названии самой схемы, которая должна быть использована для уточнения значения свойства атрибута content.

Пример использования

Указание кодировки документа

Тег <meta> позволяет сообщить браузеру посетителя, какой набор символов и какую кодировку необходимо установить на веб-странице. Атрибут charset html5 (HTML тега <meta>) задает кодировку символов для HTML документа.

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" >  <!-- задаем кодировку документа UTF-8 -->
		<title>Пример использования тега <meta></title>
	</head>
	<body>
		<h2>Это заголовок.</h2>
		<p>Это параграф.</p>
	</body>
</html>

В данном примере мы задали кодировку документа UTF-8 с использованием элемента <meta> и атрибута charset html5 . Кодировка UTF-8 одна из общепринятых и стандартизированных кодировок текста, которая позволяет хранить символы Юникода.

Часто используемые мета-теги

Метаданные разделены на две основные группы:

первая группа - значения атрибута name.
вторая группа - значения атрибута http-equiv.

Атрибут name отвечает за текстовую информацию о странице, её авторе, содержит рекомендации для поисковых систем, а атрибут http-equiv формирует гипертекстовый заголовок страницы и определяет его обработку.

Совместно с элементом <meta> используется еще один атрибут - content, его основная задача заключается в том, чтобы задать значения, связанное с атрибутами name и http-equiv, в зависимости от контекста.

Рассмотрим часто используемые варианты использования тега <meta>:

<meta name = "description" content = "Бесплатные уроки по созданию сайтов" >

Описание в данном теге довольно важное, его учитывают поисковые машины при индексации. Атрибут content в данном примере содержит описание конкретной веб-страницы сайта. Не рекомендуется использовать длинные описания.

<meta name = "keywords" content = "HTML, CSS, JavaScript">

Представляет собой список ключевых слов (касающиеся конкретной страницы). Ходит много споров о том учитывается или нет поисковыми системами это значение, исходя из перечня, используемых метатегов в Google, то он не учитывает этот мета тег, а Яндекс, в некоторых случаях оставляет за собой право его использовать.

Определяет автора контента:

<meta name = "author" content = "Denis Bolshakov">

Индексация страниц

Используется поисковыми системами при индексации страниц:

<meta name = "robots" content = "noindex, follow">

Доступные значения:

Значение атрибута	Определение
noindex	запрещает индексирование документа.
nofollow	запрещает проход по ссылкам в документе.
index	разрешает индексирование документа.
follow	разрешает проход по ссылкам в документе.

Настройка области просмотра

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

Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо в теге <head> разместить метатег, который сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб:

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

Атрибут name задает имя документа метаданным, значение "viewport" дает подсказку браузеру о размере начального размера области просмотра. Функция атрибута content задать значения для этого атрибута.
Значение width=device-width атрибута content сообщает, что ширина страницы устанавливается в соответствии с размером экрана устройства в аппаратно-независимых пикселях (device-independent pixel, dip), что позволяет странице пересчитывать положение элементов для корректного отображения на различных экранах. По аналогии допускается указать значения для высоты height=device-height.
Значение initial-scale=1 атрибута content сообщает браузеру, что необходимо установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства (альбомной или портретной).

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

Доступные значения:

Значение атрибута	Определение
width	Определяет ширину в пикселях области просмотра (значение - положительное целое число или device-width).
height	Определяет высоту в пикселях области просмотра (значение - положительное целое число или device-height).
initial-scale	Определяет соотношение между шириной устройства (device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра. Чем больше число, тем выше масштаб. Значение - положительное целое число от 0.0 до 10.0.
minimum-scale	Определяет минимальное значение zoom (оно должно быть меньше или равно maximum-scale). Значение - положительное целое число от 0.0 до 10.0.
maximum-scale	Определяет максимальное значение zoom (оно должно быть больше или равно minimum-scale). Значение - положительное целое число от 0.0 до 10.0.
user-scalable	Логическое значение, которое определяет, может ли пользователь увеличить масштаб веб-страницы. Значение по умолчанию yes (пользователь может увеличивать масштаб).

Отличия HTML 4.01 от HTML 5

В HTML 5 введён новый атрибут charset html5

, атрибут scheme был удален.

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги