flexbe banner 468x60flexbe banner 728x90flexbe banner 930x180etxt banner 468x60etxt banner 728x90etxt banner 930x180smsc banner 468x60smsc banner 728x90smsc banner 930x180

Теги <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 на своих веб-страницах. Это сделает ваш сайт более удобным и доступным для мобильных устройств.

jivo banner 480x320jivo banner 728x90jivo banner 120x600flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600

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

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

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

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

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

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

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

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

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

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

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