❌ Ошибка 1: путают class и id
Один и тот же id ставят на несколько блоков, хотя он должен быть уникальным. Стили вроде применяются, но якорные ссылки и скрипты, ищущие элемент по id, найдут только первый — остальные «потеряются».
<!-- ❌ Ломается: id="item" повторён -->
<li id="item">Первый</li>
<li id="item">Второй</li> <!-- скрипт его не найдёт -->
<!-- ✅ Правильно: общий class, уникальные id при нужде -->
<li class="item">Первый</li>
<li class="item">Второй</li>✅ Как правильно
Повторяющиеся элементы помечайте class, а id оставьте для одной уникальной точки страницы.
❌ Ошибка 2: абзац внутри абзаца (<p> в <p>)
Тег <p> нельзя вкладывать в другой <p>: это запрещено спецификацией. Браузер молча закроет первый абзац перед началом второго — и ваша вложенность развалится не там, где вы ожидали.
Внешний абзац
Вложенный — браузер вынес его наружу
<!-- ❌ Ломается: p внутри p недопустим -->
<p>Внешний абзац
<p>Вложенный</p>
</p>
<!-- браузер превратит это в ДВА соседних абзаца -->
<!-- ✅ Правильно: для блока-обёртки берём div/section -->
<div>
<p>Внешний абзац</p>
<p>Вложенный</p>
</div>✅ Как правильно
<p> — для текста, а не контейнер. Для группировки абзацев используйте <div> или семантический <section>/<article>.
❌ Ошибка 3: теги закрыты крест-накрест
Закрывающий тег ставят не в том порядке (<b><i>…</b></i>), и браузер вынужден догадываться. Результат непредсказуем, а валидатор W3C подсветит ошибку.
<!-- ❌ Ломается: перекрытие тегов -->
<b><i>Текст</b></i>
<!-- ✅ Правильно: зеркальный порядок закрытия -->
<b><i>Текст</i></b>✅ Как правильно
Внутренний элемент закрывается раньше внешнего. Отступы в коде помогают это видеть.
❌ Ошибка 4: злоупотребление div
Когда каждый блок превращается в <div>, разметка теряет смысл и становится тяжёлой для чтения и поддержки.
✅ Как правильно
Используйте подходящий HTML-элемент там, где он уже существует: <header>, <nav>, <article>, <footer>.