RUUZ

Что такое HTML и из чего состоит документ?

JuniorHTML #html #basics

Вопрос

Что такое HTML, как устроен базовый HTML-документ и что браузер делает с этим текстом при загрузке страницы?

Короткий ответ

HTML (HyperText Markup Language) — язык разметки, описывающий структуру и содержимое веб-страницы с помощью тегов. Документ начинается с <!DOCTYPE html> и состоит из корневого элемента <html>, внутри которого лежат <head> (метаданные, не отображаются) и <body> (видимое содержимое). Браузер парсит этот текст и строит из него дерево объектов — DOM.

Подробный ответ

Структура документа:

  • <!DOCTYPE html> — указывает браузеру работать в стандартном (не quirks) режиме рендеринга согласно HTML5. Без него браузер может включить режим совместимости со старыми версиями HTML, что ломает CSS-расчёты (box model и т.д.).
  • <html lang="..."> — корневой элемент. Атрибут lang важен для скринридеров и переводчиков.
  • <head> — контейнер метаданных: <title>, <meta>, ссылки на стили и скрипты. Ничего из <head> напрямую не рендерится в теле страницы.
  • <body> — всё, что видит пользователь: текст, изображения, интерактивные элементы.

Как браузер превращает HTML в DOM:

  1. Байты → символы — сырые байты декодируются в строку согласно кодировке (обычно UTF-8, указанной в <meta charset>).
  2. Токенизация — строка разбивается на токены: открывающие/закрывающие теги, имена атрибутов, текстовые узлы.
  3. Построение дерева — токены собираются в объектную модель документа (DOM) — иерархию узлов, отражающую вложенность тегов.
  4. Инкрементальный рендеринг — браузер не ждёт конца файла: он строит DOM постепенно, и при встрече <script> без async/defer парсинг блокируется, пока скрипт не загрузится и не выполнится.

DOM — это не сам HTML-текст, а живая структура в памяти, с которой работает JavaScript (document.querySelector и т.д.) и на основе которой вместе с CSSOM браузер строит render tree для отрисовки на экране.

Пример

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Пример документа</title>
  </head>
  <body>
    <h1>Привет, мир</h1>
    <p>Это минимальный валидный HTML-документ.</p>
  </body>
</html>

Дополнительные вопросы

  • Что такое quirks mode и чем он опасен?
  • Чем DOM отличается от исходного HTML-текста и от CSSOM?
  • Почему <script> в конце <body> часто предпочтительнее, чем в <head>?
Следующий вопрос Что такое DOM?