Все
Истории
Дизайн
Код
Геймдев
Бизнес
Маркетинг
Управление
Кино
Музыка
Проектная фотография
Развитие
Здоровье
Деньги
Образование
EdTech
Корп. обучение
Блог Skillbox
Глоссарий
Спецпроекты
Профориентация
Тег <html>: структура, синтаксис, атрибуты
Рассказываем, как правильно использовать тег при создании веб-страниц.
Язык HTML описывает структуру страницы: заголовки, блоки, ссылки, изображения. Браузер превращает эту разметку в то, что мы видим на экране. Но чтобы разметка была корректной и всё сработало как надо, документ должен быть оформлен правильно: с открывающим и закрывающим тегами <html>.
Тег <html> — единственный корневой элемент в документе. Внутри него находятся все части страницы, и с него браузер начинает чтение HTML-кода.
Содержание
- Как пишется <html>
- Обязательно ли использовать тег <html>
- Где располагается в документе тег <html>
- Что размещается внутри тега <html>
- Атрибуты тега <html>
- Стилизация тега <html> с помощью CSS
- Ошибки, которые часто допускают при использовании тега <html>
- Полезные советы по использованию <html> и лайфхаки
Как пишется тег <html>
Тег <html> парный: состоит из открывающего <html> и закрывающего </html>. Он охватывает весь HTML-документ: открывается сразу после <! DOCTYPE>, а закрывается в самом конце. В нём можно указать атрибуты — например, lang="ru" для языка страницы. Формально его можно опустить, но лучше этого не делать: явное всегда надёжнее.
<html>
…
</html>Обязательно ли использовать тег <html>
По спецификации HTML5 <html> не является обязательным. Если не написать тег <html>, браузер всё равно справится — он добавит его в DOM-дерево сам. Но такой код может не пройти автоматическую проверку (валидацию) и запутает тех, кто будет с ним работать.
В старых версиях HTML <html> обязателен, так что для совместимости и ясности лучше всегда указывать оба тега: открывающий и закрывающий.
Где располагается в документе тег <html>
Тег <html> пишут сразу после строки <!DOCTYPE>. Внутри него — всё содержимое страницы: и <head>, и <body>. Вот как может выглядеть базовая структура HTML-документа с этим тегом:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Документ</title>
</head>
<body>
</body>
</html>Сначала идёт объявление <!DOCTYPE html>, которое указывает браузеру, что документ соответствует стандарту HTML5. Затем тег <html> открывает HTML-документ и добавляет атрибут lang, определяющий язык содержимого.
Что размещается внутри тега <html>
Внутри тега <html> обычно располагаются два основных элемента:
- Тег <head>, который содержит метаданные документа, такие как <title>, <meta>, <link>, <style> и <script>.
- Тег <body> — в нём находится видимое содержимое страницы, включая тексты, изображения, ссылки и другие элементы.
Атрибуты тега <html>
У тега <html> есть несколько атрибутов. Какие-то встречаются почти в каждом документе, какие-то — гораздо реже. Одни важны для доступности и SEO, другие нужны только в специфических случаях. Разберём самые распространённые — без лишней теории.
- lang — обязательный атрибут, если вы верстаете под продакшен. Он указывает язык содержимого страницы: например, lang="ru" для русского или lang="en" для английского. Это важно для доступности — скринридеры читают текст по-разному в зависимости от языка — и для SEO: поисковики учитывают этот атрибут при ранжировании.
- dir задаёт направление текста. Обычно этот атрибут можно не указывать — браузер по умолчанию использует ltr (слева направо). Но если страница на арабском или иврите, нужно явно прописать dir="rtl", чтобы всё отображалось корректно.
- Атрибут xmlns встречается редко. Он нужен только в XHTML-документах и указывает на пространство имён. В обычном HTML5 — не используется.
- prefix применяют в разметках для соцсетей вроде Open Graph. Он помогает, например, «Фейсбуку»* или «ВКонтакте» правильно сформировать карточку превью. В простых страницах без соцмедиа-привязки не нужен.
- Атрибут title можно указать, но смысла в этом почти нет. Он добавляет всплывающую подсказку при наведении, но на теге <html> она никак не используется. Лучше применять этот атрибут на ссылках, кнопках и других интерактивных элементах.
Стилизация тега <html> с помощью CSS
Тег <html> можно стилизовать так же, как и любой другой элемент. Чаще всего его используют для задания глобальных свойств: шрифтов, цветов, фона и поведения прокрутки. Всё, что вы пропишете здесь, смогут унаследовать дочерние элементы.
html {
font-family: "Roboto", "Arial", sans-serif;
background-color: #f0f0f0;
color: #333;
}Один из практичных приёмов — сделать плавную прокрутку по якорным ссылкам:
html {
scroll-behavior: smooth;
}Это улучшает UX: страница не скачет при переходах, а аккуратно прокручивается. Плюс такой подход помогает при управлении скроллом через JavaScript, особенно если вы делаете анимации или интерактив.
Иногда к тегу <html> добавляют классы — чтобы изменить поведение всей страницы в зависимости от состояния. Например:
Тёмная тема
.is-dark-theme {
background-color: #000;
color: #fafafa;
}Если добавить такой класс к <html>, весь сайт переключится на тёмные цвета. Это часто делают при переключении темы вручную или при переключении по настройкам системы. В JavaScript это может выглядеть так:
document.documentElement.classList.add('is-dark-theme');Блокировка прокрутки
.is-blocked body {
overflow: hidden;
}Когда пользователь открывает модальное окно (например, поп-ап), часто нужно «заморозить» прокрутку страницы на фоне. Добавляя класс is-blocked к <html>, вы через CSS запрещаете скролл для <body> — и страница перестаёт прокручиваться.
Поддержка Safari на iOS
.is-ios {
-webkit-text-size-adjust: 100%;
}В мобильном Safari иногда возникают проблемы. Браузер сам увеличивает текст, если считает его слишком мелким и это может сломать вёрстку. Класс is-ios позволяет точечно отключить такое поведение — только для устройств на iOS. Обычно такой класс добавляют через JavaScript после определения браузера.
Ошибки, которые часто допускают при использовании тега <html>
Есть несколько мест, в которых можно ошибиться при использовании тега <html>.
1. Нет атрибута lang
Если не указать атрибут lang, браузер и скринридеры не поймут, на каком языке написан текст. Это снижает доступность страницы и может повлиять на SEO — поисковики не всегда правильно определяют язык.
Вот пример кода без атрибута lang:
<html>
<head>
<title>Код с ошибкой: отсутствует атрибут lang </title>
</head>
<body>
<p></p>
</body>
</html>А вот корректный вариант, в котором указан язык страницы:
<html lang="ru">
<head>
<title>Корректный код: присутствует атрибут lang </title>
</head>
<body>
<p></p>
</body>
</html>Это простое исправление сделает страницу доступнее для людей с нарушениями зрения и поможет поисковикам точнее индексировать сайт.
2. Нет закрывающего тега </html>
Закрывающий тег </html> в HTML5 не обязателен: браузеры чаще всего догадываются, где заканчивается документ. Но его отсутствие может вызвать проблемы в старых браузерах или при автоматической проверке кода. Особенно если страница большая и содержит вложенные конструкции.
Пример с ошибкой — нет закрывающего тега:
<html lang="ru">
<head>
<title>Код с ошибкой закрытия тега html</title>
</head>
<body>
<p></p>
</body>Корректный вариант:
<html lang="ru">
<head>
<title>Корректный код: есть закрывающий тег /html </title>
</head>
<body>
<p></p>
</body>
</html>Явное закрытие тега всегда надёжнее. Оно улучшает читаемость, снижает риск ошибки и делает вёрстку совместимой даже с устаревшими движками.
3. Тег <body> находится за пределами <html>
В HTML-документе всё содержимое — и <head>, и <body> — обязательно должно находиться внутри тега <html>. Если нарушить эту структуру, браузеры могут отобразить страницу с ошибками, особенно в старых версиях или при сложной вёрстке.
Пример с ошибкой — <body> вынесен за пределы <html>:
<html lang="ru">
<head>
<title>Код с ошибкой структуры</title>
</head>
</html>
<body>
<p></p>
</body>Корректный вариант — вся структура внутри <html>:
<html lang="ru">
<head>
<title>Корректный код: структура верная, тег body находится внутри тега html </title>
</head>
<body>
<p></p>
</body>
</html>Даже если браузер простит эту ошибку, она усложнит отладку и валидацию. Лучше сразу держать структуру документа чистой.
4. Неверное направление текста в атрибуте dir
Если страница написана на языке, который читается справа налево (например, арабский или иврит), обязательно указывайте dir="rtl". Если этого не сделать или задать неверное направление (ltr — слева направо), текст может отображаться некорректно: выравнивание, порядок строк и даже элементы интерфейса будут сбиваться.
Пример с ошибкой — неверное направление для арабского языка:
<html lang="ar" dir="ltr">
<head>
<title>Код с ошибкой направления текста при использовании арабского языка в атрибуте</title>
</head>
</html>
<body>
<p>مرحبا بالعالم</p>
</body>Корректный вариант — направление rtl:
<html lang="ar" dir="rtl">
<head>
<title>Корректный код: использовано правильное значение атрибута dir</title>
</head>
<body>
<p>مرحبا بالعالم</p>
</body>
</html>Атрибут dir — не формальность. Он влияет на восприятие страницы, особенно для носителей языков с письмом справа налево. Без него сайт может стать просто неудобным или даже нечитаемым.
Полезные советы по использованию <html> и лайфхаки
- Плагин Emmet поможет не только верстать быстрее, но и не накосячить. В редакторах вроде VS Code можно набрать ! и нажать Tab — вы получите готовый шаблон HTML-документа. Он сразу включает <!DOCTYPE>, <html lang="...">, <meta charset="UTF-8"> и всё, что часто забывают поставить вручную. Это экономит время и снижает риск пропустить важную часть разметки.
- Атрибут lang — не мелочь. Он нужен не только для SEO, но и для улучшения доступности. Скринридеры читают текст по-разному в зависимости от языка, а поисковики используют lang, чтобы правильно определить регион.
- Если сайт многоязычный — одного lang мало. Указывайте язык текущей страницы в <html>, а в <head> добавляйте hreflang-ссылки на другие языковые версии. Это поможет поисковым системам не путать страницы между собой.
- Разметка без lang может запустить автоперевод. Если язык страницы отличается от языка системы, браузер может предложить перевод. Иногда это удобно, иногда — раздражает. Лучше явно указать язык с помощью lang и не полагаться на догадки.
Больше интересного про код — в нашем телеграм-канале. Подписывайтесь!
* Решением суда запрещена «деятельность компании Meta Platforms Inc. по реализации продуктов — социальных сетей Facebook и Instagram на территории Российской Федерации по основаниям осуществления экстремистской деятельности».
