Урок 2: Потік і дерево документа в HTML

🎯 Мета уроку: Розібратися, як браузер читає HTML-код, будує структуру сторінки (дерево документа) і що з цим робити.

Що таке потік документа?

Потік документа — це порядок, у якому елементи HTML розташовані в коді.
Браузер читає HTML зверху вниз, рядок за рядком, поки не дійде до кінця.

Важливо!
Браузер не показує HTML-код, він перетворює його у зручну для користувача сторінку.

Приклад потоку документа

<!DOCTYPE html>
<html>
  <head>
    <title>Моя сторінка</title>
  </head>
  <body>
    <h1>Заголовок</h1>
    <p>Це текст абзацу.</p>
    <footer>Це футер</footer>
  </body>
</html>

Як працює потік:

Браузер починає з <!DOCTYPE html> — це інструкція, що вказує, що ми використовуємо HTML5.
Потім переходить до <html> — це головний контейнер сторінки.
Далі браузер читає <head> (тут метаінформація, яка не показується на сторінці) і <body> (усе, що ви бачите).

У результаті елементи відображаються в порядку, у якому вони написані.

Що таке дерево документа (DOM)?

DOM (Document Object Model) — це структура, яку браузер створює з вашого HTML.

Кожен тег HTML стає вузлом у дереві:

Корінь дерева: <html> — найвищий рівень.
Гілки: Інші теги, які знаходяться всередині <html> (наприклад, <head> і <body>).
Листя: Елементи, які не мають вкладених тегів (наприклад, текст, зображення).

DOM на прикладі

<!DOCTYPE html>
<html>
  <head>
    <title>Дерево документа</title>
  </head>
  <body>
    <h1>Привіт, світ!</h1>
    <p>Це дерево документа.</p>
  </body>
</html>

Кожен тег HTML стає вузлом у дереві:

html
├── head
│   └── title
└── body
    ├── h1
    └── p

Як браузер створює веб-сторінку?

Браузер проходить кілька етапів:

Парсинг HTML: Читає HTML і створює DOM-дерево.
Парсинг CSS: Читає стилі (CSS) і створює CSSOM (дерево стилів).
Рендеринг: Об’єднує DOM і CSSOM, щоб показати сторінку.

Чому це важливо знати?

Ви краще зрозумієте, як працюють браузери.
Зможете писати коректний код, який швидко відображається.
Навчитеся взаємодіяти з DOM за допомогою JavaScript.

Як виглядає потік документа на сторінці

За замовчуванням браузер показує елементи у тому ж порядку, як вони йдуть у коді.

Приклад:

<body>
  <h1>Привіт!</h1>
  <p>Це текст абзацу.</p>
  <div>Я третій!</div>
</body>

Елементи будуть відображені так:

Заголовок <h1>
Абзац <p>
Блок <div>

Але порядок можна змінити за допомогою CSS

CSS дозволяє змінювати позицію елементів незалежно від їхнього порядку у HTML.

Приклад:

<body>
  <h1>Привіт!</h1>
  <p>Це текст абзацу.</p>
  <div style="position: absolute; top: 0;">Я перший!</div>
</body>

Потік: <h1> → <p> → <div>.
Відображення: <div> з'явиться першим, бо його позиція змінена стилем position: absolute; top: 0;.

Складні приклади DOM

Код:

<body>
  <div>
    <h1>Заголовок</h1>
    <p>
      Це абзац з <strong>жирним текстом</strong> і <a href="#">посиланням</a>.
    </p>
  </div>
</body>

DOM:

body
└── div
    ├── h1
    ├── p
    │   ├── текст
    │   ├── strong
    │   │   └── текст
    │   └── a
    │       └── текст

Пояснення:

<div> — це "батько" для <h1> і <p>.
У <p> є "діти" — текст, <strong> і <a>.

Цікаво знати

DOM — це як родинне дерево, але його можна змінювати в реальному часі.
JavaScript дозволяє додавати, видаляти або змінювати "гілки" цього дерева. 🌳

🎓 Результат уроку: Ви зрозуміли, як браузер читає HTML, створює DOM-дерево та як це впливає на відображення сторінки.
Тепер ви готові до вивчення JavaScript для роботи з DOM! 🚀

Попередній урок

Наступний урок