Friday, February 11, 2005

Span This -- Div That...

What is the difference between the DIV and SPAN tags? The descriptions given in Dreamweaver are identical. Are there instances where one should be used over the other?

Their basic function - provide a tag to hold style information - is the same. The difference is that div is a block-level element, whereas span is inline.

What this means is divs exist in their own space - as a block - so they have space around them. Other block elements in HTML include: table, p, hr, and the headings.

Inline elements like span can exist in the line with other elements - they don't create their own space. Other inline in HTML include: img, a, strong and em.

For instance:
<div id="content">

You use div because you want to take a series of other blocks - in this case, paragraphs - and group them together inside a bigger block - the div - for styling. ("div", by the way, is short for "division".)

<p>This text should be <span class="redbold">red and bold</span>.</p>

You use span because the text being marked up - the words "red and bold" - will exist inline within the paragraph, instead of in their own space. Note that using div in the above example would not end well:

<p>This text should be <div class="redbold">red and bold</div>.</p>

would look like this:

This text should be

red and bold


Post a Comment

<< Home