Веб Мастерская | Веб разработка и программирование | ИТ | IT

Без категории · 18 августа 2026 г.

Открыть канал в MAX

БАЗА:

БАЗА: Семантическая верстка: почему div не подойдет для всего Знаете, что я вижу в 7 из 10 проектов, которые приносят на рефакторинг? Бесконечный суп из <div>. <div class="header">, <div class="nav">, <div class="article">, <div class="footer">. Коллеги, это не верстка. Это крик души, замотанный в классы. Разберём на живом кейсе. Пришёл клиент: «Сайт в Google на 8-й странице, скринридер его не читает, а новый стажёр неделю не может понять структуру». Открываю код — 340 строк, и ни одного тега кроме <div> и <span>. А теперь магия. Меняем: ❌ <div class="nav"> → ✅ <nav> ❌ <div class="article-title"> → ✅ <article><h1> ❌ <div class="sidebar"> → ✅ <aside> ❌ <div class="button"> → ✅ <button> Итого: минус 40% CSS-костылей, плюс внятная структура DOM. Что это даёт в продакшене: 🔹 SEO. Поисковики читают семантику напрямую. <article> и <h1> говорят боту: «вот контент, вот заголовок». Div с классом — нет. 🔹 Доступность. Скринридер не знает, что ваш <div class="menu"> — это навигация. А <nav> — знает. Для 285 млн людей с нарушением зрения в мире это не «nice to have», а необходимость. 🔹 Поддерживаемость. Новый человек в команде открывает <header>, <main>, <footer> и сразу понимает скелет страницы. Без README. Без звонка вам в 23:00. 🔹 Меньше CSS. Семантические теги несут поведение из коробки. <button> кликается с клавиатуры. <a> — ссылка. Не надо вешать cursor: pointer, role="button" и tabindex="0" на каждый div. Практическое правило из мастерской: прежде чем писать <div>, спросите себя: «А нет ли тега, который описывает СМЫСЛ этого блока?» Если есть — берите его. Div оставьте для чисто визуальных обёрток, где семантики реально нет. Коллеги, семантика — это не «скучная теория из учебника». Это то, что экономит часы рефакторинга и делает ваш сайт видимым для всех. Проверено на десятках проектов студии. Вот так. Идем кодить дальше! 🚀 #семантическаяверстка #html #верстка #webdevelopment #вебразработка #frontend #junior #доступность #a11y #seo #css #код #вебмастерская #разработка #bestpractices