From LeonWiki!
Actually, the main difference between <div> and <span> is that <div> defaults as a block-level element and <span>
defaults as an inline element. Block-level elements create a new formatting context. they are stacked
vertically in the order they appear in the source code and may contain any number of other block-level
elements or inline elements.
inline elements do not create a new formatting context. they line up horizontally within their block container
in the order they appear in the source code, wrapping to new lines within their block container if necessary
and can contain only other inline level elements (or inline text boxes). Both <div> and <span> are generic elements.
Both can be used as many times as you like
on a page. they hold no defaults settings (that I am aware of) besides their value for display (block on <div>,
inline on <span>). What tomda probably refers to when he says a div is used only once on a page is the use of IDs.
Since a <div> is a generic block level element, they are most often used in CSS design as the main container
elements for a layout. When used this way, most designers apply a unique ID to each <div>, and then attach
styles to that ID in the CSS...
html:
<div id="header"><?div>
<div id="content"></div>
<div id="sidebar"></div>
css:
#header{
PROPERTY:VALUE;
}
#content{
PROPERTY:VALUE;
}
#sidebar
PROPERTY:VALUE;
}
Note, however, that this same thing can be done with the <span>
(or ANY other) tag if you have a single chunk of inline text that you want styled in a particular
way. It's the use of an ID that makes the element unique, not the element itself.
(To use the same styles on more than one element, apply a CLASS (<div class="box">)
to the element tag and define the CSS using the dot(.) selector (.box{width:100px;}).
