Как определить какие теги можно вкладывать?

Какие теги можно вкладывать, определяют по content model (модели содержимого) HTML-спецификации: каждый тег имеет разрешённое содержимое (категории элементов). Проверяют по MDN/спецификации или валидатором.

Content Model (модель содержимого)

HTML-спецификация задаёт для каждого элемента, что внутри него допустимо, через категории контента:

• Flow content — блочные элементы (<div>, <p>, <section>).
• Phrasing content — строчные/текстовые (<span>, <a>, <strong>).
• Interactive content — интерактивные (<button>, <a>, <input>).
• Heading content, Sectioning content и др.

Правила вложенности (примеры)

Нельзя вкладывать блочное в строчное/специфичное

<p><div>...</div></p>   <!-- невалидно: <p> содержит только phrasing -->
<a><a>...</a></a>       <!-- нельзя интерактивное в интерактивное -->
<button><a>...</a></button> <!-- нельзя -->

Строгие правила для таблиц/списков

<ul><div>...</div></ul>  <!-- невалидно: <ul> только <li> -->
<table><div></div></table> <!-- только <tr>/<thead> и т.п. -->

Как определить

Документация (MDN)

У каждого тега на MDN есть раздел «Permitted content» / «Разрешённое содержимое» и «Permitted parents».

Спецификация HTML

Content model элемента в стандарте.

Валидатор

W3C Validator (validator.w3.org) проверяет вложенность.

Практические правила

• Блочное нельзя в <p>, <span>.
• Интерактивное нельзя вкладывать в интерактивное.
• <li> только в <ul>/<ol>, <tr> в <table> и т. п.

Коротко для собеседования

Разрешённую вложенность определяют по content model HTML-спецификации: каждый тег допускает содержимое определённых категорий (flow, phrasing, interactive). Примеры запретов: блочное в <p>, интерактивное в интерактивном (<a> в <a>, <a> в <button>), <li> только в списках. Проверяют по MDN («Permitted content»), спецификации или W3C-валидатором.