САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

На сайте нет рекламы

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> определяет метаданные о документе HTML. Метаданные - это данные (информация) о данных.

Теги <meta> всегда находятся внутри элемента <head>, и обычно используются для указания набора символов, описания страницы, ключевые слова, автор документа и настройки видового экрана.

Метаданные не будут отображаться на странице, но могут быть проанализированы машиной.

Метаданные используются браузерами (как отобразить содержимое или перезагрузить страницу), поисковые системы (ключевые слова) и другие веб сервисы.

Существует метод, позволяющий веб дизайнерам взять под свой контроль видовое окно (видимую область веб страницы пользователя), через тег <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> также поддерживает Глобальные атрибуты в HTML.



Еще примеры

Определение ключевых слов для поисковых систем:

<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 name="viewport" content="width=device-width, initial-scale=1.0">

Это дает браузеру инструкции по управлению размерами и масштабированием страницы.

Часть width=device-width устанавливает ширину страницы в соответствии с шириной экрана устройства (которая будет варьироваться в зависимости от устройства).

часть initial-scale=1.0 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

Вот пример веб страницы без мета-тега viewport и той же веб страницы с мета-тегом viewport:

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


Подробнее о видовом окне вы можете прочитать в нашем разделе Адаптивный веб дизайн - Учебник по видовому экрану


Связные страницы

HTML учебник: HTML Глава

HTML DOM reference: Объект meta


Настройки CSS по умолчанию

Нет.