Difference between DIv and Span

copied this post from here

What’s the difference between <span> and <div> tags?

<span> and <div> tags both allow a Web designer to style text
and add other formatting attributes to their Web page. They are not interchangeable
tags, though. <div> tags are block-level elements, whereas <span>
tags are not. This article explains this, and other differences, between <span>
and <div> tags.

Both <span> and <div> tags allow you to apply CSS styles

<span> and <div> tags are both fine for applying inline CSS formatting.
Consider the following code:

<div style="color:#000000;font-weight:bold;font-size:14px">Here’s
some text in between div tags</div>

The output of this code is the same as:

<span style="color:#000000;font-weight:bold;font-size:14px">Here’s
some text in between span tags</span>

<div> tags are block elements that allow you to position elements contained
within them

<div> tags are block elements. This means they can "hold"
other HTML elements, and they can be positioned anywhere on the screen. For
this reason, <div> tags can be used for replacing table-based Web designs.

<span> tags are NOT block elements

Unlike <div> tags, <span> tags cannot hold other HTML tags. They
should only be used for inline styling of text. Consider the following code:

<span style="font-size:14px">

<p>This is some text sized at 14 pixels.</p>

</span>

This code will probably render OK in most browsers, but it is actually incorrect.
Remember, since the <span> tag is not a block-level element, it cannot
contain other HTML tags. The correct way to write this code would be:

<p><span style="font-size:14px">

This is some text sized at 14 pixels.

</span></p>

While this code is correct, it can be written more efficiently by removing
the <span> tag altogether:

<p style="font-size:14px">

This is some text sized at 14 pixels.

</p>

<div> tags create line breaks, <span> tags do not

Since <div> tags are block elements, they create line breaks. This
is the same effect as a <p> tag. <span> tags do not create line
breaks, which makes them perfect for styling text in the middle of a sentence.
Here’s an example of a <span> tag used to style text in the middle
of a sentence. The same code using <div> instead of <span> would
produce undesired results.

<p>It's snowing in the Northeast today. Some towns received as much
as <span style="font-size:18px;font-style:italic;font-weight:bold;">6
inches</span> of snow.</p>

Summary of <span> vs. <div> tags

<span> tags are useful if you need to apply specific formatting styles
to text in the middle of a sentence, or in one place on your Web page. They
are far less powerful than <div> tags, though, as a <div> will
allow you to create blocks of content (like table-based Web designs) and position
elements on the screen.

This article was written by Christopher Jason and published on Sunday, January
15th, 2006. You can follow any responses to this entry through the RSS 2.0
feed.