Хорошо ли вы знаете 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» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню