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

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

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

Ошибка 1: неправильные имена классов

Классы в HTML — способ группировки и идентификации элементов. Классы задаются с помощью атрибута class.

Например: <div class="container">.

Так можно стилизовать и манипулировать элементами с помощью CSS и JavaScript.

Джуны часто дают классам непонятные или сокращённые имена — иногда даже транслитом.

Например:

			<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>

		

Здесь блочный элемент <div> вложен в строчный элемент <span> — такая страница в браузере будет выглядеть «криво», все элементы на ней будут отображаться скученно.

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

Например:

			<div>
  <div>Это исправленный код</div>
</div>

		

Ошибка 3: вложенный тег закрывается позже родительского

Правильное вложение тегов важно для чистого и функционального кода.

В HTML теги должны закрываться в обратном порядке относительно их открытия. Это помогает правильно сформировать DOM-структуру.

Если вложить теги в HTML с ошибкой, элементы на странице отобразятся не на своих местах и сайт будет выглядеть «сломанным».

Пример ошибки вложения:

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

		

Тег <span> должен был закрыться перед тегом , но он закрывается после — это ошибка.

Правильное вложение:

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

		

Здесь тег <span> закрывается перед тегом </div> — это соответствует правилам вложения.

Привыкайте закрывать теги в правильном порядке во время написания кода. Используйте редакторы кода с подсветкой синтаксиса и автоматическую проверку — например, W3C Markup Validation Service.

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

Семантическая вёрстка — это подход к созданию веб-страниц, в котором используют HTML-теги согласно их смыслу. Например, тег <header> предназначен для заголовочной части веб-страницы, а тег <footer> — для подвала.

Этот подход облегчает понимание структуры и содержания веб-страницы — как машинам, так и разработчикам.

Если использовать семантические теги неправильно, ухудшаются доступность сайта, SEO и общее взаимодействие пользователя с веб-сайтом.

Вот пример неправильного использования тега <div> вместо <button>:

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

Для создания интерактивного элемента использован тег <div> с атрибутом onclick. Но <div> не предназначен для интерактивных целей, поэтому браузеры и скринридеры не будут воспринимать его как кнопку. Это создаст проблемы для пользователей, которые используют скринридеры или клавиатурную навигацию.

Чтобы исправить ошибку, нужно заменить тег <div> на <button>. Он предназначен для создания интерактивных кнопок:

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

Теперь элемент является семантически правильной кнопкой — это улучшит доступность сайта.

Ошибка 5: использовать один id для нескольких элементов

Атрибут id — уникальный идентификатор в HTML, который не должен повторяться на всей веб-странице. Он нужен, чтобы стилизовать конкретный элемент с помощью CSS или обратиться к нему через JavaScript.

Если одинаковый id будет у двух и более элементов, стилизовать их по отдельности будет невозможно. То есть вместо одной зелёной кнопки на странице перекрасятся сразу все такие элементы.

Разберём на примере:

			<div id="myElement">Это первый блок.</div>
<div id="myElement">Это второй блок.</div>

		

Здесь два элемента <div> имеют одинаковый id "myElement". Вот что будет, если использовать JavaScript для доступа к элементу по его id:

			var element = document.getElementById('myElement');
console.log(element); // Это приведёт к тому, что будет выбран только первый элемент с id="myElement"
		

Также это может вызвать проблемы с CSS, если вы пытаетесь применить стили к элементу по его id:

			#myElement {
    color: red;
}  // Красный цвет применится ко всем элементам с id="myElement", и выбрать один из них не получится
		

Корректный вариант кода:

			<div id="myElement1">Это первый блок.</div>
<div id="myElement2">Это второй блок.</div>

		

Теперь каждый элемент имеет уникальный id, и их можно стилизовать по отдельности.

Мы рассмотрели основные ошибки HTML, с которыми сталкиваются джуны-фронтендеры. В следующих статьях подробнее разберём JavaScript и CSS.

Если вам есть что добавить, пишите в комментариях!