These two tags are often used inter-changeably by developers for different reasons, so what are the differences between them? How should they be used to markup web pages?

The basic difference between the two is their default behaviour. DIV tags are block-level tags and can be used as containers for other tags. SPAN tags are inline tags and should only contain content. These default behaviours can of course be altered by CSS definitions, but are default in any browser context.

As a reference, if you want to align text within these tags use the following CSS attributes;

DIV - text-align: left|right|center|justify

SPAN - float: left|right

DIV tags are also used to define logical divisions of page content. It also allows CSS to be defined for whole sections of HTML. By applying an id to a DIV you can also add controls using JavaScript.

A SPAN tag is not intended to container other tags, but rather to allow localised styling. This is especially useful when combined with classes. It has even been suggested that future semantic web models will use such markup to define relevant content.

For example by defining a class telephone, when can ensure all telephone numbers are displayed in the same fashion:

44-20-555-4444

SPAN tags have similar properties but should be used to reference inline content and apply style by classes.

In summary: use divs for defining sections of a page, and spans to enclose and style text or classes of text.

An example usage of this approach would be as follows.

Often a designer will wish to have a section or paragraph title bar which contains two separate pieces of text displayed on one line. This may be a text title on the left and a date or time stamp on the right.

This can be accomplished very cleanly with a few CSS attributes applied to the following HTML :-

Section: HTML help Date: 21st Apr

div { text-align: right; }
span { float: left; }

By using this simple approach it means that the content will still be displayed in the order it was intended to be viewed, even if CSS is not available or rendered correctly in the visitor's browser. This approach also avoids the temptation to use tables or even floating div tags. By using the DIV and SPAN tags, the semantic nature of the content is preserved.

Permission is granted for reproduction of this article, so long as it is published in its entirety, with footnotes attached.

Further HTML help, and XHTML tips can be found at http://www.xhtmltips.co.uk/