Вложенность тегов в HTML: как браузер строит DOM и где возникают ошибки

HTML-документ образует дерево. Элемент, внутри которого расположен другой элемент, называется родителем; внутренний — дочерним. Корректная вложенность помогает браузеру построить ожидаемый DOM, а разработчику — управлять стилями, событиями и доступностью.

Отступы не влияют на разбор HTML, но делают дерево видимым человеку:

<article>  <h1>Основы HTML</h1>  <p>Разметка описывает структуру документа.</p></article>​

Здесь <h1> и <p> — дочерние элементы <article> и соседи друг для друга.

Закрывайте элементы в обратном порядке

Если теги вложены как коробки, внутреннюю коробку нужно закрыть первой.

Неверно:

<p>Прочитайте <strong>важное примечание</p></strong>​

Верно:

<p>Прочитайте <strong>важное примечание</strong>.</p>​

Браузер постарается исправить неверный HTML, но получившийся DOM может отличаться от исходного кода. На автоматическое восстановление полагаться нельзя.

У элементов есть модели содержимого

Не любой тег можно поместить в любой другой. Правила определяются назначением элемента.

Блочный контейнер внутри абзаца

<p> предназначен для фразового содержимого. Браузер автоматически закроет абзац перед <div>:

<!-- Неверная идея --><p>  Вводный текст  <div>Отдельный блок</div></p>​

Исправьте структуру:

<p>Вводный текст.</p><div>Отдельный блок.</div>​

Элементы списка

Непосредственными дочерними элементами <ul> и <ol> должны быть <li>:

<ul>  <li>    Frontend    <ul>      <li>HTML</li>      <li>CSS</li>    </ul>  </li>  <li>Backend</li></ul>​

Вложенный список находится внутри родительского <li>, а не рядом с ним.

Таблица

Ячейки <th> и <td> располагаются в строке <tr>, а строки — в секциях таблицы:

<table>  <caption>Результаты проверки</caption>  <thead>    <tr>      <th scope="col">Проверка</th>      <th scope="col">Статус</th>    </tr>  </thead>  <tbody>    <tr>      <th scope="row">HTML</th>      <td>Пройдено</td>    </tr>  </tbody></table>​

Интерактивные элементы

Не вкладывайте одну интерактивную область в другую:

<!-- Неверно: кнопка внутри ссылки --><a href="/course">  О курсе  <button type="button">Добавить в избранное</button></a>​

Разделите действия:

<article class="course-card">  <h2><a href="/course">О курсе</a></h2>  <button type="button">Добавить в избранное</button></article>​

Вложенные кнопки, ссылки и поля создают конфликт поведения фокуса и активации.

Пустые элементы

<img>, <input>, <meta>, <link>, <br> и некоторые другие элементы не имеют содержимого и закрывающего тега.

<img src="diagram.svg" alt="Схема DOM-дерева" width="800" height="450"><input type="email" name="email">​

Записи <img></img> и <input>текст</input> неверны.

Почему ошибка проявляется в CSS и JavaScript

Селекторы работают с фактическим DOM, а не с тем, что разработчик хотел написать.

.card > p {  margin-block: 0;}​

Правило выберет только абзац, который является непосредственным ребёнком .card. Дополнительная обёртка изменит результат.

То же относится к событиям:

const card = document.querySelector('.card');​card?.addEventListener('click', (event) => {  const action = event.target.closest('[data-action]');  if (!action || !card.contains(action)) {    return;  }​  console.log(action.dataset.action);});​

Логика предполагает определённые отношения элементов. Неожиданный DOM способен нарушить делегирование событий.

Браузер может перестроить разметку

Инструменты разработчика показывают уже исправленный DOM. Если элемент оказался не там, где ожидается:

1. сравните исходный HTML с панелью Elements;
2. проверьте закрывающие теги выше проблемного места;
3. запустите документ через HTML-валидатор;
4. временно отключите JavaScript, который изменяет DOM;
5. проверьте, разрешено ли такое содержимое внутри родительского элемента.

Форматирование кода и единый отступ помогают заметить ошибку, но не заменяют валидатор.

Логический порядок важнее визуального

CSS Grid и Flexbox могут перемещать блоки визуально. Для чтения с клавиатуры и скринридером обычно сохраняется порядок DOM. Поэтому исходная вложенность должна быть понятной без стилей:

<main>  <article>Основной материал</article>  <aside>Связанные материалы</aside></main>​

Не дублируйте один и тот же текст для мобильной и настольной версии. Лучше изменить раскладку CSS, сохранив одно логичное дерево.

Что запомнить

HTML — дерево с правилами содержимого. Закрывайте элементы в обратном порядке, не помещайте блочные контейнеры в абзац и интерактивные элементы друг в друга, соблюдайте структуру списков и таблиц. Проверяйте не только исходник, но и DOM, который действительно построил браузер.

report Сообщить об ошибке в статье