Почему верстка на div — это зло?

Question

[OldBones]

Добрый день, я начинающий верстальщик. Часто слышу от опытных наставников о том, что "Верстка на div - это чисто зло." Сначала я решила сама разобраться в этом моменте и получила вот такие результаты:

1. Существует целая куча статей и гайдов для обучение верстки страниц за час при помощи блочной верстки через тег div.

2. Верстка с использованием одно и того же тега div - это антисемантика.

3. Сайты написаные практический на одном теге div трудно поддерживать, тк код однообразен.

4. Такие сайты сложно маштабируются.

5. Тогда что с кодом wikipedia.org?

В общем решила обратиться к специалистам. На самом ли деле div - это зло? А что же тогда с теми, кто выкладывает все эти гайды и верстает сайты и лендинги за 2 часа на div-ах?

PS если я сделала неправильные выводы, пожалуйста, поправьте меня. Буду рада услышать любое мнение и принять его во внимание.

Comments

[Rustam Bainazarov]

4. Такие сайты сложно маштабируются.

Навряд ли наличие семантических тегов как-то повлияет на масштабируемость проекта.

Семантика добавит вам очки как разработчику, позволит создать правильный accessibility, SEO, ну и тупо улучшит внешний вид кода для визуального восприятия. На масштабируемость это не повлияет.

Да, вы можете на одних div'ах создать очень масштабный и успешный проект (но это неправильно, ибо семантика — тоже часть технологии).

Просто введите в обиход всякие header, main, footer, aside, section, h1, article, figure, p, nav, ul, li — и будет вам счастье. Ибо чтобы тотально разбираться в особенностях семантики — это очень много информации. Это придёт с опытом и чтением документации/форумов и пр.

[Дмитрий Киреев]

header, footer, nav, в ссылках span, если структура позволяет - section. Остальное div. Это если касательно разметки. А если вы для придания display: block оборачиваете элемент в пустой div без смысла - это печально.

Answer 1

[Lord_Dantes]

50 на 50.
Если все верстать дивами то можно в крупном проекте потеряться как минимум устать ?)
Попробуйте использовать несколько из основных HTML5 Tag's такие как:
- header = шапка сайта
- main = оболочка для контента сайта
- footer = футер сайта
-- section = секция отдельных блоков
-- и т.д это тип основные

