O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Element Classification

Broadly speaking, CSS groups elements into two types: nonreplaced and replaced. Although the types may seem rather abstract, there actually are some profound differences in how the two types of elements are presented. These differences are explored in detail in Chapter 7 of CSS: The Definitive Guide, third edition (O’Reilly).

Nonreplaced Elements

The majority of HTML and XHTML elements are nonreplaced elements, which means their content is presented by the user agent inside a box generated by the element itself. For example, <span>hi there</span> is a nonreplaced element, and the text hi there will be displayed by the user agent. Paragraphs, headings, table cells, lists, and almost everything else in HTML and XHTML are nonreplaced elements.

Replaced Elements

In contrast, replaced elements are those whose content is replaced by something not directly represented by document content. The most familiar HTML example is the img element, which is replaced by an image file external to the document itself. In fact, img itself has no actual content, as we can see by considering a simple example:

<img src="howdy.gif" alt="Hi">

There is no content contained in the element—only an element name and attributes. Only by replacing the element’s lack of content with content found through other means (in this case, loading an external image specified by the src attribute) can the element have any presentation at all. Another example is the input element, which may be replaced with a radio button, checkbox, or text input box, depending on its type. Replaced elements also generate boxes in their display.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required