DEV Community

Cover image for HTML - атрибуты тега «meta»
Rafael
Rafael

Posted on

HTML - атрибуты тега «meta»

Вы сказали:
"<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

почему нельзя в одну строку
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">"


Ответ гугл от 2026-07-14
Атрибут name="viewport" нельзя использовать внутри тега <meta charset="utf-8">, потому что это нарушает стандарты HTML, и браузеры просто проигнорируют некорректную часть кода.

Главные причины

  • Один тег — одна задача: Тег <meta> может выполнять только одну функцию за раз. Он либо задает кодировку, либо управляет областью просмотра (viewport).
  • Конфликт атрибутов: Атрибуты charset и name не должны находиться в одном элементе.

Как исправить

Вам нужно разделить эту строку на два отдельных независимых тега.
Вот правильный вариант кода:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Enter fullscreen mode Exit fullscreen mode

`

За что отвечает каждый тег

  • <meta charset="utf-8">: Указывает кодировку текста. Благодаря этому на сайте правильно отображаются буквы любого языка (включая кириллицу) вместо непонятных символов («кракозябр»).
  • <meta name="viewport" content="...">: Отвечает за адаптивность сайта. Он заставляет страницу корректно масштабироваться под размеры экранов мобильных телефонов и планшетов.

Если вы хотите оптимизировать ваш код дальше, я могу подсказать, какие еще обязательные теги должны быть в секции <head> или как проверить ваш HTML-код на скрытые ошибки. Напишите, какую задачу вы сейчас решаете?

Top comments (0)