Хорошо ли вы знаете HTML-теги <meta>?

Большинство обучающих курсов не предоставляют подробного объяснения тегов <meta>. В этой статье я исправлю это.

Определение

Тег <meta> определяет метаданные HTML-документа.

Теги <meta> похожи на спецификацию HTML-документа. Если ноутбук является HTML-документом, то теги <meta> — это его технические характеристики.

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

Использование

Теги<meta> используются для указания определенной информации о HTML-документе:

  1. Кодировку символов.
  2. Описание страницы
  3. Ключевые слова
  4. Настройки окна просмотра

Как использовать <meta>

Тег <meta> всегда размещается внутри элемента <head>.

Теги <meta> являются пустыми элементами. Это позволяет опустить закрывающий тег. Но открывающий тег обязательно должен присутствовать.

Charset

<head> 
    <meta charset = "UTF-8"> 
</ head>

Атрибут charset задает кодировку символов. Ниже перечислены наиболее часто используемые кодировки:

  1. UTF-8 – кодировка символов для Unicode.
  2. ISO-8859-1 – кодировка символов для латинского алфавита.

Полный список доступных кодировок символов

Описания страницы

<head> 
    <meta name = "description" content = "meta tags"> 
</ head>
Описания страницы

Для указания описания страницы используется атрибут name со значением description.

Значение в атрибуте content используется поисковой системой, чтобы определить, какой контент представлен на странице. Оно также будет отображаться, когда веб-страница будет выводиться в результатах поиска.

Ключевые слова

<head>
<meta name="keywords" content="meta, HTML, Tutorial">
</head>

Для указания ключевых слов, используемых на странице, применяется атрибут name со значением keywords.

Значение в атрибуте content будет использовано поисковой системой, чтобы определить, какой контент представлен на веб-странице.

Настройки области просмотра

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

Для указания настроек области просмотра окна браузера применяется атрибут name со значением viewport. В предыдущем примере:

  • name = "viewport" – указывает браузеру, как контролировать размеры веб-страницы и ее масштабирование.
  • width=device-widthустанавливает ширину веб-страницы в соответствии с шириной экрана пользовательского устройства.
  • initial-scale=1.0 – устанавливает начальный уровень масштабирования при первой загрузке веб-страницы в браузере.

Заключение

Эта статья охватывает только основные аспекты использования <meta>. Чтобы больше узнать о тегах <meta> в HTML, посетите эти ресурсы:

  1. w3School.com
  2. developer.mozilla.org
  3. Справка Google Search Console

Пожалуйста, оставляйте свои отзывы по текущей теме статьи. За комментарии, дизлайки, подписки, отклики, лайки огромное вам спасибо!

Пожалуйста, опубликуйте ваши комментарии по текущей теме материала. За комментарии, дизлайки, подписки, отклики, лайки низкий вам поклон!

Вадим Дворниковавтор-переводчик статьи «Do you really know meta tags in HTML»