nekiystranger
@nekiystranger

В чём минус вёрстки дивянками?

Какой минус верстать одними дивами?
  • Вопрос задан
  • 887 просмотров
Пригласить эксперта
Ответы на вопрос 2
MrDecoy
@MrDecoy
Верставший фронтендер
1) Вы не помогаете ни себе в будущем, ни будущему разработчику читать код сайта. Так как всё - див, то не понятно на первый взгляд, функциональный он или же просто обёртка. Хотя див по своей задумке должен быть обёрткой и только обёрткой.
2) Вы не помогаете людям, пользующимся интерфейсом не только мышкой, не только глазами. Семантические теги помогают строить дерево доступности, которое помогает быстрее навигироваться по странице и понимать что на ней вообще есть.
3) Вы не помогаете поисковым системам понять, что на сайте за контент. Поисковые системы любят семантику. Любят семантические сайты. Поэтому если всё хорошо размечено, то в поисковой выдаче сайт будет выше, а так же может быть более качественный и информативный сниппет ответа на запрос пользователя, а это положительно сказывается на пользовательском опыте и конверсии для сайта.
4) Если Вы даже кнопки и ссылки верстаете дивами, то гореть вам синим пламенем Вы теряете нативное поведение этих элементов, которое Вам придётся эмитировать. Причём полностью повторить его, скорее всего и не удастся. Например: если вместо ссылки Вы делаете div c событием onClick, в обработчике клика указываете что нужно перейти на такую-то страницу, то переход будет осуществляться СТРОГО по событию клика. На этом диве Вы не сможете нажать колёсиком, как на ссылке, чтобы открыть её в новой вкладке. На этом диве, если нажать правой кнопкой мыши, в контекстном меню НЕ будет кнопки "Открыть в новой вкладке". На этом диве Вы НЕ сможете использовать CSS селекторы :active, :visited и тд. Если это див будет, каким-то чудом, в фокусе, Вы НЕ сможете нажатием на пробел "перейти по ссылке" и это только то, что касается ссылок, и то не всё.

В чём минус вёрстки только дивами? Проще ответить на вопрос: в чём достоинство? Ответ: ни в чём.

P.s. Да, можно достичь почти всего вышесказанного только дивами, но для этого нужно грамотно и весьма геморно пользоваться aria-* и role атрибутами, а так же городить кучу лишнего js`а.
Ответ написан
Комментировать
@Ibishka
Неправильная семантика!
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы