Современные браузеры настолько умны и снисходительны, что могут переварить любую кашу из тегов. Но есть ошибки вложенности элементов, которые выглядят приемлемо в коде и «взрывают» вёрстку в браузере.
В стандарте ХТМЛ для каждого элемента указано разрешённое содержание, какие теги или тип содержимого могут вкладываться в него. Соответственно, содержимое не по стандарту может приводить к ошибкам. Приведу две самые популярные ошибки, которые вижу каждый день.
Нетекст в тексте
По стандарту в заголовках и абзацах может находиться только phrasing content — строчное или, как его неудачно переводят официально, «текстовое» содержимое. Туда входят текст с разметкой и другие элементы, формирующие абзацы: изображения, видео, контролы и встраиваемые элементы. Поэтому не стоит вкладывать заголовки в заголовки, а абзацы, списки и блочные элементы — в абзацы. Если их всё‑таки вложить, «запрещённое» содержимое выпадет из родительского тега и создаст новые:
<h1>
<h2>Глава 1</h2>
Основы
</h1>
<p>
Вкладывать в абзацы
<ul>
<li>другие абзацы</li>
<li>списки</li>
</ul>
нельзя.
</p>
<p>
Конфигурация татами в типовых комнатах.
<div>Хайно Энгель. <a>Параметры и конструкция японского дома</a></div>
</p>
<p>
<h4>Заголовок в подбор.</h4> Сильный пример к нему
</p>Интерактивные элементы в интерактивных
Если вложить кнопку в ссылку, клик произойдёт дважды. Если вложить ссылку в ссылку, она «вывалится» отдельным элементом:
<style>
.cols {
display: flex;
gap: 10px;
}
.caption {
font-size: small;
font-family: sans-serif;
}
</style>
<div class="cols">
<a href="https://bureau.ru/lectures/systemeditor-clients/">
<img src="https://bureau.ru/lectures/systemeditor-clients/files/_cover.jpg" width="128" height="72">
<span class="caption">
<a href="https://bureau.ru/lectures/systemeditor-clients/">
Системный редактор
</a>
</span>
</a>
<a href="https://bureau.ru/lectures/efficientdesign-resolve/">
<img src="https://bureau.ru/lectures/collecture-all/files/_cover.png" width="128" height="72">
<span class="caption">
<a href="https://bureau.ru/lectures/efficientdesign-resolve/">
Работоспособный дизайн
</a>
</span>
</a>
</div>P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.