UPD тэг section лучше не использовать для отдельных блоков, после изучения сего дела я понял что эти тэги вообще для другого созданы. Все таки div пока что лучший "заменитель" привычных мне секций..(

Comments

[OldBones]

Спасибо за ответ

[ProjectSoft]

Т. е section или article не могут иметь тот же main, header или footer?
Покажите большой проект, где программист может потеряться в разметке.
Ибо в большом, как вы говорите, или в малом, а я могу утверждать, этого не произойдёт. Ну если только вы не на статике.

[Lord_Dantes]

ProjectSoft,
1. Нет ( htmlbook.ru/html/main )
2. Если в разметке будет вместо привычных section, header,span,p, ul,nav,footer,header = div я бы потерялся в разметке - это не удобно. Мы обсуждаем тему верстки, динамика имеет шаблоны в которых изображена верстка в 20-50 строк кода для отдельного элемента там не где теряться. Я имею ввиду целый документ, абсолютно все с начала body и до конца в div'ax это влияет немного.

[ProjectSoft]

slave bb, https://habr.com/ru/post/214407/
А дальше вам решать.
Комментарий зачем - я дал в своём ответе.
Лично мне незачем смотреть исходный код всей страницы, если я знаю где, как и зачем вызывается тот или иной компонент в разработанном мною же шаблоне динамического контента. Его генерирует используемая CMS, но по установленным условиям, опять же.
До html5 люди же работали с дивами? я работал, поддерживаю, переписываю и т. д. Время заставляет. И, как бы, не терялись, не путались, а код держали форматированным. Вот если он не форматированный - это проблема. А на выдаче он у меня вообще в одну строку сжат.

[Lord_Dantes]

ProjectSoft, вы несете какую-то чушь, кидаете ссылку в поддержу моей правоты, а не своей.
Если вы начали это, киньте ссылку где пишут что нужно все абсолютно верстать дивами. Какие нахер форматированные вы куда стрелки переводите? Давай поговорим еще про SEO или семантику разбирать.
Я говорю что дивами все время и все абсолютно верстать костыльно и не правильно, потому-что есть другие тэги, а вы кидаете линк где рассказывается как правильно их использовать.

[Lord_Dantes]

ProjectSoft, и автор ниже дает ясно знать кем Вы являетесь.

Вешать классы для семантики на дивы имея семантические теги признак отсталости и непрофессионализма. Так может сделать бэкендер или какой-нибудь фуллстак, но не уважающий себя фронт.

Answer 2

[xmoonlight]

Если контент блока не подходит ни под один семантический HTML5 блок, то это DIV.
Никого не слушайте! Больше изучайте!

Answer 3

[Vaultboy84]

Такое ощущение, что некоторые, кто тут дает ответы сам версткой толком не занимается. Дивы стандартные блоки, которые используются там, где нет возможности применить семантические теги. В любых иных случаях должны быть применены семантические теги. Это необходимо для поисковиков и для читабельности вашего кода. Таков стандарт html 5. Если вы не хотите соответствовать современным общепринятым стандартам, вы можете верстать хоть таблицами, но будте готовы к понижению позиций своего ресурса в поисковой выдаче, так же вряд ли кому то в дальнейшем понравится сопровождать ваш код. Вешать классы для семантики на дивы имея семантические теги признак отсталости и непрофессионализма. Так может сделать бэкендер или какой-нибудь фуллстак, но не уважающий себя фронт.

Comments

[OldBones]

Спасибо за развернутый ответ. Думаю, вы правы. Не идиоты же выпускают все эти стандарты, поэтому буду осваивать теги и всегда думать, о том как написанный мною код будет поддерживаться в будующем.

[Дмитрий Евграфович]

Уж кто-кто, а поисковики на семантические блоки смотрят в последнюю очередь, судя по их результатам выдачи.

Answer 4

[DeveloperV]

Так то это сделано в большей степени для поисковых систем, в общем для обеспечения доступности. Знание этими системами что за блок, придают этому блоку смысл, то есть семантичность. А div можно использовать там где ни один элемент семантических блоков не подходит.

Answer 5

[Moskus]

Либо вы не понимаете или только частично понимаете, что именно вам говорят, либо ваши "наставники" действительно несут бред.
Блочная верстка с использованием div - норма. Другое дело, что нужно снабжать эти div соответствующими классами, и не делать так, как в вашем примере выше, в смысле совершенно бессмысленной вложенности.

Comments

[OldBones]

Спасибо за ответ. Просто часто натыкалась на то, что div - это скорее обертка для стилизации. Поэтому стало интересно разобраться как именно браузеры воспринимают сайты, которые 90% состоят из тега div, заменяющие section, nav, header и тд

[Moskus]

OldBones, browser-у абсолютно все равно, какие теги используются.
Семантические теги вроде header и section имеют некоторое значение для поисковиков и для читаемости кода.

[Moskus]

survivor2005, вы зачем это мне адресуете?

[survivor2005]

Moskus, сорри, промахнулся

Answer 6

[Владислав Лысков]

Вы слышите полнейшую дичь, верстайте дивами(если это можно так назвать) и не парьтесь
ЗЫ, но скорее всего вы просто неверно их понимаете

Answer 7

[VegasChickiChicki]

Верстайте дивами, но не забывайте про семантику, существует очень много мест, которые можно сверстать не дивами. Тоже самое можно и про текста сказать, мол везде тыкать тег p и пару тегов H1-H6 - ад, нет. Не забывайте, что текст это не только H1-H6 и тег p, существует огромное множество и тегов для текста.

Answer 8

[Alex]

https://youtu.be/Ptt5Se7vyZA

Answer 9

[Андрей Чернов]

Почему-то никто не упомянул, что правильное использование тегов из HTML5, таких как header, main, section, article, aside и footer, нужны не только для правильного чтения сайта поисковиками и другими верстальщиками.

В первую очередь эти теги нужны для людей с ограниченными возможностями (слепым, слабовидящим или просто испытывающим затруднения при чтении с монитора). Такие люди обычно пользуются экранным диктором, который есть в операционных системах и в виде отдельных расширений для браузера.
Когда ваш сайт сделан полностью на div-ах, то при помощи экранного диктора перемещаться по сайту будет крайне не удобно.

Для всех, кто интересуется, почему не стоит везде и всегда использовать div, советую посмотреть видео с Вадимом Макеевым ( Alex как раз оставил ссылку на видео). Вадим доступным языком объясняет почему нужно верстать доступные сайты.
Также советую почитаться статьи о доступности в интернете, на английском языке их огромное множество.

Answer 10

[Алекс Глебов]

У специалистов волосы дыбом встают от "семантической верстки". Ну не видели они такого никогда.
Смысл блокам придают классы по бем.
html5 и интерактивные теги максимум что нужно в верстке страницы.
Остальные в контенте, который из админки заполняется через визуальный редактор. т.е это разметка текста.

Answer 11

[BigFishinginfo]

Не знаю ни одного крупного проекта где переизбыток дивов в блочной вёрстке...
Я могу сказать, что ботстрап это зло и переизбыток js это зло...
Открытый js и css в Dom тоже зло!

Comments

[OldBones]

Спасибо за совет, обращу на это внимание

Answer 12

[Иван Доброславин]

Возможно, имелось ввиду, что не нужно создавать огромное количество вложенных дивов (блоков).

Вёрстка на div-ax - это добро :)