HTML Тег meta

Пример

Описание метаданных в 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:

Совет: Если вы просматриваете эту страницу с телефона или планшета, вы можете нажать на две ссылки ниже, чтобы увидеть разницу.