Что делает тег

Тег <meta> содержит метаданные о документе HTML. Он может включать такую информацию, как имя автора, название документа, ключевые слова и набор символов.

Синтаксис тега <meta>

<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>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <meta> не считается семантическим, так как не придаёт никакого конкретного значения содержимому.

Примеры использования

Установка кодировки:

<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">

Для чего использовать тег <meta>

  • Указать кодировку документа.
  • Задать заголовок страницы.
  • Указать ключи и описание страницы для SEO.
  • Указать автора страницы.
  • Задать область просмотра для отзывчивого дизайна.

Атрибуты тега <meta>

charset — кодировка символов в документе.

name — имя метаданных.

content — значение метаданных.

http-equiv — HTTP-заголовок для значения атрибута content.

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

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

Ограничения

  • Тег можно использовать только для указания метаданных.
  • Тег <meta> должен быть помещён в head HTML-документа.
  • Атрибут charset должен быть первым атрибутом в теге <meta>.
  • Атрибуты name и http-equiv нельзя использовать вместе.

Нюансы

  • Если указать атрибуты charset и http-equiv="Content-Type", атрибут charset будет приоритетнее.
  • Если указать атрибуты name и http-equiv, приоритет получит атрибут name.

Поддержка браузерами

Тег поддерживается всеми современными браузерами.

Актуальная информация — на сaniuse.

Альтернативные теги

Альтернативных тегов для тега <meta> не существует.

Чем заменить тег

Прямой замены тегу <meta> не существует.

Актуальность

Тег meta не устарел, можете использовать его в веб-разработке.


Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

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

  • 25 января 2023

<dl>

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

  • 25 января 2023

<option>

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

  • 25 января 2023

<ul>

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

  • 25 января 2023

<video>

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

  • 25 января 2023

<datalist>

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

  • 25 января 2023

<caption>

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

  • 25 января 2023