Главная идея
Любая HTML-страница — это не просто текст с тегами, а дерево вложенных элементов с одним корнем. У этого дерева жёсткий каркас: объявление типа документа <!DOCTYPE html>, затем единственный корневой <html>, а внутри него ровно две ветви — служебная <head> и видимая <body>. Браузер ожидает именно такую форму: если вы её соблюдаете, страница рендерится предсказуемо во всех браузерах.
Документ как почтовая посылка. <!DOCTYPE html> — это таможенная пометка «современный формат, разбирать по новым правилам». <html> — сама коробка, которая держит всё вместе. <head> — наклейка с адресом и описанием груза: получатель её не разворачивает, но без неё посылка едет не туда (не та кодировка, нет названия). <body> — содержимое коробки, то, ради чего её и отправили: именно это видит и трогает получатель.
Дерево документа
Вот тот же каркас в виде схемы. Корень — <html>, от него две ветви, а на концах — конкретные элементы:
<html>, две ветви <head> и <body>, на концах — конкретные элементы.Зачем нужен <!DOCTYPE html>
<!DOCTYPE html> сообщает браузеру, что документ нужно обрабатывать как современный HTML (standards mode). Без него браузер переходит в quirks mode — режим совместимости со старыми сайтами, где работают другие правила вёрстки. Это особенно важно, когда вы хотите предсказуемую вёрстку и одинаковое поведение в разных браузерах.
Корневой элемент <html>
Тег <html> оборачивает весь документ — это корень дерева. У него обычно задают язык страницы через атрибут lang (например, lang="ru"), чтобы браузер, поисковики и скринридеры понимали, на каком языке написан текст.
Что хранится в <head>
<head> не показывает контент на странице напрямую. Здесь лежат настройки документа: кодировка, заголовок вкладки, описание, подключение стилей и других ресурсов. Всё, что нужно браузеру до рендера, но не является видимым текстом, обычно живёт именно здесь.
<head> — это технический блок, а не место для видимого контента.
Что находится в <body>
В <body> размещается то, что пользователь видит и с чем взаимодействует: заголовки, абзацы, изображения, формы, списки, блоки и навигация. Если вынести важный текст из <body>, он не станет частью нормальной страницы.
Ключевые <meta>-теги
<meta charset="UTF-8">— правильная кодировка для кириллицы.<meta name="viewport">— базовая настройка для адаптивности на мобильных.<title>— текст вкладки и закладки браузера.
Почему порядок важен
Сначала идёт <!DOCTYPE html>, потом <html>, затем <head> и только после него <body>. Такой порядок делает документ понятным для браузера и для людей, которые его читают. Если начать с произвольного текста, браузер ещё может «догадаться», но код станет хрупким и тяжёлым для поддержки.
<!DOCTYPE html>, <html>, <head> и <body>, значит каркас нужно собрать заново.