Q915 What is the difference between <span> and <div>?

irt.org | Knowledge Base | DHTML | Q915 [ previous next ]

Q915 What is the difference between <span> and <div>?

<DIV> added in HTML 3.2 is a division tag, very much like <BR> and <P>. It defines a block of text. It creates a line break before and after, forcing the browser to render the text following on the next line down. Whereas <P> creates a leading paragraph space prior to the following text, <DIV> and <BR> do not.

This is on line one
<br>This is on line two
<div>This is one line three</div>
<p>This is effectively on line five</p>

<BR> does not have an associated end tag, i.e. </BR> does not exist, whereas bothe <DIV> and <P> do, i.e. </DIV> and </P>, therfore both <DIV> and <P> define an 'elemental' region of the document, e.g. a paragraph or a division that can have an alignment applied to them. For example, both <DIV> and <P> can include an ALIGN attribute that can be used to align the 'elemental' region of the document:

<p id="paragraph1">this is paragraph one.</p>

<div id="division1">this is division one.</div>

<SPAN> is slightly different in that it doesn't cause a line break. It delimits text. It allows stlyes to be applied to a 'elemental' region, or for the 'elemental' region to be identified, without causing a break in the text flow. Unlike <DIV> it does not have an ALIGN attribute. It could be argued that <SPAN>, on it owns performs no function at all:

This is some <span>text</span> that is unaffected by the tag.