Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#База знаний</a>

2 <ul><li>23 апр 2025</li>

3 <li>0</li>

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

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

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

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

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

9 Содержание

10 <ul><li><a>Как пишется <html></a></li>

11 <li><a>Обязательно ли использовать тег <html></a></li>

12 <li><a>Где располагается в документе тег <html></a></li>

13 <li><a>Что размещается внутри тега <html></a></li>

14 <li><a>Атрибуты тега <html></a></li>

15 <li><a>Стилизация тега <html> с помощью CSS</a></li>

16 <li><a>Ошибки, которые часто допускают при использовании тега <html></a></li>

17 <li><a>Полезные советы по использованию <html> и лайфхаки</a></li>

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

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

20 В старых версиях HTML <html> обязателен, так что для совместимости и ясности лучше всегда указывать оба тега: открывающий и закрывающий.

21 Тег <html> пишут сразу после строки <!DOCTYPE>. Внутри него - всё содержимое страницы: и <head>, и <body>. Вот как может выглядеть базовая структура HTML-документа с этим тегом:

22 <!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, определяющий язык содержимого.

23 Внутри тега <html> обычно располагаются два основных элемента:

24 <ul><li>Тег <head>, который содержит метаданные документа, такие как <title>, <meta>, <link>, <style> и <script>.</li>

25 <li>Тег <body> - в нём находится видимое содержимое страницы, включая тексты, изображения, ссылки и другие элементы.</li>

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

27 <ul><li>lang - обязательный атрибут, если вы верстаете под продакшен. Он указывает язык содержимого страницы: например, lang="ru" для русского или lang="en" для английского. Это важно для доступности - скринридеры читают текст по-разному в зависимости от языка - и для SEO: поисковики учитывают этот атрибут при ранжировании.</li>

28 <li>dir задаёт направление текста. Обычно этот атрибут можно не указывать - браузер по умолчанию использует ltr (слева направо). Но если страница на арабском или иврите, нужно явно прописать dir="rtl", чтобы всё отображалось корректно.</li>

29 <li>Атрибут xmlns встречается редко. Он нужен только в XHTML-документах и указывает на пространство имён. В обычном HTML5 - не используется.</li>

30 <li>prefix применяют в разметках для соцсетей вроде Open Graph. Он помогает, например, "Фейсбуку"* или "ВКонтакте" правильно сформировать карточку превью. В простых страницах без соцмедиа-привязки не нужен.</li>

31 <li>Атрибут title можно указать, но смысла в этом почти нет. Он добавляет всплывающую подсказку при наведении, но на теге <html> она никак не используется. Лучше применять этот атрибут на ссылках, кнопках и других интерактивных элементах.</li>

32 </ul>Тег <html> можно стилизовать так же, как и любой другой элемент. Чаще всего его используют для задания глобальных свойств: шрифтов, цветов, фона и поведения прокрутки. Всё, что вы пропишете здесь, смогут унаследовать дочерние элементы.

