Пример
Описание метаданных внутри HTML-документа:
<head>
<meta charset="UTF-8">
<meta name="description" content="Бесплатный Веб Учебник">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Щипунов Андрей">
<meta
name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Попробуйте сами »
Другие примеры "Попробуйте сами" ниже.
Определение и использование
Тег <meta> определяет метаданные о
HTML-документе. Метаданные — это данные (информация) о данных.
Теги <meta> всегда размещаются внутри элемента <head>,
и обычно используются для указания кодировки символов, описания страницы,
ключевых слов, автора документа и настроек области просмотра.
Метаданные не будут отображаться на странице, но могут быть обработаны машиной.
Метаданные используются браузерами (как отображать контент или перезагружать страницу), поисковыми системами (ключевые слова) и другими веб-сервисами.
Существует метод, позволяющий веб-дизайнерам контролировать область просмотра
(видимую пользователю область веб-страницы) с помощью тега <meta> (см. пример
"Настройка области просмотра" ниже).
Поддержка браузерами
| Элемент | |||||
|---|---|---|---|---|---|
| <meta> | Да | Да | Да | Да | Да |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| charset | набор символов | Определяет кодировку символов для HTML-документа |
| content | текст | Определяет значение, связанное с атрибутами http-equiv или name |
| http-equiv | content-security-policy content-type default-style refresh |
Предоставляет HTTP-заголовок для информации/значения атрибута content |
| name | application-name author description generator keywords viewport |
Определяет имя для метаданных |
Глобальные атрибуты
Тег <meta> также поддерживает Глобальные атрибуты в HTML.
Больше примеров
Определение ключевых слов для поисковых систем:
<meta name="keywords" content="HTML, CSS, JavaScript">
Определение описания вашей веб-страницы:
<meta name="description" content="Бесплатные Веб Учебники
HTML и CSS">
Определение автора страницы:
<meta name="author" content="Щипунов Андрей">
Обновление документа каждые 30 секунд:
<meta http-equiv="refresh" content="30">
Настройка области просмотра для корректного отображения вашего сайта на всех устройствах:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Настройка области просмотра (Viewport)
Область просмотра — это видимая пользователю часть веб-страницы. Она меняется в зависимости от устройства — на мобильном телефоне она будет меньше, чем на экране компьютера.
Вам следует включать следующий элемент <meta> во все ваши веб-страницы:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Это даёт браузеру инструкции о том, как управлять размерами страницы и её масштабированием.
Часть width=device-width устанавливает ширину страницы равной ширине экрана устройства (которая меняется в зависимости от устройства).
Часть initial-scale=1.0 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.
Вот пример веб-страницы без метатега viewport и той же страницы с метатегом viewport:
Совет: Если вы просматриваете эту страницу с телефона или планшета, вы можете нажать на две ссылки ниже, чтобы увидеть разницу.
Вы можете узнать больше об области просмотра в нашем руководстве по адаптивному веб-дизайну - Область просмотра.
Связанные страницы
Учебник HTML: HTML Head
Справочник HTML DOM: Объект Meta
Настройки CSS по умолчанию
Нет.