Тег <meta>: кодировка и метаданные
Как задать UTF-8, мобильный viewport и краткое описание документа.
Зачем нужен этот элемент
meta хранит служебные сведения в head документа. Они не отображаются как обычный текст, но влияют на интерпретацию страницы. Для русскоязычного файла важно сохранить сам файл в UTF-8 и объявить ту же кодировку в разметке.
Viewport с width=device-width помогает адаптивному CSS работать относительно ширины устройства. Description кратко описывает конкретную страницу; поисковик может использовать его в сниппете, но не обязан. Это не место для бессвязного списка ключевых слов.
Синтаксис и пример
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Мой учебный сайт с примерами HTML.">
<title>Привет, веб</title>
</head>
<body><h1>Привет, веб!</h1></body>
</html>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| charset="utf-8" | Кодировка; размещайте объявление в начале head. |
| name="viewport" | Настройка ширины и начального масштаба. |
| name="description" | Краткое предметное описание страницы. |
Частая ошибка
Небольшая практика
Сохраните документ в UTF-8 и добавьте русский заголовок. Затем откройте его на узком экране и проверьте отсутствие горизонтальной прокрутки.
Разберите также <html>, <link>: эти элементы пригодятся в том же интерфейсе.