Historically, HTML elements are classified as either block-level or inline. A block-level element fills the whole space of its parent container. Browsers achieve this by starting block-level elements on a new line and allowing the element to occupy the full width available.
For example, a paragraph by default, occupies the whole space available to it.
<p color="green">This is a short paragraph but it will occupy the whole width of the page</p>
This is a short paragraph but it will occupy the whole width of the page
These are the list of most used block-level elements:
Inline elements on the other hand, occupies only the space of its defining tags. If two inline elements are defined with one following the other, then the second will take the rest of the line left by the first.
<span color="red">I am inline element 1</span><span color="green"> and I am inline element 2</span>
I am inline element 1 and I am inline element 2
These are the list of most commonly used inline elements: