HTML тег <meta>
Пример
Опишите метаданные в HTML документе:
<head>
<meta charset="UTF-8">
<meta name="description" content="Бесплатные веб-учебники">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta
name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Попробуйте сами »
Определение и использование
Метаданные - это данные (информация) о данных.
Тег <meta> предоставляет метаданные о документе HTML. Метаданные не будут отображаться на странице, но будут обрабатываться машиной.
Мета-элементы обычно используются для указания описания страницы, ключевых слов, автора документа, последнего изменения и других метаданных.
Метаданные могут использоваться браузерами (как отображать контент или перезагружать страницу), поисковыми системами (ключевые слова) или другими веб-сервисами.
В HTML5 появился метод, позволяющий веб-дизайнерам контролировать область просмотра (видимую область веб-страницы пользователя) с помощью тега <meta> (Смотрите пример ниже "Настройка области просмотра").
Поддержка браузерами
| Элемент | |||||
|---|---|---|---|---|---|
| <meta> | Yes | Yes | Yes | Yes | Yes |
Советы и примечания
Примечание: <meta> теги всегда идут внутри элемента <head>.
Примечание: Метаданные всегда передаются как пары имя / значение.
Примечание: Атрибут содержимого ДОЛЖЕН быть определен, если определено имя или атрибут http-equiv. Если ни один из них не определен, атрибут content НЕ МОЖЕТ быть определен.
Настройка области просмотра (viewport)
В HTML5 появился метод, позволяющий веб-дизайнерам контролировать область просмотра через тег <meta>.
Окно просмотра - это видимая область пользователя на веб-странице. Это зависит от устройства и будет меньше на мобильном телефоне, чем на экране компьютера.
Необходимо включить следующий элемент <meta> viewport во все ваши веб-страницы:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Элемент <meta> viewport дает браузеру инструкции о том, как управлять размерами и масштабированием страницы.
Параметр width=device-width устанавливает ширину страницы, которая соответствует ширине экрана устройства (которая зависит от устройства).
Часть initial-scale=1.0 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.
Вот пример веб-страницы без метатега viewport и той же веб-страницы из метатегом viewport:
Совет: Если вы просматриваете эту страницу с помощью телефона или планшета, вы можете нажать на две ссылки ниже, чтобы увидеть разницу.
Вы можете прочитать больше о viewport в Адаптивный веб-дизайн - Учебник про область просмотра.
Различия между HTML 4.01 и HTML5
Атрибут scheme не поддерживается в HTML5.
В HTML5 появился новый атрибут charset, который упрощает определение charset:
- HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- HTML5: <meta charset="UTF-8">
Различия между HTML и XHTML
В HTML тег <meta> не имеет конечного тега.
В XHTML тег <meta> должен быть правильно закрыт.
Примеры
Пример 1 - Определите ключевые слова для поисковых систем:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
Пример 2 - Определите описание вашей веб-страницы:
<meta name="description" content="Free Web tutorials on HTML and CSS">
Пример 3 - Определите автора страницы:
<meta name="author" content="John Doe">
Пример 4 - Обновлять документ каждые 30 секунд:
<meta http-equiv="refresh" content="30">
Пример 5 - Настройка области просмотра, чтобы сайт выглядел хорошо на всех устройствах:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| charset | character_set | Определяет кодировку символов для HTML документа |
| content | text | Предоставляет значение, связанное с http-equiv или атрибутом name |
| http-equiv | content-type default-style refresh |
Предоставляет заголовок HTTP для информации / значения атрибута содержимого |
| name | application-name author description generator keywords viewport |
Определяет имя для метаданных |
| scheme | format/URI | Не поддерживается в HTML5. Определяет схему, которая будет использоваться для интерпретации значения атрибута содержимого |
Глобальные атрибуты
Тег <meta> также поддерживает Глобальные атрибуты в HTML.
Связанные страницы
HTML учебник: HTML Head
HTML DOM справочник: Объект Meta
Настройки CSS по умолчанию
Отсутствуют.
Сайт работает на фреймворке W3.CSS.
