What is the difference between a DIV tag and a SPAN tag? These two tags are often used inter-changeably by developers for different reasons.

The basic difference between the two is their default behavior. The DIV tag is a block level element and can be used as container for other tags. On the other hand, SPAN tag is an inline element and should only contain contents. These default behaviours can of course be altered by CSS definitions, but are default in any browser context. As an example, if you want to align text within these tags use the following CSS attributes:

Using DIV tag:
text-align: left|right|center|justify;

Using SPAN tag:
float: left|right;

The DIV tag takes as much of the width of the page as it can. It blocks out the whole section of the page, so that anything following it has to go to the next line beneath it. The SPAN tag takes as little space as possible, only enough to contain its content. For the purpose of illustration, I put a border around the element so that you can see the difference:

Using DIV tag:

Using SPAN tag:
Using SPAN

DIV tag is also used to define logical divisions of page content. It also allows CSS to be defined for whole section of HTML. A SPAN tag is not intended to contain other tags but rather to allow localized styling. This is especially useful when combined with CSS classes.

Alternatively, P tag is a block level element while STRONG tag is an inline element.


Tagged , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: