A document is structured by it elements. The HTML elements that we commonly know are p, div, table, headings, span and many more. In CSS (2.1) each element has its own box that contains the element’s content. Hence these elements are broadly classified as:

• Replaced and Non-replaced elements
• Block-level and Inline elements

This classification is made on the basis of their nature of presentation.

1.       Replaced elements:

Replaced elements are those where the content of the element is replaced with some content external to that document. For example, the ‘img’ element has no content of its own. It takes the path to the file that needs to be displayed in the box created by the element.

2.       Non-replaced elements:

All other elements are non-replaced elements. For instance, the ‘p’ (paragraph) element;

<p>Some text </p>

Other non-replaced elements are div, span, headings, lists, tables, etc.

3.       Block-level elements:

As the name suggests create a box for their content. It creates a space of its own and adds breaks before and after its box. Examples of Block level elements are ‘p’ and ‘div’.

Lists are also block-level elements. But unlike other block elements, lists have their own set of presentation properties in addition to those inherited from block-level elements. These properties include indentation and bullets (for unordered lists) and numbers (for ordered lists).

4.       Inline-level elements:

Inline elements spawn an element box within the line of text and do not break the flow of the line. In other words they do not break from rest of the display. The most used inline element is ‘span’. Other examples are ‘a’, ‘strong’.