HTML <meta> Тег
Пример
Опишите метаданные в документе HTML:
<head>
<meta charset="UTF-8">
<meta name="description" content="Бесплатный веб-учебник">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="html5css">
<meta
name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Определение и использование
Метаданные — это данные (информация) о данных.
Тег <meta> содержит метаданные о документе HTML. Метаданные не будут отображаться на странице, но будут проанализированы машиной.
Мета-элементы обычно используются для указания описания страницы, ключевых слов, автора документа, последнего изменения и других метаданных.
Метаданные могут использоваться браузерами (как отображать содержимое или перезагрузить страницу), поисковые системы (ключевые слова) или другие веб-сервисы.
HTML5 ввел метод, позволяющий веб-дизайнерам управлять окном просмотра (видимой областью пользователя веб-страницы), через - <meta> тег (уидеть "Setting The Viewport" Пример ниже).
Поддержка браузера
Элемент | |||||
---|---|---|---|---|---|
<meta> | Да | Да | Да | Да | Да |
Советы и примечания
Примечание: <meta> Теги всегда заходят внутрь элемента <head>.
Примечание: Метаданные всегда передаются в виде пар "имя-значение".
Примечание: Атрибут content должен быть определен, если определено имя или атрибут HTTP-EQUIV. Если ни один из них не определен, атрибут Content не может быть определен.
Настройка видового экрана
В HTML5 появился метод, позволяющий веб-дизайнерам управлять окном просмотра через тег <meta>.
Видовой экран — это видимая область пользователя веб-страницы. Она варьируется в зависимости от устройства, и будет меньше на мобильном телефоне, чем на экране компьютера.
На всех веб-страницах необходимо включить следующий элемент <meta> видового экрана:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Элемент <meta> видовой экран предоставляет браузеру инструкции по управлению размерами страницы и масштабированию.
Ширина = устройство-ширина часть задает ширину страницы, чтобы следовать ширине экрана устройства (который будет варьироваться в зависимости от устройства).
Элемент начального масштаба = 1.0 задает начальный уровень масштабирования при первой загрузке страницы обозревателем.
Вот пример веб-страницы Без мета-тег видового экрана и та же веб-страница С мета-тег видового экрана:
Совет: Если вы просматриваете эту страницу с телефоном или планшетом, вы можете нажать на две ссылки ниже, чтобы увидеть разницу.
Вы можете прочитать больше о видовом экране в нашем Адаптивный веб-дизайн — учебник по видовому экрану.
Различия между HTML 4,01 и HTML5
Атрибут scheme-навестить поддерживается в HTML5.
HTML5 имеет новый атрибут, кодировку, что облегчает определение кодировки:
- 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="html5css">
Пример 4 - обновление документа каждые 30 секунд:
<meta http-equiv="refresh" content="30">
Пример 5 - Настройка видового экрана, чтобы сделать ваш сайт хорошо выглядел на всех устройствах:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Атрибуты
= Новиный в HTML5.
Атрибут | Значение | Описание |
---|---|---|
charset | character_set | Задает кодировку символов для HTML-документа |
content | text | Дает значение, связанное с атрибутом http-equiv или Name |
http-equiv | content-type default-style refresh |
Предоставляет заголовок HTTP для информации/значения атрибута Content |
name | application-name author description generator keywords viewport |
Задает имя для метаданных |
scheme | format/URI | Не поддерживается в HTML5. Задает схему, используемую для интерпретации значения атрибута Content |
Глобальные атрибуты
Тег <meta> также поддерживает Глобальные атрибуты в HTML.
Похожие страницы
HTML Учебник: HTML Head
HTML DOM reference: Meta Object
Параметры CSS по умолчанию
Нет.