Главные ошибки новичков-фронтендеров в HTML
Рассказываем про частые ошибки в HTML и о том, как их избежать. Добавляйте в закладки!
792 открытий8К показов
Ошибки — часть обучения начинающего фронтенд-разработчика. Если их анализировать и исправлять, можно расти как специалист и создавать более качественные продукты.
Но есть ошибки, которые делает практически любой джун-фронтендер. Их можно изучить заранее и просто запомнить, чтобы избежать в будущем. В этой статье — как раз о таких распространённых вариантах.
Ошибка 1: неправильные имена классов
Классы в HTML — способ группировки и идентификации элементов. Классы задаются с помощью атрибута class.
Например: <div class="container">
.
Так можно стилизовать и манипулировать элементами с помощью CSS и JavaScript.
Джуны часто дают классам непонятные или сокращённые имена — иногда даже транслитом.
Например:
Здесь классы названы кириллицей и сокращённо. Это делает их непонятными для других разработчиков, что может привести к проблемам при стилизации — в коде придётся долго разбираться.
Как избежать ошибки: используйте понятные, описательные имена классов на английском языке.
В исправленном примере имена классов написаны на английском языке и ясно отражают назначение элементов.
Ошибка 2: использование блочного элемента внутри строчного
Вкладывать строчные элементы в блочные можно, а наоборот — нельзя. Так происходит потому, что HTML создан с учётом семантики, у каждого тега есть определённая функция.
Как правило, строчные элементы нужны для текстовой информации. Они занимают ровно столько места, сколько нужно, чтобы отобразить содержимое. А блочные элементы используют, чтобы структурировать страницу, и они занимают всю доступную ширину.
Если вложить блочный элемент в строчный, семантика нарушится и страница будет отображаться некорректно.
Пример ошибки:
Здесь блочный элемент <div>
вложен в строчный элемент <span>
— такая страница в браузере будет выглядеть «криво», все элементы на ней будут отображаться скученно.
Как избежать ошибки: убедитесь, что блочные элементы вложены корректно.
Например:
Ошибка 3: вложенный тег закрывается позже родительского
Правильное вложение тегов важно для чистого и функционального кода.
В HTML теги должны закрываться в обратном порядке относительно их открытия. Это помогает правильно сформировать DOM-структуру.
Если вложить теги в HTML с ошибкой, элементы на странице отобразятся не на своих местах и сайт будет выглядеть «сломанным».
Пример ошибки вложения:
Тег <span>
должен был закрыться перед тегом , но он закрывается после — это ошибка.
Правильное вложение:
Здесь тег <span>
закрывается перед тегом </div>
— это соответствует правилам вложения.
Привыкайте закрывать теги в правильном порядке во время написания кода. Используйте редакторы кода с подсветкой синтаксиса и автоматическую проверку — например, W3C Markup Validation Service.
Ошибка 4: неправильное использование семантических тегов
Семантическая вёрстка — это подход к созданию веб-страниц, в котором используют HTML-теги согласно их смыслу. Например, тег <header>
предназначен для заголовочной части веб-страницы, а тег <footer>
— для подвала.
Этот подход облегчает понимание структуры и содержания веб-страницы — как машинам, так и разработчикам.
Если использовать семантические теги неправильно, ухудшаются доступность сайта, SEO и общее взаимодействие пользователя с веб-сайтом.
Вот пример неправильного использования тега <div>
вместо <button>
:
Для создания интерактивного элемента использован тег <div>
с атрибутом onclick. Но <div>
не предназначен для интерактивных целей, поэтому браузеры и скринридеры не будут воспринимать его как кнопку. Это создаст проблемы для пользователей, которые используют скринридеры или клавиатурную навигацию.
Чтобы исправить ошибку, нужно заменить тег <div>
на <button>
. Он предназначен для создания интерактивных кнопок:
Теперь элемент является семантически правильной кнопкой — это улучшит доступность сайта.
Ошибка 5: использовать один id для нескольких элементов
Атрибут id — уникальный идентификатор в HTML, который не должен повторяться на всей веб-странице. Он нужен, чтобы стилизовать конкретный элемент с помощью CSS или обратиться к нему через JavaScript.
Если одинаковый id будет у двух и более элементов, стилизовать их по отдельности будет невозможно. То есть вместо одной зелёной кнопки на странице перекрасятся сразу все такие элементы.
Разберём на примере:
Здесь два элемента <div>
имеют одинаковый id "myElement"
. Вот что будет, если использовать JavaScript для доступа к элементу по его id:
Также это может вызвать проблемы с CSS, если вы пытаетесь применить стили к элементу по его id:
Корректный вариант кода:
Теперь каждый элемент имеет уникальный id, и их можно стилизовать по отдельности.
Мы рассмотрели основные ошибки HTML, с которыми сталкиваются джуны-фронтендеры. В следующих статьях подробнее разберём JavaScript и CSS.
Если вам есть что добавить, пишите в комментариях!
792 открытий8К показов