Container – a Web page element intended only to highlight some of its fragment. Such a fragment can be a part of a block element (paragraph, title, quotation, fixed-format text, etc.), a block element, or several block elements at once. The Web browser does not select a container on the Web page in any way.
The container serves two purposes. First, it allows us to bind a style to a particular element or elements on a Web page; just enclose the element or elements in a container and bind a style to it. Second, it can bind behavior to an item or items on the Web page in the same way as a style.
<div>…</div> is a container. It has no special properties. That’s why it is often used to form the design of the site. By default, div is a block element. Therefore, on the page will take 100% of the width of the parent element.
<span>…</span> is the same container as div. But span is a line element. This means that you can use it inside a block of text to highlight a piece of text. Analogous to this behavior are formatting tags for text <b>, , , , .
Within block elements (div) there can be as many line elements (span) as you like. But putting a block element inside a string element is a mistake. In this case, different browsers will give unpredictable results.