<div> <section> <article>


#1

Не нашел данной темы тут. В интернете читал, но так и не понял разницы. Кто поможет разжевать? И почему в некоторых заданиях внутри article находился section? Заранее огромная благодарность!


#2

ну собственно никакой. все три - контейнеры для “чего-то”. просто для семантики (раньше было тупо миллиард div-ов с классами). например, вы помещаете статью про букашек. секция1 введение, секция2 как букашки проводят пенсию, секция3 - заключение. причем на странице может быть много статей, которые сидят в main.


#3

<div> — это просто блок, без особой смысловой нагрузки. Его можно использовать, для стилизации других блоков.
К примеру, есть 2 блока <section> их надо разместить в одну строку, как это сделано в Barbershop. Можно их сделать inline-block. А можно объединить в одном блоке <div>, c параметром display: flex.
Второй вариант, гораздо изящнее и проще в реализации.

<section> — смысловой раздел страницы. Которому, так и хочется дать заголовок, чтоб не запутаться.

<article> — тот же <section>, но полностью независимый от сайта. Для примера:

  • Рекламный блок, который можно разместить на любом другом сайте и он все равно приведет пользователя к вам — это Article.
  • Отдельная статья, которую можно разместить на отдельном ресурсе и при этом она не потеряет своей информационной ценности — тоже Article.
  • Карточка товара в каталоге электронного магзина — также является Article, т.к. даже в отрыве от самого магазина, она дает потенциальному покупателю представление о таваре и информацию как его приобрести.

В общем, section — это какой-то раздел, чего-то. А article — это не просто раздел, а отдельный и независимый информационный блок, который как и куда его не сунь, все равно не теряет своей функциональности.


#4

большое спасибо. Надеюсь, запомнится :slight_smile: