HTML <meta> тег

  • Предыдущая страница <menu>
  • Следующая страница <meter>

Определение и использование

<meta> Тег определяет метаданные HTML-документа. Метаданные - это данные о данных (информация).

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

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

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

Совет:Элементы meta имеют несколько различных zastosowań, и в одном HTML-документе может быть несколько элементов meta.

Совет:Через <meta> Тег, который позволяет веб-дизайнеру контролировать видимой часть (то есть область, видимую пользователю) веб-страницы (см. пример "Настройка видимой части" ниже).

Внимание:Каждый элемент meta может использоваться только для одной цели. Если необходимо использовать несколько свойств, то в элемент head следует добавить несколько элементов meta.

См. также:

HTML учебник:HTML заголовок

HTML DOM справочник:Объект Meta

Пример

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Бесплатные веб-уроки">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Bill Gates">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Попробуйте сами

Атрибут

Атрибут Значение Описание
charset Кодировка символов Указывает кодировку символов HTML-документа.
content Текст Указывает значение, связанное с атрибутами http-equiv или name.
http-equiv
  • content-security-policy
  • content-type
  • default-style
  • refresh
 Предоставляет информацию/значение для атрибута content HTTP-заголовка.
name
  • application-name
  • author
  • description
  • generator
  • keywords
  • viewport
 определяет имя метаданных.

глобальные атрибуты

<meta> тег также поддерживает Глобальные атрибуты в HTML.

Элемент meta имеет три типичных использования:

  1. Укажите пары имени/значения метаданных
  2. Объявление кодировки символов
  3. Имитация полей заголовков HTTP

1: Укажите различные пары имени/значения метаданных

Элемент meta может определять метаданные с помощью пар имени/значения, для этого необходимо использовать его атрибуты name и content.

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

<meta name="keywords" content="HTML, CSS, JavaScript">

Определите описание веб-страницы:

<meta name="description" content="Free Web tutorials for HTML and CSS">

Определите автора страницы:

<meta name="author" content="John Doe">

Установите видимость, улучшите вид веб-сайта на различных устройствах:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2: Объявление кодировки символов

Используйте атрибут charset для объявления, что страница использует кодировку UTF-8:

<meta charset="UTF-8">

3: Имитация полей заголовков HTTP

Используя атрибуты http-equiv и content, обновляйте документ каждые 30 секунд:

<meta http-equiv="refresh" content="30">

Изменения в HTML5

Атрибут charset добавлен в HTML5.

В HTML4 атрибут http-equiv мог иметь любое количество различных значений. В HTML5 можно использовать только значения, упомянутые на этой странице.

Атрибут scheme в HTML4 больше не используется в HTML5.

Кроме того, больше не используется элемент meta для указания языка веб-страницы.

установку видимости

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

Вам следует включить следующие <meta> Элемент видимости:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Он предоставляет браузеру инструкции о том, как контролировать размер и масштаб страницы.

width=device-width Некоторые настройки устанавливают ширину страницы в зависимости от ширины экрана устройства.

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

Ниже приведены примеры веб-страниц без метатега viewport и с метатегом viewport.

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



Без метатега viewport


С метатегом viewport

Стандартные настройки CSS

Нет.

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка
  • Предыдущая страница <menu>
  • Следующая страница <meter>