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


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


For example by defining a class telephone, when can ensure all

telephone numbers are displayed in the same fashion:


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.

Permission is granted for reproduction of this article, so long

as it is published in its entirety, with footnotes attached.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.