HTML elements can be classified into two categories - block-level and inline elements. Let's have a look at both.
Block-level elements
A block-level element occupies the entire space of its parent element that is available to it. These are the ones which always start from a new line and covers the entire width available to them.
These can contain other block-level or inline elements. It accepts width and height values. The characteristics of block-level elements are demonstrated in the following example.
HTML
<p style="background-color: #A3D65C;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum mauris id volutpat dapibus. Mauris nec diam at metus sagittis luctus.</p>
<p style="background-color: #EC734A;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum mauris id volutpat dapibus. Mauris nec diam at metus sagittis luctus.</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum mauris id volutpat dapibus. Mauris nec diam at metus sagittis luctus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum mauris id volutpat dapibus. Mauris nec diam at metus sagittis luctus.
p is a block-level element and thus it always starts from a new line. Notice that both the elements cover the entire width available to them, as can be seen by the area covered by their background colors.
Following is a list of block-level elements.
p, div, heading tags (h1, h2, h3, h4, h5, h6), ol, ul, pre, address, blockquote, fieldset, form, hr, table, dl, noscript, nav, pre
Some other block-level elements which are newly added in HTML5 are given below.
article, figure, output, canvas, header, footer, section, aside, hgroup, figcaption, video
Inline elements
An inline element only occupies the space that is necessary, and not the whole width. It may or may not start from a new line. It does not accept width and height values.
Look at the following example.
HTML
<p>There is an <span style="background-color: #A3D65C;">inline element</span> in this sentence.</p>
There is an inline element in this sentence.
span is an inline element and thus it only covers the space that is sufficient for its content. In the above example, the background color given to the span is just behind the content of the span and not covering the entire width.
Some of the examples of inline elements are given below.
a, b, big, i, tt, small, small, abbr, acronym, code, cite, em, kbd, dfn, strong, samp, time, var, bdo, map, img, object, button, sup, sub, span, q, script, input, label, select, textarea
