Главные ошибки новичков-фронтендеров в HTML

Рассказываем про частые ошибки в HTML и о том, как их избежать.

Ошибки — неотъемлемая часть пути начинающего фронтенд-разработчика. Однако анализ и исправление этих ошибок помогает быстрее расти как специалисту и создавать качественные продукты. Важно знать, какие ошибки чаще всего делают новички, чтобы избегать их в будущем. В этой статье мы рассмотрим наиболее распространённые ошибки и пути их решения.

Ошибка 1: Непонятные имена классов

Имена классов в HTML должны быть понятными и отражать суть элементов. Новички часто дают сокращённые или транслитерированные имена, что затрудняет поддержку кода.

Пример ошибки:

<div class="блок1">...</div>
<div class="bl-2">...</div>

Как исправить: Используйте осмысленные имена классов на английском языке.

<div class="content-block">...</div>
<div class="header-block">...</div>

Ошибка 2: Вложение блочных элементов в строчные

В HTML строчные элементы могут быть вложены в блочные, но наоборот — нельзя. Это нарушает семантику и ломает отображение страницы.

Пример ошибки:

<span>
  <div>Неправильное вложение</div>
</span>

Как исправить: Убедитесь, что блочные элементы не вложены в строчные.

Ошибка 3: Некорректное закрытие тегов

<div>
  <div>Правильное вложение</div>
</div>

Нарушение порядка закрытия тегов приводит к ошибкам в DOM-структуре и некорректному отображению страницы.

Пример ошибки:

<div>
    <span>Текст</div>
</span>

Как исправить: Закрывайте теги в правильном порядке.

<div>
    <span>Текст</span>
</div>

Ошибка 4: Неправильное использование семантических тегов

Использование семантических тегов по назначению улучшает доступность и SEO. Новички часто используют несемантические элементы для интерактивных задач.

Пример ошибки:

<div onclick="someFunction()">Нажми меня</div>

Как исправить: Замените <div> на <button>.

<button onclick="someFunction()">Нажми меня</button>

Ошибка 5: Повторение id на странице

Атрибут id должен быть уникальным для каждого элемента. Использование одного id для нескольких элементов приводит к ошибкам в CSS и JavaScript.

Пример ошибки:

<div id="myElement">Первый блок</div>
<div id="myElement">Второй блок</div>

Как исправить: Присвойте каждому элементу уникальный id.

<div id="myElement1">Первый блок</div>
<div id="myElement2">Второй блок</div>

Изучив эти ошибки и методы их предотвращения, вы сможете писать более чистый и корректный код. В следующих статьях мы разберём типичные ошибки в CSS и JavaScript.