Сразу: не вставляй пустой <div>
Если ты сейчас сидишь и такой: «Ну, на всякий случай пусть будет, потом запихну в него что-нибудь» – остановись. Удаляй. Без сожалений. Это как завести папку на рабочем столе с названием «Новая папка (12)» и надеяться, что когда-нибудь в ней появится смысл.
Ты правда хочешь обернуть всё в <span>?
Я не шучу, видел проект, где даже заголовки были в <span>. Типа, «чтобы покрасить, потом же будет проще». Ага, проще кому? Тебе, который потом это дебажит в три ночи с кружкой холодного чая и внутренним криком? Подумай. Не всё надо оборачивать. Структура – не для красоты. Она для того, чтобы не сойти с ума через неделю.
Пример, который до сих пор преследует меня
Проект из 2020 года. Многостраничник. Контент раскидан по <div> с классами типа box1, content2, thing и, клянусь, bla. Угадаешь, что там внутри? Я – нет. Даже автор – нет. Верстальщик уволился, дизайн потеряли. Мы просто сидели и смотрели на этот хаос как на поломанный принтер, из которого вылезают колбаски.
Забудь про <br><br><br> ради отступов
Нет, ну правда. Ты же не шьёшь джинсы нитками от чипсов, верно? Отступ – это margin или padding. Не надо гнать пробелы между абзацами как будто это Word 97. Так мы в итоге получаем пудинг из пробелов и переносов, где ничего не работает как надо.
Один тег – один смысл
Сильно звучит? Так и есть. <header> – не для понтов, а потому что он должен быть в начале. <main> – это не просто большая коробка, это как сцена. А <section> – это уже кулисы. И если ты начинаешь репетировать «Гамлета» в коридоре – публика офигевает.
Ну и бонус: не делай так, как ты думаешь, что «вроде все делают»
Нет универсального шаблона, который спасёт. Есть внимательность. Есть тестирование. Есть ощущение, что ты не просто клепаешь, а как будто строишь дерево – с корнями, стволом, ветками. Если ты вкидываешь теги просто «на глаз» – потом это дерево тебя и придавит. Не драматизирую. Был случай.
И что теперь?
Да просто смотри на структуру, как на план побега из тюрьмы. Каждое лишнее отверстие – это шанс завалить всё. Каждая стена должна стоять чётко. Не потому что «так надо», а потому что иначе код становится нечитаемой кашей. А каша – это на завтрак, а не в разметке.
Пропуск обязательных атрибутов в HTML-тегах
Всегда указывай alt у картинок. Всегда.
Ты можешь забыть зонт в дождь, но не забывай alt у <img>. Серьёзно. Без него страница превращается в «угадай, что здесь было» для тех, кто не видит изображений. Или для поисковых роботов, которым нужно понять, о чём вообще речь. Я однажды залил целую галерею с 50+ фотками, без одного alt. И знаешь что? Ноль трафика с поиска. Как будто вообще ничего не добавлял. Призрак контента.
Формы без name – как почтовые ящики без адреса
Ну да, они вроде стоят. Красивые. С кнопкой и всеми делами. Но серверу вообще пофиг, если в <input> не указан name. Он просто не получит значение. Представь, что клиент оформляет заказ, а у тебя поля «Имя», «Телефон», «Почта» – а ты забыл name. Заказ ушёл в никуда. Клиент в бешенстве. Ты в панике. А всё из-за какой-то мелочи.
label без for – как указатель без направления
Вот честно, я раньше думал: ну работает же без for, зачем париться? А потом пришёл чувак с экранным читалкой. И выяснилось, что форма у нас – квест для экстрасенсов. Указал for – и всё встало на свои места. Даже голосовой ввод начал нормально работать. Просто прикрепи label к input через for и id. Это не больно.
Кнопка без type – это бомба с таймером
Не указываешь type у <button>? Значит, тебе нравится жить на грани. По умолчанию она становится submit. Даже если ты хотел просто «открыть модалку», а не «отправить форму в ад». Внезапный сабмит – и данные улетели, страница перезагрузилась, пользователь психанул. Ну классика же.
aria-атрибуты – не для галочки, а для людей
Если ты пишешь что-то интерактивное (меню, аккордеон, табы) – не ленись проставлять aria-*. Не для красоты. Не для WCAG-фетишистов. А потому что иначе – люди с нарушениями восприятия просто не смогут пользоваться твоим сайтом. И ты потеряешь аудиторию, которую даже не увидел. Пример? Был у нас проект для музея. Без aria-expanded и aria-controls гид просто не мог понять, какой раздел открыт. Это было… неловко.
href без адреса – как дверь в стену
Вставляешь <a href="#"> и не добавляешь обработчик? Получи: фокус прыгает, страница перезагружается, все стили слетают. Никому не весело. Если это псевдоссылка – делай кнопку. Или хотя бы пиши javascript:void(0) (но вообще это костыль, а не решение). И вообще, если элемент кликабелен – он должен быть по смыслу либо <button>, либо настоящей <a>. Всё остальное – фу.
meta без charset – каменный век
Серьёзно, ты до сих пор не указываешь <meta charset="UTF-8">? Ты из будущего без Юникода? Всё будет отображаться как кашица из вопросов и квадратов. А потом кто-нибудь удивляется, почему его сайт вместо «Привет» пишет «ÐŸÑ€Ð¸Ð²ÐµÑ‚». Ну вот и ответ.
Да тут и не нужно ничего подытоживать. Просто не забывай: HTML – это не только про то, «чтобы работало». Это про то, чтобы работало корректно. Для всех. И всегда. Почти как с кофе: без молока – можно, но фигово.
Нарушение иерархии заголовков и блоков
Сразу к делу: не прыгай по уровням заголовков как в Mortal Kombat
Если у тебя после <h1> сразу летит <h4>, значит где-то пошло что-то не туда. Это не турнир по прыжкам в длину. Это структура. Представь книгу: название → главы → подглавы. Никто ж не делает «Глава 1», а потом «Пункт 17.3.2», минуя всё остальное. А вот в коде – постоянно. Глаза кровоточат.
Пример, который я реально видел на одном сайте, который мы потом переделывали
Был <h1>О нас</h1>, потом внезапно <h3>Контакты</h3>, а потом (держись) <h2>История компании</h2>. Как это работает? Никак. Это как начать разговор с «Привет», потом резко перейти к «А ты знаешь, сколько стоит нефть в Иране?», а потом уже: «Кстати, я – Саша».
Почему это реально мешает
- Поиск по странице начинает вести себя как пьяный навигатор – «через 300 метров поверните на… ой, уже проехали».
- Читалки для незрячих людей превращаются в кошмар – иерархии нет, смысла нет.
- SEO-шники начинают чесать затылок, глядя на структуру. А чесотка у них не дешёвая.
Как не сойти с ума: простой чек
- Один
<h1>на страницу. Всегда. Как паспорт. - Дальше – логика: если у тебя есть
<h2>Отзывы, то<h3>Отзыв от Маши– это внутри. - Не скачи через уровни. Если хочешь визуально меньше – стиль в CSS, а не уровень заголовка.
Личный лайфхак – «дерево на салфетке»
Прежде чем лепить HTML, я рисую структуру блоков на бумажке (да, ручкой, да, бумага). Как дерево: корень → ветки → листья. Если всё логично читается без кода – значит, и браузер поймёт. А если сам в этом запутался – то кто вообще потом это читать будет?
Если ты верстаешь под давлением – хотя бы не под алкоголем
Один раз видел, как человек вставил <h6> просто ради «мелкого текста». Серьёзно. Как будто тег – это шрифт. А потом жаловался, что поисковик не индексирует. Ну а как он должен? Он же не экстрасенс.
Короче, заголовки – это не стили, это логика. Иерархия. Как в армии, только без криков. И если всё идёт по плану, никто не орёт. Удобно, спокойно, предсказуемо. А если бардак – то уже не фронтенд, а драмеди в три акта.
Неправильное использование семантических элементов
Зачем лепить <div> туда, где напрашивается <section>?
Слушай, если ты всё ещё в 2025 году расставляешь дивы везде, где просто нужно обозначить смысловой блок – ну, я не знаю. Это как намазать кетчуп на чизкейк. Типа можно, но зачем? У браузера мозг кипит. У скринридера – паника. У SEO – фейспалм.
Пример из жизни? Да легко. Был проект: сайт для юристов. Всё чётко, всё серьёзно. Только вот в коде – тысяча <div>, и ни одного <article>, хотя каждый кейс клиента – это прям полноценный материал. Как итог – структуризация = ноль. А клиент жалуется: «А чего у нас сниппет в Google как попало отображается?» Ну а ты попробуй без ножа рыбу почистить, ага.
<header> – не игрушка, не декор, не подставка под кофе
Ты когда-нибудь видел сайт, где <header> внутри <article>, а потом ещё один <header> – прямо над логотипом, и ещё один – в футере? Я видел. Это как назвать свою собаку «Собака», а потом свою кошку «Собака», а потом и Wi-Fi дома так назвать. Вроде работает, но все в замешательстве.
Реальный кейс: блог о DIY-ремонте. Крутые статьи, классный контент, но структура… ну короче, WordPress + плагины + «я слышал, что <header> полезен. Результат – весь контент выглядит одинаково для поисковиков, как будто это один бесконечный список шагов «Как поменять плитку» и «Как сделать торт». Плитка. Торт. Один тег на всех. Гениально.
Нечего пихать <nav> в каждый угол – это не майонез
Да, я знаю: тебе сказали, что <nav> – круто. Что поисковики это любят. Ну так вот – не всегда. Навигация – это не каждый список ссылок. Она должна быть полезной, логичной, предсказуемой. А не «о, давай завернём шесть внутренних ссылок из подвала в <nav>, чтобы казаться умнее».
Это как взять список ингредиентов и выдать за пошаговую инструкцию. Типа «мука, сахар, яйца – значит, это рецепт». Ага, рецепт с подвохом. Ну вот и с <nav> та же история. Не туда – и всё, семантика мимо кассы.
Окей, но что делать?
- Используй
<section>для смысловых блоков, а не просто ради отступов. <article>– это самостоятельный кусок контента. Типа «можно читать отдельно, не зная весь сайт».<aside>– не свалка ссылок и баннеров. Это доп-контент, а не «всё, что не влезло».<footer>– не для цитат из фильмов. Он про завершение, контекст, инфу «на посошок».- Ну и
<main>должен быть один. Один. Как финал сериала. Не надо дубликатов.
Честно? Я и сам путался. У меня был сайт, где всё шло через <div>, потому что «так быстрее». А потом – редизайн, и я неделю вручную семантику пересобирал. Это как разбирать IKEA-шкаф без инструкции – и находить лишние детали. Только детали эти – твоя структура, и ты не можешь их просто «оставить под диваном».
Просто в следующий раз, когда захочешь вставить <div class="header">, – остановись. Глотни кофе. Подумай: «А может, <header>?» Если ответ «да» – ты на правильном пути. А если «я не уверен» – спроси себя, зачем ты это вообще делаешь. И сделай так, чтобы завтра не было стыдно смотреть в свой собственный код.
Дублирование идентификаторов и классов
Не копируй-вставляй без мозгов
Серьёзно. Один и тот же id="header" встречается у тебя пять раз на странице? Зачем? Это же не промокод в Яндекс Еде. Идентификатор должен быть уникальным. Один. Единственный. Как тот парень с гитарой на Арбате. Как заголовок H1. Один и точка.
Пойми – id в HTML нужен не для красоты. Это якорь. Маяк. Указатель для скриптов, CSS, ссылок, всего. Два одинаковых – и браузер офигевает. JS – тоже. Селектор ссылается на одно, а получает – фиг знает что. Непредсказуемость начинается с банальной лени.
А классы? Тоже не всё так просто
Дублировать классы – не преступление. Но и тут можно наворотить. Например, создать 30 элементов с классом .btn и в каждом писать стили inline, а потом ещё удивляться: «А почему оно по-разному выглядит?» – да потому что ты пишешь, как будто у тебя CSS – это граффити на стене подъезда.
Решение? Заведи себе систему. Не в Notion. В голове. Компонентный подход. BEM, SMACSS, хотя бы чуть-чуть здравого смысла. Пусть классы будут логичными. Повтор – ок, если он осмысленный. А не просто «ну я скопипастил с соседней секции, вроде норм».
Один кривой ID – и всё рушится
Был у нас кейс. Делали клиенту лендинг. Всё шло гладко, пока не началась дичь: скролл ломается, кнопки не работают, формы отправляют не туда. Долго искали – а там у чувака три id="contact-form". И всё. Ищи потом в дебрях. Иди отлаживай.
Хотите избегать такого бардака? Вот тут я собрал простые приёмы и советы по структуре и продвижению: https://auslander.ru/prodvizhenie-sayta-google/. Чистый код – уже полпути к нормальной видимости в Google.
Окей, как не вляпаться?
- Всегда проверяй уникальность
id. Не доверяй VS Code, доверься себе. - Переиспользуй классы с умом. Не делай клонов без причины.
- Автоматизируй проверку. Линтеры, валидаторы, DevTools тебе в помощь.
Иногда лучше потратить 5 минут на осмысленное название, чем потом 3 дня – на отладку сюра. Назови элемент #banana-footer, если надо, но он хотя бы будет один. Ну, максимум два – если ты реально фанат бананов.
