Как разработчики определяют, какие HTML-элементы можно вкладывать в другие HTML-элементы? В целом, на уровне интуиции и логики. Понятно, что
<li> должен быть в <ul> или <ol>, <td> в <tr>, а тот в <table>.Но в HTML есть чёткие правила вложенности, которые отражают логику, на которую опираются разработчики, и здравый смысл. Правила построены на двух концепциях: категории элемента и его контентной модели.
Категории — это группы элементов, объединённые какими-то общими свойствами. Один HTML-элемент может принадлежать сразу к нескольким категориям или не принадлежать ни к одной из них. Всего есть 18 категорий.
Контентная модель — это описание того, какие конкретные элементы или категории элементов допустимы. Соответствие контентной модели родительского элемента и категории дочернего — и есть правила вложенности.
Контентная модель неупорядоченного списка
<ul> — ноль или более элементов <li> и script-supported elements. Это значит, что внутрь списка могут быть вложены только элементы <li>, <script> и <template>.Контентная модель элемента списка
<li> — flow content, значит можно вложить любые элементы этой категории. Сам <li> при этом не относится к какой-либо категорий, поэтому его нельзя никуда вкладывать, если не указано иное.В некоторых случаях контентная модель жёстко ограничена конкретными элементами, а не категориями, как у таблиц. Иногда есть правила, что конкретный элемент должен быть в определённом месте, как у
<details>.Есть контентная модель под названием transparent. Внутрь «прозрачных» элементов можно вкладывать то, что можно вкладывать в их прямого родителя. Такая модель присуща некоторым элементам, среди которых
<a>.Помочь с определением вложенности может сайт Can I Include. Он как раз сравнивает категорию и контентную модель. Другой способ проверить корректность вложенности — использовать HTML Validator.
У неверной вложенности есть последствия:
- В некоторых случаях браузеры перестраивают DOM;
- Нарушается семантика, что влияет на доступность;
- Может серьёзно ухудшаться производительность;
- Могут ломаться инструменты, которые анализируют HTML (браузерные плагины, онлайн-сервисы).
#ydkhtml
