Every HTML elements has a default display value which depends upon the element type. The default display value that is given for most of the elements are either block or inline.
Block-level Elements
A block-level element begins on a new line and fills the full width available(stretches to the left and right extend as far as it possibly can).
Examples of block-level elements:
Inline Elements
An inline element will not be starting on a new line and only takes necessary width(not beyond its need).
This showsan inline <span> element inside a paragraph.
Some examples of inline elements:
The <div> Element
The <div> element is most often used like a container for other HTML elements.
The <div> element does not have required attributes, but both style and class are commonly used.
When they are used together with CSS, the <div> element can also be used to style content blocks:
Example
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city
of England. It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.</p>
</div>
Try it Yourself
The <span> Element
The <span> element is mostly used as a text container.
The <span> element does not have required attributes, but both style and class are commonly used.
When used along with CSS, the <span> element is also used to style text parts:
HTML Grouping Tags