Why do you need so many divs in html for website layout?

Question

JavaScript

Every time I watch video tutorials on layout, I notice that everyone uses divs with
wrapper, header-inner, container, etc. classes. and no one explains why all this is necessary. Explain pzh, otherwise I'm confused in their multitude, or is there an article somewhere about this topic?

Answer 1

$('.slider').slick().magnificPopup({
    delegate: 'a', 
    type: 'image',
}).find('.slider__item').on('click', function() {
   console.log($(this).find('img').attr('src'));
});

Answer 2

All modern websites are built on stripe design.
A strip is called a strip - a block with internal indents at the top and bottom, and with a background that separates it from neighboring strips. Or no background.
wrapper , container , and similar names are used to designate a place for content within a strip. Usually it has a maximum width set and it stands in the middle of the strip. This is done so that the content of the strip does not stretch to the entire width of the screen, because in order to read a line 1920 pixels wide on a 22-inch monitor, you need to turn your head, and this is what the maximum width is set for.
Therefore, it turns out quite a lot of elements nested in each other. But understanding the strip, container (or wrapper, container ) and cell (columnscol- ) is generally enough to understand the theory. In bootstrap, a block with the class row (row) is inserted inside the container , and columns inside it. In Foundation, an element with class row itself limits its maximum width, being a container. In general, nesting one element within another is the main feature of html. Here is a strip (occupies the entire width, has padding and a background) Here is a container inside it (it stands in the middle, has some maximum width), However, in this case it has only one column Here is a strip with a container in which there are several columns in a row

Answer 3

Well, it's like an unspoken rule, so that another workbench can understand it)) wrapper - this means a wrapper. *-inner this means the inner main block, in which everything else will already lie. It usually has a fixed width. container is also a kind of wrapper, this name probably came from bootstrap))

Answer 4

Well, look, you have an absolutely clean page, you need to create a block, for example, header. Create the first div with the header class.
Inside it, there must be some kind of container that limits the width, for example, a div with a wrapper class.
The width was limited, it would seem that you can start filling it with content, but no. Let's say we want to use display: flex inside the header, which block should we set this property to? You cannot set it to wrapper, because it is also used in other blocks, and there flexes may be out of place. You have to create another div with the header-inner class and set display-flex to it.
So we have already received three blocks, and have not even begun to fill with content

Answer 5

I will add to previous answers. With the introduction of the 5th standard, this became a bad tone. Even
the w3 standards say this