33 html { font-family: "Roboto", "Arial", sans-serif; background-color: #f0f0f0; color: #333; }Один из практичных приёмов - сделать плавную прокрутку по якорным ссылкам:

34 html { scroll-behavior: smooth; }Это улучшает UX: страница не скачет при переходах, а аккуратно прокручивается. Плюс такой подход помогает при управлении скроллом через JavaScript, особенно если вы делаете анимации или интерактив.

35 Иногда к тегу <html> добавляют классы - чтобы изменить поведение всей страницы в зависимости от состояния. Например:

36 .is-dark-theme { background-color: #000; color: #fafafa; }Если добавить такой класс к <html>, весь сайт переключится на тёмные цвета. Это часто делают при переключении темы вручную или при переключении по настройкам системы. В JavaScript это может выглядеть так:

37 document.documentElement.classList.add('is-dark-theme');.is-blocked body { overflow: hidden; }Когда пользователь открывает модальное окно (например, поп-ап), часто нужно "заморозить" прокрутку страницы на фоне. Добавляя класс is-blocked к <html>, вы через CSS запрещаете скролл для <body> - и страница перестаёт прокручиваться.

38 .is-ios { -webkit-text-size-adjust: 100%; }В мобильном Safari иногда возникают проблемы. Браузер сам увеличивает текст, если считает его слишком мелким и это может сломать вёрстку. Класс is-ios позволяет точечно отключить такое поведение - только для устройств на iOS. Обычно такой класс добавляют через JavaScript после определения браузера.

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

40 Если не указать атрибут lang, браузер и скринридеры не поймут, на каком языке написан текст. Это снижает доступность страницы и может повлиять на SEO - поисковики не всегда правильно определяют язык.

41 Вот пример кода без атрибута lang:

42 <html> <head> <title>Код с ошибкой: отсутствует атрибут lang </title> </head> <body> </body> </html>А вот корректный вариант, в котором указан язык страницы:

43 <html lang="ru"> <head> <title>Корректный код: присутствует атрибут lang </title> </head> <body> </body> </html>Это простое исправление сделает страницу доступнее для людей с нарушениями зрения и поможет поисковикам точнее индексировать сайт.

44 Закрывающий тег </html> в HTML5 не обязателен: браузеры чаще всего догадываются, где заканчивается документ. Но его отсутствие может вызвать проблемы в старых браузерах или при автоматической проверке кода. Особенно если страница большая и содержит вложенные конструкции.

45 Пример с ошибкой - нет закрывающего тега:

46 <html lang="ru"> <head> <title>Код с ошибкой закрытия тега html</title> </head> <body> </body>Корректный вариант:

47 <html lang="ru"> <head> <title>Корректный код: есть закрывающий тег /html </title> </head> <body> </body> </html>Явное закрытие тега всегда надёжнее. Оно улучшает читаемость, снижает риск ошибки и делает вёрстку совместимой даже с устаревшими движками.

48 В HTML-документе всё содержимое - и <head>, и <body> - обязательно должно находиться внутри тега <html>. Если нарушить эту структуру, браузеры могут отобразить страницу с ошибками, особенно в старых версиях или при сложной вёрстке.

49 Пример с ошибкой - <body> вынесен за пределы <html>:

50 <html lang="ru"> <head> <title>Код с ошибкой структуры</title> </head> </html> <body> </body>Корректный вариант - вся структура внутри <html>:

51 <html lang="ru"> <head> <title>Корректный код: структура верная, тег body находится внутри тега html </title> </head> <body> </body> </html>Даже если браузер простит эту ошибку, она усложнит отладку и валидацию. Лучше сразу держать структуру документа чистой.

52 Если страница написана на языке, который читается справа налево (например, арабский или иврит), обязательно указывайте dir="rtl". Если этого не сделать или задать неверное направление (ltr - слева направо), текст может отображаться некорректно: выравнивание, порядок строк и даже элементы интерфейса будут сбиваться.

53 Пример с ошибкой - неверное направление для арабского языка:

54 <html lang="ar" dir="ltr"> <head> <title>Код с ошибкой направления текста при использовании арабского языка в атрибуте</title> </head> </html> <body> مرحبا بالعالم </body>Корректный вариант - направление rtl:

55 <html lang="ar" dir="rtl"> <head> <title>Корректный код: использовано правильное значение атрибута dir</title> </head> <body> مرحبا بالعالم </body> </html>Атрибут dir - не формальность. Он влияет на восприятие страницы, особенно для носителей языков с письмом справа налево. Без него сайт может стать просто неудобным или даже нечитаемым.

56 <ul><li>Плагин Emmet поможет не только верстать быстрее, но и не накосячить.В редакторах вроде VS Code можно набрать ! и нажать Tab - вы получите готовый шаблон HTML-документа. Он сразу включает <!DOCTYPE>, <html lang="...">, <meta charset="UTF-8"> и всё, что часто забывают поставить вручную. Это экономит время и снижает риск пропустить важную часть разметки.</li>

57 </ul><ul><li>Атрибут lang - не мелочь.Он нужен не только для SEO, но и для улучшения доступности. Скринридеры читают текст по-разному в зависимости от языка, а поисковики используют lang, чтобы правильно определить регион.</li>

58 <li>Если сайт многоязычный - одного lang мало.Указывайте язык текущей страницы в <html>, а в <head> добавляйте hreflang-ссылки на другие языковые версии. Это поможет поисковым системам не путать страницы между собой.</li>

59 <li>Разметка без lang может запустить автоперевод.Если язык страницы отличается от языка системы, браузер может предложить перевод. Иногда это удобно, иногда - раздражает. Лучше явно указать язык с помощью lang и не полагаться на догадки.</li>

60 </ul>* Решением суда запрещена "деятельность компании Meta Platforms Inc. по реализации продуктов - социальных сетей Facebook и Instagram на территории Российской Федерации по основаниям осуществления экстремистской деятельности".

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