Whenever you hear that an element is a block-level element, what this means is that this kind of element begins on a new line, and that it occupies any available width.

Block-level elements can be nested inside one another. Examples of block-level elements include <h1>, <p> and <div>.

Inline-level elements do not begin on a new line, instead they fall into the normal flow of a document, lining up one after the other.

Inline elements only maintain the width of their content, and they can be nested inside one another. Examples of inline elements that we have used so far include: the anchor tag <a>, the image tag <img> and the <span>.

A <div> is a block-level element that is used as container for large groupings of content, which helps to build a web page’s layout and design.

A <span>, on the other hand, is an inline-level element, which is used as a container for smaller groupings of text within a block-level element. More than likely, you will see <div> and <span> with class or id attributes for styling purposes.