| Справочник HTML
Элемент <meta> определяет метаданные (технические данные) HTML-документа. К подобным данным относят краткое описание страницы, ключевые слова, данные об авторе документа, о последнем изменении документа и т.д. Метаданные не отображаются на странице, но интерпретируются браузерами и поисковыми системами.
Разрешается использовать более чем один метатег, все они размещаются в контейнере <head>.
Метаданные документа выражаются в виде пар «имя-значение» («свойство-значение»), где атрибуты name или http-equiv указывают имя (свойство), а атрибут content этого же элемента указывает значение.
Если задается атрибут name или http-equiv, то должен быть задан атрибут content. В обратном случае атрибут content не используется.
Синтаксис
<head>
<meta>
</head>
Закрывающий тег
Не требуется.
Атрибуты
- charsetHTML5
- Указывает кодировку символов для текущего HTML-документа. Авторам рекомендуется использовать значение UTF-8.
- content
- Устанавливает значение атрибута, заданного с помощью name или http-equiv.
- http-equiv
- Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте:
default-style
— указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link>, который ссылается на таблицу стилей CSS, или идентификатор элемента <style>, содержащего таблицу стилей.refresh
— указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка «url=адрес_страницы».
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:<meta http-equiv="refresh" content="30">
<meta http-equiv="refresh" content="0; url=http://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
— позволяет разработчикам управлять размером исходной области просмотра на различных устройствах:
width=device-width — указывает браузеру задать ширину области просмотра равную ширине экрана устройства какой бы она ни была;<meta name="viewport" content="width=device-width, initial-scale=1.0">
- scheme
- Указывает полезную информацию о схеме или названии самой схемы, которая должна быть использована для уточнения значения свойства атрибута content.
Элемент поддерживает глобальные атрибуты и события.
Стилизация по умолчанию
Нет.
Различия между HTML 4.01 и HTML5
Атрибут scheme не поддерживается в HTML5.
В HTML5 был добавлен атрибут charset, который облегчил определение кодировки символов страницы:
- HTML 4.01: <meta http-equiv=»content-type» content=»text/html; charset=UTF-8″>
- HTML5: <meta charset=»UTF-8″>
Пример использования:
Определяем метаинформацию о HTML документе:
Пример HTML:
Попробуй сам<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="HTML, Meta Tags, метаданные">
<meta name="description" content="Сайт об HTML и CSS">
</head>
<body>Основное содержимое страницы</body>
</html>
Спецификации
Поддержка браузерами
Элемент | ||||||
<meta> | 2+ | 1+ | 3.5+ | 1+ | 1+ | 1+ |
Элемент | ||||
<meta> | 1+ | 1+ | 6+ | 1+ |
Дополнительная информация
Группа значений атрибута NAME
Группа значений атрибута HTTP-EQUIV
HTML уроки: HTML Мета-теги
HTML Раздел Head
HTML Элементы
wm-school.ru
Учебник HTML 5. Статья «Метаданные в HTML»
Тег <meta> обеспечивает метаданные о HTML документе. Метаданные не отображаются на странице, но интерпретируются браузерами и поисковыми системами.
Мета элементы, как правило, используются, чтобы указать описание страницы, ключевые слова, автора документа и другие метаданные. Разрешается и, как правило, необходимо использовать несколько метатегов. Тег <meta> всегда размещается внутри тега <head>.
Указание кодировки документа
Тег <meta> позволяет сообщить браузеру посетителя, какой набор символов и какую кодировку необходимо установить на веб-странице. Атрибут charset (HTML тега <meta>) задает кодировку символов для HTML документа.
<!DOCTYPE html> <html> <head> <meta charset = "utf-8" > <!-- задаем кодировку документа UTF-8 --> <title>Пример использования тега <meta></title> </head> <body> <h3>Это заголовок.</h3> <p>Это параграф.</p> </body> </html>
В данном примере мы задали кодировку документа UTF-8 с использованием элемента <meta> и атрибута charset. Кодировка UTF-8 одна из общепринятых и стандартизированных кодировок текста, которая позволяет хранить символы Юникода.
Стандарт HTML 5 не запрашивает конкретную кодировку, но дает рекомендацию использовать кодировку UTF-8. Не рекомендуется использовать кодировки ASCII, CESU-8, UTF-7, BOCU-1, SCSU и UTF-32 по различным причинам.
Считается хорошей практикой, и настоятельно рекомендуется определять набор символов (кодировку), используя атрибут charset. Атрибут charset является лишь частью алгоритма определения кодировки страницы браузером. Рекомендуется указывать кодировку символов первым <meta> элементом (если используется несколько). Обратите внимание, что для одного документа указывается только одна кодировка.
В теории, любая кодировка может быть использована, но ни один браузер не понимает их все. Используя более распространенную кодировку символов, увеличивает шанс того, что браузер будет её понимать. Полный перечень кодировок доступен на сайте iana.org.
Часто используемые мета-теги
Метаданные разделены на две основные группы:
- первая группа — значения атрибута name.
- вторая группа — значения атрибута http-equiv.
Атрибут name отвечает за текстовую информацию о странице, её авторе, содержит рекомендации для поисковых систем, а атрибут http-equiv формирует гипертекстовый заголовок страницы и определяет его обработку.
Совместно с элементом <meta> используется еще один атрибут — content, его основная задача заключается в том, чтобы задать значения, связанное с атрибутами name и http-equiv, в зависимости от контекста. Если один из этих атрибутов указан, то атрибут content должен обязательно присутствовать, чтобы задать значение. Если атрибут http-equiv используется, то атрибут name не должен устанавливаться в мета-теге.
Рассмотрим часто используемые варианты использования тега <meta>:
<meta name = "description" content = "Бесплатные уроки по созданию сайтов" >
Описание в данном теге довольно важное, его учитывают поисковые машины при индексации. Атрибут content в данном примере содержит описание конкретной веб-страницы сайта. Не рекомендуется использовать длинные описания.
<meta name = "keywords" content = "HTML, CSS, JavaScript">
Представляет собой список ключевых слов (касающиеся конкретной страницы). Ходит много споров о том учитывается или нет поисковыми системами это значение, исходя из перечня, используемых метатегов в Google, то он не учитывает этот мета тег, а Яндекс, в некоторых случаях оставляет за собой право его использовать.
Определяет автора контента:
<meta name = "author" content = "Denis Bolshakov">
Давайте рассмотрим пример использования этих мета тегов:
<!DOCTYPE html> <html> <head> <meta name = "description" content = "Бесплатные уроки по созданию сайтов" > <!-- мета элемент, который описывает содержимое документа --> <meta name = "keywords" content = "HTML, CSS, JavaScript, jQuery"> <!-- мета элемент, который описывает ключевые слова в документе --> <meta name = "author" content = "Denis Bolshakov"> <!-- мета элемент, который указывает имя автора документа --> <title>Пример использования атрибутов name и content</title> </head> <body> <h3> Это заголовок.</h3> <p>Это параграф. </p> </body> </html>
В данном примере мы использовали три элемента <meta>:
- первый мета элемент описывает содержимое документа (значением атрибута name мы указали, что это описание страницы (description), а текстовое содержимое указали в атрибуте content. Это описание могут использовать поисковые машины для отображения результатов поиска.
- второй мета элемент описывает ключевые слова в документе (значением атрибута name мы указали, что это ключевые слова (keywords), а текстовое содержимое указали в атрибуте content. Ключевые слова могут использоваться некотрыми поисковыми машинами.
- третий мета элемент описывает имя автора документа (значением атрибута name мы указали, что это автор документа (author), а имя автора указали в атрибуте content.
Атрибут http-equiv
Атрибут http-equiv фактически эквивалентен гипертекстовому заголовку (имитация http-заголовка), формируют заголовок страницы и определяют его обработку. Как правило, они управляют действиями браузеров и используются для формирования информации, выдаваемой обычными http-заголовками. Название заголовка указывается в атрибуте http-equiv, а значение указывается в атрибуте content. В некоторых случаях могут автоматически быть переведены в настоящие HTTP-заголовки.
Давайте рассмотрим пример его использования:
<!DOCTYPE html> <html> <head> <meta http-equiv = "refresh" content = "15, URL='http://basicweb.ru'" > <!-- мета элемент, который указывает, что страница будет перезагружена через 15 секунд и перейдет по указанному URL --> <meta http-equiv = "content-security-policy" content = "default-src https:" > <!-- мета элемент, который разрешает загрузку ресурсов (изображения, шрифты, скрипты и так далее) только с использованием https --> <title>Пример использования атрибута http-equiv тега <meta></title> </head> <body> <h3> Это заголовок.</h3> <p>Это параграф. </p> </body> </html>
В данном примере мы использовали три элемента <meta> для которых были указаны различные значения атрибута http-equiv:
- первый мета элемент, указывает, что страница будет перезагружена (значение refresh) через 15 секунд и перейдет по указанному URL (значения, указанные в атрибуте content). Если адрес URL не указан, то страница просто будет перезагружена.
- второй мета элемент разрешает загрузку ресурсов (изображения, шрифты, скрипты и так далее) только с использованием https. Это стало доступным благодаря использованию значения content-security-policy, которое позволяет с использованием атрибута content определить правила (политику) для обслуживаемых ресурсов.
Индексация страниц
Используется поисковыми системами при индексации страниц:
<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 (пользователь может увеличивать масштаб). |
Управление режимами Internet Explorer
Заключительный мета-тег, который должен присутствовать на Ваших страницах, позволяет в зависимости от указанного значения content сообщить браузеру Internet Explorer как отображать документ (в каком режиме) в зависимости от версии, которая используется в данный момент:
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
Атрибут content задает режим для страницы, например, чтобы имитировать работу Internet Explorer 7, укажите IE=EmulateIE7. Укажите IE=5, IE=7 или IE=8, чтобы выбрать один из этих режимов совместимости. Также можно задать IE=edge, чтобы использовать в Internet Explorer 8 наивысший доступный режим. Значение IE=edge сообщает браузеру пользователя, что необходимо использовать последний доступный режим отображения документа, используйте это значение на своих страницах.
Грамотное размещение метаданных на каждой странице Вашего сайта, сделает его привлекательным для поисковых машин и упростит процесс индексации.
Вопросы и задачи по теме
Перед тем как перейти к изучению СSS 3 ответьте на следующий вопрос:
- Какие четыре мета тега необходимо обязательно использовать, если страница Вашего сайта информационная и адаптирована под мобильные приложения?
Показать ответ
1. Настоятельно рекомендуется определять набор символов (кодировку) в документе:
<meta charset = "utf-8" >
2. Описание в следующем мета-теге довольно важное, его учитывают поисковые машины при индексации и используют в поисковой выдаче:
<meta name = "description" content = "Одно два предложения, содержащихся в тексте" >
3. Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо использовать следующий мета-тег:
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
4. Для корректного (однотипного) отображения страниц в браузерах Internet Explorer необходимо использовать следующий мета-тег:
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">Начать обучение CSS 3
basicweb.ru
Описание мета-тегов в head страницы html
Посмотрев HTML код разных сайтов возникает вопрос – зачем в нем так много мета-тегов и для чего они нужны? В данной статье представлены все самые встречающеюся теги с примерами и пояснениями.
1
Описание страницы
Title
Заголовок страницы, оптимальная длина 50-60 символов.
Description
Краткое описание страницы длинной 160-180 символов, используется в выводе результатов поиска.
<meta name="description" content="...">
Keywords
Содержит ключевые слова встречающихся на странице. Не более 20-ти слов и 3-х повторов.
<meta name="keywords" content="...">
- Google – не использует.
- Яндекс – под вопросом.
Кодировка сайта
<meta http-equiv="content-type" content="text/html; charset=utf-8">
В HTML5 тег сократили:
Application-Name
Название веб-приложения. Можно указать несколько названий для разных языковых локалей.
<meta name="application-name" content="Моё приложение">
<meta name="application-name" lang="en" content="My application">
<meta name="application-name" lang="fr" content="Mon application">
- В Android используется при добавлении сайта на главный экран.
- В Windows 8, 10 при добавлении сайта в панель приложений и плиткой в меню пуск.
Generator
Сообщает, с помощью какой программы был сгенерирован код страницы.
<meta name="generator" content="...">
Author
Информация об авторе сайта.
<meta name="author" content="...">
Copyright
Информация о владельце сайта.
<meta name="copyright" content="...">
Reply-To
Указывает способ связи с автором страницы.
<meta name="reply-to" content="[email protected]">
Content-Language
Указывает язык страницы. Используется поисковыми машинами при индексировании.
<meta http-equiv="content-language" content="ru">
Help
Предоставляет ссылку на справку или e-mail.
<link rel="help" href="mailto:[email protected]">
2
Управление индексацией
Robots
Задает правила индексации для поисковых
<meta name="robots" content="index, follow">
Общие значения:
index, follow или all | Разрешено индексировать текст и ссылки на странице |
noindex | Не индексировать текст страницы |
nofollow | Не переходить по ссылкам на странице |
noindex, nofollow или none | Запрещено индексировать текст и переходить по ссылкам |
noarchive | Не показывать ссылку на сохраненную копию в поисковой выдаче |
Яндекс
noyaca | Не использовать описание из Яндекс.Каталога для сниппета в результатах поиска |
nosnippet | Запрещает показывать видео или фрагмент текста в результатах поиска |
noimageindex | Запрещает указывать вашу страницу как источник ссылки для изображения |
noodp | Не использовать описание из каталога DMOZ |
Last-Modified
Альтернативно HTTP-заголовку Last-Modified задает дату последнего изменения для статических страниц.
<meta http-equiv="last-modified" content="2017-12-31@08:04:23 +00:00">
Document-State
Определяет частоту индексации для поисковых роботов.
<meta name="document-state" content="dynamic">
static | Индексировать один раз |
dynamic | Индексировать страницу регулярно |
Revisit-After
Указывает как часто обновляется информация на сайте, и как часто поисковая система должна на него заходить.
<meta name="revisit-after" content="5 days">
3
Управление кэшированием
Cache-Control
Указывает как браузеру кэшировать страницу.
<meta http-equiv="cache-control" content="no-cache">
Допустимые значения:
public | Кэшируется все |
private | Кэшируется браузером, но не proxy-сервером |
no-cache | Запрещает кэширование |
max-age=0 | Сколько секунд хранить в кэше |
Pragma
Отключает кэширование.
<meta http-equiv="pragma" content="no-cache">
Expires
Дата окончания кэша браузера. Если указать прошедшую дату или 0, то документ не будет кэшироваться.
<meta http-equiv="expires" content="0">
4
Canonical — предпочитаемый канонический адрес
Если у страницы есть дубликаты с одним содержанием и разными URL, например:
http://exaple.comcategory/jquery
http://exaple.com/category/jquery?sort=desc
В rel="canonical"
указывается адрес, который будет считаться основным и будет использоваться в поисковой выдаче.
<link rel="canonical" href="http://exaple.com/jquery">
Prev
Указывает URL предыдущий страницы при пагинации.
<link rel="prev" href="http://example.com/jquery">
Next
Указывает URL следующий страницы при пагинации.
<link rel="next" href="http://example.com/jquery?page=3">
5
Rel Alternate
Атрибут «Hreflang»
Этот атрибут указывает ссылки на разные языковые версии сайта. Код языка указывается в формате ISO 639-1.
<link rel="alternate" hreflang="ru" href="http://ru.example.com/">
Или код языка и региона, регион указывается в формате ISO 3166-1 Alpha 2:
<link rel="alternate" hreflang="ru-RU" href="http://ru-ru.example.com/">
Значение x-default
говорит о том что страница главная и не соответствует какому-либо языку или региону.
<link rel="alternate" hreflang="x-default" href="http://example.com/">
Описание: Яндекс Google
Атрибут «Media»
Значение handheld
или only screen and (max-width: 640px)
указывают адрес мобильной версии.
<link rel="alternate" media="handheld" href="http://m.example.com/">
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/">
Атрибут «Type»
application/rss+xml
– ссылка на RSS канал.
<link rel="alternate" type="application/rss+xml" href="http://example.com/rss">
application/atom+xml
– фид в формате Atom.<link rel="alternate" type="application/atom+xml" href="http://example.com/atom">
6
Viewport
Используется для адаптации сайта к мобильным устройствам.
<meta name='viewport' content="width=1024">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1">
width=1024 | Ширина сайта 1024px и мобильный промаштабирует сайт под разрешение экрана |
width=device-width | Ширина сайта «резиновая» и растягивается на весь экран мобильного |
initial-scale=1 | Соотношение 1:1 между пикселями в CSS и пикселями устройства |
7
Google-Site-Verification
Подтверждение прав пользователя сервисов Google.
<meta name="google-site-verification" content="...">
Google-Play-App
Подобно apple-itunes-app
выводит баннер приложения в Андроид.
<meta name="google-play-app" content="app-id=ru.название_приложения">
Значение «Notranslate»
Если страница написана на языке, который не подходит пользователю, Google добавляет ссылку, позволяющую сделать перевод на нужный язык. Значение notranslate
отключает эту функцию.
<meta name="google" value="notranslate">
Значение «Nositelinkssearchbox»
Иногда в результатах поиска Google рядом со ссылками на сайт появляется окно поиска по сайту. С помощью данного мета-тега можно отключить показ этого поля.
<meta name="google" content="nositelinkssearchbox">
Chrome-Webstore-Item
Добавление ссылки в Интернет-магазин Chrome.
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/xxxxxxxxxxxxx">
Publisher
Google использует для связи между сайтом и его страницей в Google+.
<link rel="publisher" href="https://plus.google.com/xxxxxxxxx">
8
Разное
Search
Указывает на XML файл OpenSearch, который позволяет делать поиск по сайту в браузере не заходя на него.
Подробнее о формате на http://opensearch.org.
<link rel="search" type="application/opensearchdescription+xml" title="Поиск на example.com" href="http://example.com/opensearch.xml">
Referrer
Задает HTTP-заголовок «Referer» который отправится на сервер при переходе по ссылкам.
<meta name="referrer" content="origin">
none | Никогда не передает заголовок |
none-when-downgrade | Заголовок передается только если используется HTTPS |
origin | Передает данные о хостах и поддоменах |
unsafe-url | Передает полный URL |
Refresh
Задаст задержку в секундах, после чего браузер обновит страницу.
<meta http-equiv="refresh" content="10">
Также можно указать другой адрес по которому перейдет браузер после задержки.<meta http-equiv="refresh" content="10; URL=http://www.name.com/">
Skype Toolbar
Мета-тег skype_toolbar
отключает расширение Skype на странице (только старые версии).
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
CSRF
Свидетельствует о том, что на сайте реализована защита от CSRF-атак.
<meta name="csrf-token" content="gZoOqHdVwfq2QpfkwH6lQE75ivykrHdOS0rVfhiX">
<meta name="csrf-param" content="authenticity_token">
Ссылка на канал в телеграм
<meta name="telegram:channel" content="@telegram">
Тег Base
Указывает браузеру как обрабатывать относительные URL в ссылках и src изображений относительно адреса текущей страницы.
В примере, браузер запросит изображение по адресу:http://site.ru/category/images/logo.png
<head>
<base href="http://example.com/category/">
</head>
<body>
<img src="images/logo.png">
</body>
snipp.ru
Атрибут content тега | HTML справочник
HTML тег <meta>Значение и применение
Атрибут content (HTML тега <meta>) задает значение, связанное с атрибутами name и http-equiv, в зависимости от контекста. Если один из этих атрибутов указан, то атрибут content должен обязательно присутствовать, чтобы задать значение.
Поддержка браузерами
Синтаксис:
<meta content = "text">
Значения атрибута
Значение | Описание |
---|---|
text | Значение, связанное с атрибутами name и http-equiv, в зависимости от контекста. |
Отличия HTML 4.01 от HTML 5
Нет.Пример использования
<!DOCTYPE html> <html> <head> <meta name = "description" content = "Бесплатные уроки по созданию сайтов" > <!-- мета элемент, который описывает содержимое документа --> <meta name = "keywords" content = "HTML, CSS, JavaScript, jQuery"> <!-- мета элемент, который описывает ключевые слова в документе --> <meta name = "author" content = "Denis Bolshakov"> <!-- мета элемент, который указывает имя автора документа --> <title>Пример использования атрибута content тега <meta></title> </head> <body> <h3> Это заголовок.</h3> <p>Это параграф. </p> </body> </html>
В данном примере мы использовали три элемента <meta>:
- первый мета элемент описывает содержимое документа (значением атрибута name мы указали, что это описание страницы (description), а текстовое содержимое указали в атрибуте content. Это описание могут использовать поисковые машины для отображения результатов поиска.
- второй мета элемент описывает ключевые слова в документе (значением атрибута name мы указали, что это ключевые слова (keywords), а текстовое содержимое указали в атрибуте content. Ключевые слова могут использоваться некотрыми поисковыми машинами.
- третий мета элемент описывает имя автора документа (значением атрибута name мы указали, что это автор документа (author), а имя автора указали в атрибуте content.
<!DOCTYPE html> <html> <head> <meta http-equiv = "refresh" content = "15, URL='http://basicweb.ru'" > <!-- мета элемент, который указывает, что страница будет перезагружена через 15 секунд и перейдет по указанному URL --> <meta http-equiv = "content-security-policy" content = "default-src https:" > <!-- мета элемент, который разрешает загрузку ресурсов (изображения, шрифты, скрипты и так далее) только с использованием https --> <meta http-equiv = "default-style" content = "default style" > <!-- мета элемент, который указывает имя предпочитаемых css стилей документа --> <title>Пример использования атрибута http-equiv тега <meta></title> <link href = "default.css" rel = "stylesheet" type = "text/css" title = "default style"> </head> <body> <h3> Это заголовок.</h3> <p>Это параграф. </p> </body> </html>
В данном примере мы использовали три элемента <meta> для которых были указаны различные значения атрибута http-equiv:
- первый мета элемент, указывает, что страница будет перезагружена (значение refresh) через 15 секунд и перейдет по указанному URL (значения, указанные в атрибуте content). Если адрес URL не указан, то страница просто будет перезагружена.
- второй мета элемент разрешает загрузку ресурсов (изображения, шрифты, скрипты и так далее) только с использованием https. Это стало доступным благодаря использованию значения content-security-policy, которое позволяет с использованием атрибута content определить правила (политику) для обслуживаемых ресурсов.
- третий мета элемент, указывает имя предпочитаемых css стилей документа. Обратите внимание, что значение атрибута content должно совпадать со значением глобального атрибута title HTML тега <link>.
HTML тег <meta>
basicweb.ru
Элемент head и метаданные веб-страницы
Последнее обновление: 08.04.2016
Основная часть документа html, фактически все, что мы увидим в своем браузере при загрузке веб-страницы, располагается между тегами <body> и </body>. Здесь размещаются большинство элементов html.
Хотя большинство элементов в HTML5 остаются теми же, что и в ранних версиях, но несколько изменился способ их использования. Рассмотрим базовые элементы HTML5, их предназначение и использование.
Элемент head и метаданные веб-страницы
Как правило, одним из первых элементов html-документа является элемент head, задача которого состоит в установке метаданных страницы и ряда сопроводительной информации. Метаданные содержат информацию о html-документе.
Заголовок
Для установки заголовка документа, который отображается на вкладке браузера, используется элемент title
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Элемент title</title> </head> <body> <p>Содержание документа HTML5</p> </body> </html>
Элемент base
Элемент base
позволяет указать базовый адрес, относительно которого устанавливаются другие адреса, используемые в документе:
<!DOCTYPE html> <html> <head> <base href="content/"> <meta charset="utf-8"> <title>Элемент base</title> </head> <body> <a href="newpage.html">Перейти</a> </body> </html>
Хотя для ссылки в качестве адреса указана страница newpage.html, но фактически ее адресом будет content/newpage.html. То есть в одной папке с текущей страницей должна быть подпапка content, в которой должен находится файл newpage.html
Можно также указывать полный адрес:
<base href="http://www.microsoft.com/">
В это случае ссылка будет вести по адресу http://www.microsoft.com/newpage.html
Элемент meta
Элемент meta определяет метаданные документа.
Чтобы документ корректно отображал текст, необходимо задать кодировку с помощью атрибута charset. Рекомендуемой кодировкой является utf-8:
<meta charset="utf-8">
При этом надо помнить, что указанная элементе meta
кодировка должна совпадать с кодировкой самого документа. Как правило, текстовый редактор позволяет
указать кодировку документа. Если мы хотим ориентироваться на utf-8, то в настройках текстового редактора надо выбирать UTF-8 w/o BOM.
Например, выбор кодировки в Notepad++:
Элемент meta
также имеет два атрибута: name
и content. Атрибут name
содержит имя метаданных, а content
— их значение.
По умолчанию в HTML определены пять типов метаданных:
application name: название веб-приложения, частью которого является данный документ
author: автор документа
description: краткое описание документа
generator: название программы, которая сгенерировала данный документ
keywords: ключевые слова документа
Надо отметить, что наиболее актуальным является тип description
. Его значение поисковики часто используют в качестве аннотации к документу
в поисковой выдаче.
Добавим в документ ряд элементов meta:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base href="content/"> <title>Элемент title</title> <meta name="description" content="Первый документ HTML5"> <meta name="author" content="Bill Gates"> </head> <body> <a href="newpage.html">Содержание документа HTML5</a> </body> </html>
metanit.com
seodon.ru | Теги HTML — Тег META
Опубликовано: 25.06.2010 Последняя правка: 10.12.2015
Тег <META> применяется для указания информации об HTML-документе, которая помогает браузерам правильно отображать страницы, а поисковым машинам — их индексировать. Теги <META> иначе называются метатегами, а информация, которую они содержат — метаданными. Это могут быть данные о кодировке веб-страницы, ее авторе, данные содержащие ключевые слова и описание и т.д.
Атрибуты
Личные атрибуты:
- name — Задает имя метатега, чтобы браузерам и поисковикам было понятно к какому типу относится информация указанная в content.
- http-equiv — Тоже имя метатега, но указывает название HTTP-заголовка. Является заменой атрибуту name в тех случаях, когда данные передаются по HTTP.
- content — Обязательный атрибут. Содержит значение метатега.
Общие атрибуты:
- accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
- class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
- dir — указывает направление текста внутри элемента.
- id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
- lang — указывает язык, на котором написан текст внутри HTML-элемента.
- style — необходим для применения встроенных стилей CSS к тегу.
- tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
- title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.
Тип тега
Назначение: документ.
Модель тега: может располагаться только в «шапке» документа, внутри элемента <HEAD>, в любом количестве.
Может содержать: данный элемент является пустым/Empty.
Открывающий тег: необходим. Закрывающий тег: запрещен.
Синтаксис
<head>
<meta content="значение">
</head>
Список метатегов заданных элементом <META>
Мета-тег и описание | Пример |
---|---|
author — Содержит имя автора документа. | <meta name=»author» content=»Иван Иванов»> |
copyright — Информация об авторских правах. | <meta name=»copyright» content=»Сopyright 2011 BestCompany»> |
description — Осмысленное описание веб-страницы, которое отображается в поисковике при выдаче запроса. | <meta name=»description» content=»Описание тега META, и его атрибутов.»> |
keywords — Список ключевых слов через запятую. | <meta name=»keywords» content=»HTML справочник, тег, META, атрибуты»> |
robots noindex — Запрещает поисковикам индексировать содержимое страницы. | <meta name=»robots» content=»noindex»> |
robots nofollow — Запрещает поисковикам переход по ссылкам на странице и их индексацию. | <meta name=»robots» content=»nofollow»> |
robots none — Запрещает поисковикам индексацию содержимого и ссылок. | <meta name=»robots» content=»none»> |
Content-Language — Указывает основной язык, используемый на странице. | <meta http-equiv=»Content-Language» content=»en»> |
Content-Type — Информация о кодировке страницы. | <meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″> |
pragma no-cashe — Запрещает браузеру брать веб-страницу из кэша. Соответственно, при каждом обновлении страницы — она будет полностью загружаться с сервера. | <meta http-equiv=»pragma» content=»NO-CACHE»> |
refresh — Автоматический редирект (перенаправление) с текущей страницы — на указанную через заданный в секундах интервал (число с точкой с запятой (;)). | <meta http-equiv=»refresh» content=»4;url=http://spravka.seodon.ru/html/meta.php»> |
Конечно, это далеко не все существующие метатеги, да и эти не всегда нужны. Но желательно на всех страницах указывать Content-Type, description и keywords.
Для запрета индексации содержимого страницы также можно использовать тег <NOINDEX>, который поддерживается отечественными поисковыми системами.
Пример HTML: применение тега META
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>seodon.ru - Применение тега META</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="ru">
<meta name="author" content="Автор документа">
<meta name="copyright" content="© 2011 Имя или название">
<meta name="description" content="Описание документа">
<meta name="keywords" content="ключевые слова">
</head>
<body>
<p>Контент.</p>
</body>
</html>
Результат примера
Поддержка версиями HTML
Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
Поддержка: | Да | Да | Да | Да |
Поддержка браузерами
Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
Поддержка: | Да | Да | Да | Да | Да |
spravka.seodon.ru