If you're new here, you may want to subscribe to my RSS feed. So that you can read the latest updates about Web2.0 tools, Making Money Online, Tips in SEO, Ajax and many more. Thanks for visiting ProgramimiCOM!

HTML is all about applying meaning to content. Whereas most HTML tags apply meaning (p makes a paragraph, h1 makes a heading etc.), the span and div tags apply no meaning at all, which might sound about as useful as a foam hammer, but they are actually used quite extensively in conjunction with CSS.

They are used to group a chunk of HTML and hook some information on to that chunk, most commonly with the attributes class and id to associate the element with a class or id CSS selector.

The difference between span and div is that a span element is in-line and usually used for a small chunk of in-line HTML whereas a div (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.

<div id=“scissors”>
	<p>This is <span class=“paper”>crazy</span></p>
</div> 

div and especially span shouldn’t actually be used that often. Whenever there is a sensible alternative that should be used instead. For example, if you want to emphasize the word ‘crazy’ and the class ‘paper’ is bold, then the code might look like this:

<div id=“scissors”>
	<p>This is <strong class=“paper”>crazy</strong></p>
</div>

If you haven’t got a clue about classes and ID’s yet, don’t worry, they’re all explained in the CSS Intermediate Tutorial. All you need to remember is that span and div are ‘meaningless’ tags.