Div and span Tags in HTML

The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page. For example, you might want to put all of the footnotes on a page within a <div> element to indicate that all of the elements within that <div> element relate to the footnotes. You might then attach a style to this <div> element so that they appear using a special set of style rules.

The <div> element is used to group block-level elements together:
<div id="menu" align="middle" >
<a href="/index.htm">HOME</a>
<a href="/about/contact_us.htm">CONTACT</a>
<a href="/about/index.htm">ABOUT</a>
</dev>
<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</dev>


This will produce following result:
HOME CONTACT ABOUT
Content Articles
Actual content goes here.....

The <span> element, on the other hand, can be used to group inline elements only. So, if you had a part of a sentence or paragraph you wanted to group together you could use the <span> element.

<div><p>This is the example of <span style="color: green">span tag</span> and the <span style="color: purple">div tag</span> along with CSS</p></div>

This will produce following result:
This is the example of span tag and the div tag along with CSS