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