Depending on the type of element, all html element has a default display value. The default display value is categorized in ‘Block’ and ‘Inline.’
The block-level element usually starts with a new line and takes up the full width i.e. available on page.
<p>, <h1>, <h2>, <h3>, …………, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address>
And,
<div>
<h1> to <h6>
<p></p>
<form></p>
They are displayed without any new line. They flow along with the text content.
The width of inline element is limited (as much required) and also it does not start with a new line.
<span> <a> <img>
Block elements are structural elements whereas inline elements are text based.
We can put any block element inside another block element. We can also put an inline element inside a block level element but we cannot place a block level element inside an inline element with an exception for <a> element (anchor tag)
Block elements expand naturally to fill its parent container, no need of setting height and width externally.
By default, they will be displayed below the previous elements in the code.