HTML Div Block

Block-level elements

HTML elements can be divided into 2 types: block-level elements and inline-level elements.

Block elements are displayed by default as rectangular blocks with a line-break before and afterwards and have 100% width. Their content consist either of block or inline elements or both, depending on the tag used.

The paragraph element <p>...</p> is a typical block-level element with inline text or images as content. To visualize its block shape we can add a border:

Paragraph block-level element:

Display:

Div

All block-level elements we've seen so far had a semantical meaning with a very specific purpose (h1, h2, h3, ... for headings, ol, ul for lists, etc.).

Quite often, though, you want to change the looks without affecting semantics. For example making a part of your page stand out by adding a different background color. This can be done with the so called <div>...</div> element.

You can think of it as a rectangular layer or container which can hold any number of elements and have CSS styles applied to it, similar to layers in Graphics software such as Photoshop.

The following example uses a div to add a different text and background color for the middle paragraphs:

HTML div:

Display:

Later in the CSS advanced tutorial you'll see that the div element in combination with CSS is one of the most powerful layout tools in HTML.

List of XHTML block-level elements

Here's a list of common XHTML 1.0 strict block-level elements along with the supported content types: