PassFront
  1. PassFront
  2. База знаний
  3. Теги и их категории

Какие плюсы и минусы написания всего на div?

Теги и их категории

Вёрстка «всего на div» быстрая на старте, но обходится дорого для доступности, SEO и поддержки.

Плюсы

  • нет стандартных стилей браузера — всё оформление под контролем;
  • не нужно думать о выборе тега;
  • одинаковое поведение во всех браузерах.

Минусы

  • Доступность. Скринридер не понимает структуру: нет навигации, заголовков, списков. div с onClick недоступен с клавиатуры — нужно вручную добавлять role, tabindex, обработку Enter и пробела.
  • Потеря встроенного поведения. Кнопки, ссылки, формы, подписи полей у семантических тегов работают «из коробки».
  • SEO. Поисковикам сложнее понять главное содержимое и структуру.
  • Читаемость. Сложно ориентироваться в «супе из div».
<!-- плохо -->
<div class="btn" onclick="save()">Сохранить</div>
<!-- хорошо -->
<button type="button" onclick="save()">Сохранить</button>

Коротко для собеседования

Всё на div — просто, но ломает доступность, лишает встроенного поведения и SEO; div стоит оставить для раскладки.

Подробнее: MDN — HTML: хорошая основа доступности

Другие вопросы раздела