САЙТ НАХОДИТСЯ В РАЗРАБОТКЕ
Баннер ТОП

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 по умолчанию

Отсутствуют.