div и display. Блочная вёрстка.

[raketa]

Начал изучать HTML и немного запутался.
В одной статье пишут про блочную вёрстку в связи с DIV, который относится к HTML:
"Блочная верстка — это подход, при котором сайт строят на основе блоков, в качестве блоков выступают теги div"

В другой статье пишут про блочную модель в связи c параметром display, который относится к CSS:
"Как именно отображаются элементы — как блочные или строчные или как-то ещё, определяется свойством display."

Можно ли сказать, что именно DIV относится к блочной вёрстке, именно он описывает структуру, а display это геометрическое расположение и визуальное оформление на странице этих блоков?

Edited December 7, 2017 by raketa
Подправил пунктуацию

[Hasiev]

div, - Относится к блочным элементам, в css по умолчанию display: block; 

[Super_Saimon]

  On 12/7/2017 at 7:22 PM, raketa said:

Можно ли сказать, что именно DIV относится к блочной вёрстке, именно он описывает структуру, а display это геометрическое расположение и визуальное оформление на странице этих блоков?

Expand  

Ну, вы почти правы: div- ключевой элемент в данной верстке, так сказать  "кирпичи для постройки". А "display" - свойство, если можно так выразиться, поведения блока. Как вам уже подсказали ранее, по умолчанию. 

Edited December 8, 2017 by Super_Saimon

[SelenIT]

  On 12/7/2017 at 7:22 PM, raketa said:

Можно ли сказать, что именно DIV относится к блочной вёрстке, именно он описывает структуру, а display это геометрическое расположение и визуальное оформление на странице этих блоков?

Expand  

Да, можно. Всё так и есть. Вся путаница из-за многозначности слова «блок».

В HTML «блок» — это логический, структурный элемент страницы: абзац, заголовок, список, раздел документа, форма и т.п., из которых, как из кубиков, выстраивается логическая структура страницы. В HTML4 таких элементов было мало, поэтому для любых мало-мальски нестандартных группировок (напр. объединить заголовок, вводный абзац текста, абзац с датой и автором и картинку в более крупный блок «анонс новости», чтобы потом из таких блоков построить еще более крупный блок «лента новостей») приходилось использовать элемент <div> — поэтому он и считался «основным строительным блоком» (опять «блок!») страницы. Сейчас есть много более специализированных логических контейнеров — <nav> для навигационных меню, <header> для вводной информации и <footer> для вспомогательной, <main> для основного контента и <aside> для связанного лишь косвенно, <article> для самодостаточных сущностей и <section> для отдельных смысловых частей чего-то более крупного, <figure> для иллюстраций и примеров, <summary> для раскрывающихся подробностей и т.д., и лучше по возможности пользоваться ими по назначению.

А в CSS "block" — один из типов отображения (элемент по умолчанию начинается с новой строки и заполняет прямоугольник, вписанный своими margin-ами в доступную ширину контейнера, а уже внутри этого прямоугольника могут быть либо другие блоки, либо строки с текстом и строчными элементами). Вообще вся визуальная структура страницы состоит из вложенных друг в друга прямоугольников разного типа, которые по английски называются «box» (букв. «коробка»), отсюда «box model» (все эти margin/border/padding/width/height), которую по-русски традиционно почему-то стали называть «блочной моделью» — вот еще одна причина путаницы.

Есть и другие типы отображения (и, соответственно, «box»-ов) — "inline" (строчный, элемент вписывается в строку текста, при необходимости разрываясь на несколько строк), "inline-block" (строчно-блочный, элемент образует монолитный прямоугольник, и этот прямоугольник целиком встраивается в строку текста, словно картинка или одна большая буква), "flex" (флекс-контейнер, см. флексбоксы), "grid" (грид-контейнер, см. CSS-гриды), "table" (табличный) и т.д.. Все они различаются нюансами своей «box model» и правилами взаимодействия с содержимым и с соседями.

Любому элементу можно стилями задать любой тип отображения (за редкими исключениями — есть нюансы с элементами форм и т.п.). Но логическая, структурная роль элемента от этого не изменится (и то, что в этот элемент можно вкладывать — тоже). Поэтому в современном HTML элементы делят не на «строчные и блочные», как в HTML4, а именно по логической роли — на структурные, текстовые, интерактивные и т.д. (причем многие элементы входят в несколько категорий сразу).

В начале-середине 2000-х было модно говорить о «блочной верстке» в противовес табличной (раньше, в 90-х, страницы верстали, «нарезая» всю страницу на ячейки одной таблицы, частично объединенные через rowspan/colspan, и распихивая контент по этим ячейкам, другого тогдашние браузеры не понимали). Имелось в виду именно логическое структурирование HTML на логические же блоки, с последующим оформлением этих блоков через CSS (в принципе как угодно, хоть через тот же display:table, но чаще всего в дело шли float и clear). Сейчас чаще говорят о семантической верстке — использовать HTML-элементы по их назначению, как подходит по смыслу, а оформлять их как нужно по дизайну, используя все возможности современного CSS. Элемент div по-прежнему важен, когда нужно соорудить «что-то этакое», для чего нет стандартного элемента, или нужна добавочная обертка, чтобы подстраховать старые браузеры — но в целом сейчас его роль скорее вспомогательная.