Хорошо ли вы знаете HTML-теги <meta>?
Большинство обучающих курсов не предоставляют подробного объяснения тегов <meta>. В этой статье я исправлю это.
Определение
Тег <meta> определяет метаданные HTML-документа.
Теги <meta> похожи на спецификацию HTML-документа. Если ноутбук является HTML-документом, то теги <meta> — это его технические характеристики.
Теги <meta> не выводят на веб-странице какие-либо элементы, они доступны только для считывания браузерами.
Использование
Теги<meta> используются для указания определенной информации о HTML-документе:
- Кодировку символов.
- Описание страницы
- Ключевые слова
- Настройки окна просмотра
Как использовать <meta>
Тег <meta> всегда размещается внутри элемента <head>.
Теги <meta> являются пустыми элементами. Это позволяет опустить закрывающий тег. Но открывающий тег обязательно должен присутствовать.
Charset
<head>
<meta charset = "UTF-8">
</ head>Атрибут charset задает кодировку символов. Ниже перечислены наиболее часто используемые кодировки:
- UTF-8 – кодировка символов для Unicode.
- 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, посетите эти ресурсы: