ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

HTML Ссылки

HTML по Алфавиту HTML по Категориям HTML Атрибуты Тегов HTML Атрибуты Глобал HTML Атрибуты Событий HTML Цвета HTML Холсты HTML Аудио / Видео HTML Наборы символов HTML DOCTYPEs HTML Кодирование URL HTML Языковые коды HTML Коды стран HTTP Ответы сервера HTTP Методы PX в EM конвертер Горячие клавиши


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

Нет.