Block vs. Inline

The body of an HTML document contains two types of elements:

These are sometimes referred to as:

So what's the difference?

To put it bluntly: block-level elements begin on new lines, whereas inline (or text-level) elements do not.

A classic example of a block element is the paragraph. You will observe that each paragraph on this page begins on a new line.

A classic example of a text-level element is this span of bold text. Notice that the flow of text is not interrupted by the bold element. The change of format does not break the line of text, which is why text-level elements are usually referred to as "inline" elements.

Another way of thinking about the distiction is that block elements create "larger" structures than inline elements.

Blocks may contain other blocks, as well as inline elements and data (content). In contrast, inline elements may contain only data and other inline elements.

A good procedure is to establish the block-level elements of your document first. After you've established the 'big' structure of your document with block elements, concentrate on the inline elements.

| Introduction to HTML | Tutorials |