Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д.

В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами.

Теперь рассмотрим использование мета-тегов.

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

Мета-тег обычно используется для объявления кодировки символов в HTML-документе.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Declaring Character Encoding</title> 
    <meta charset="utf-8">
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

Чтобы установить кодировку символов в документе, используется CSS-правило @charset.

UTF-8 — это универсальная и рекомендуемая кодировка символов для HTML-документа. Однако, если она не указана, используется кодировка по умолчанию.

Определение автора документа

Вы также можете использовать метатег, чтобы четко определить, кто является автором или создателем веб-страницы.

Автором может быть физическое лицо, компания в целом или третье лицо.

<head>
    <title>Defining Document's Author</title>
    <meta name="author" content="Alexander Howick">
</head>

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

Ключевые слова и описание для поисковых систем

Некоторые поисковые системы используют метаданные keywords и descriptions, для индексации веб-страниц. Вот пример:

<head>
    <title>Defining Keywords and Description</title>  
    <meta name="keywords" content="HTML, CSS, javaScript">
    <meta name="description" content="Easy to understand tutorials and references on HTML, CSS, javaScript and more..."> 
</head>

Поисковые системы часто используют мета-описание (description) для создания краткого описания страницы, когда она появляется в результатах поиска. Смотрите рекомендации по мета-описанию.

Настройка viewport для мобильных устройств

Вы можете использовать метатег viewport для правильного отображения веб-страниц на мобильных устройствах.

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

Метатег viewport позволяет вам установить оптимальный размер области просмотра и пределы масштабирования для просмотра веб-страниц на мобильных устройствах. Типичное определение метатега области просмотра будет выглядеть следующим образом:

<head>
    <title>Configuring the Viewport</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Значение width=device-width внутри атрибута content устанавливает ширину области просмотра равной ширине экрана устройства, тогда как initial-scale=1 устанавливает начальный масштаб или уровень масштабирования равным 100%, когда страница загружается браузером.

Всегда используйте тег <meta> viewport на своих веб-страницах. Это сделает ваш сайт более удобным и доступным для мобильных устройств.

Похожие посты

Руководство по тегам и элементам в HTML

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…

Руководство по атрибутам событий в HTML5

Следующие атрибуты событий могут быть применены к большинству HTML-элементов для выполнения JavaScript. Эти атрибуты могут быть указаны для всех элементов, за некоторыми исключениями, где они не имеют смысла, например, к элементам в разделе <head>, таких как <title>, <base>, <link>. События Window События, связанные с объектом window (относится к тегу <body>): Атрибут Значение Описание onafterprint script…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.