Тег <​html​>: структура, синтаксис, атрибуты
2026-02-21 13:19 Diff
https://skillbox.ru/media/base/teg-html-struktura-sintaksis-atributy/

#База знаний

  • 23 апр 2025
  • 0

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

Иллюстрация: Polina Vari для Skillbox Media

Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

Язык HTML описывает структуру страницы: заголовки, блоки, ссылки, изображения. Браузер превращает эту разметку в то, что мы видим на экране. Но чтобы разметка была корректной и всё сработало как надо, документ должен быть оформлен правильно: с открывающим и закрывающим тегами <html>.

Тег <html> — единственный корневой элемент в документе. Внутри него находятся все части страницы, и с него браузер начинает чтение HTML-кода.

Содержание

Тег <html> парный: состоит из открывающего <html> и закрывающего </html>. Он охватывает весь HTML-документ: открывается сразу после <! DOCTYPE>, а закрывается в самом конце. В нём можно указать атрибуты — например, lang="ru" для языка страницы. Формально его можно опустить, но лучше этого не делать: явное всегда надёжнее.

<html> … </html>

По спецификации HTML5 <html> не является обязательным. Если не написать тег <html>, браузер всё равно справится — он добавит его в DOM-дерево сам. Но такой код может не пройти автоматическую проверку (валидацию) и запутает тех, кто будет с ним работать.

В старых версиях 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> обычно располагаются два основных элемента:

  • Тег <head>, который содержит метаданные документа, такие как <title>, <meta>, <link>, <style> и <script>.
  • Тег <body> — в нём находится видимое содержимое страницы, включая тексты, изображения, ссылки и другие элементы.

У тега <html> есть несколько атрибутов. Какие-то встречаются почти в каждом документе, какие-то — гораздо реже. Одни важны для доступности и SEO, другие нужны только в специфических случаях. Разберём самые распространённые — без лишней теории.

  • lang — обязательный атрибут, если вы верстаете под продакшен. Он указывает язык содержимого страницы: например, lang="ru" для русского или lang="en" для английского. Это важно для доступности — скринридеры читают текст по-разному в зависимости от языка — и для SEO: поисковики учитывают этот атрибут при ранжировании.
  • dir задаёт направление текста. Обычно этот атрибут можно не указывать — браузер по умолчанию использует ltr (слева направо). Но если страница на арабском или иврите, нужно явно прописать dir="rtl", чтобы всё отображалось корректно.
  • Атрибут xmlns встречается редко. Он нужен только в XHTML-документах и указывает на пространство имён. В обычном HTML5 — не используется.
  • prefix применяют в разметках для соцсетей вроде Open Graph. Он помогает, например, «Фейсбуку»* или «ВКонтакте» правильно сформировать карточку превью. В простых страницах без соцмедиа-привязки не нужен.
  • Атрибут title можно указать, но смысла в этом почти нет. Он добавляет всплывающую подсказку при наведении, но на теге <html> она никак не используется. Лучше применять этот атрибут на ссылках, кнопках и других интерактивных элементах.

Тег <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> — и страница перестаёт прокручиваться.

.is-ios { -webkit-text-size-adjust: 100%; }

В мобильном Safari иногда возникают проблемы. Браузер сам увеличивает текст, если считает его слишком мелким и это может сломать вёрстку. Класс is-ios позволяет точечно отключить такое поведение — только для устройств на iOS. Обычно такой класс добавляют через JavaScript после определения браузера.

Есть несколько мест, в которых можно ошибиться при использовании тега <html>.

Если не указать атрибут 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>

Это простое исправление сделает страницу доступнее для людей с нарушениями зрения и поможет поисковикам точнее индексировать сайт.

Закрывающий тег </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>

Явное закрытие тега всегда надёжнее. Оно улучшает читаемость, снижает риск ошибки и делает вёрстку совместимой даже с устаревшими движками.

В 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>

Даже если браузер простит эту ошибку, она усложнит отладку и валидацию. Лучше сразу держать структуру документа чистой.

Если страница написана на языке, который читается справа налево (например, арабский или иврит), обязательно указывайте 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 — не формальность. Он влияет на восприятие страницы, особенно для носителей языков с письмом справа налево. Без него сайт может стать просто неудобным или даже нечитаемым.

  • Плагин 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 на территории Российской Федерации по основаниям осуществления экстремистской деятельности».

Бесплатный курс по Python ➞
Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу