The Difference Between <div> and <span>

Essentially, <div> is block-level, with an implied line break, and <span> is inline, meaning it can be contained in a block inline with other block content.

This text is inside a <div> block with the "background-color: pink;" style applied. Notice how the color runs completely across the page.

Now, compare this text, which is a <span> inside a <p> block. The same style is applied to the <span> but the colors only apply to the inline text.

One good way to think about these tags, at least when used with CSS classes, is as a cheap method of adding elements to HTML. To use an example from this site, I have defined an "example" CSS class that I use to denote content that gives a real example of a particular topic. This content is rendered inside an inset border over a light yellow background (see above). While it would be nice to have an <example> tag to denote this content, similar to the way the <strong> or <em> tags work, it's not terribly practical just yet. The next best thing is to use <div class="example"> ... </div> in exactly the same way that I would use an <example> tag if it existed.

Block and inline elements have other differences as well, but I will refer the reader to the W3C's HTML 4.01 specification for those nuances as well as other nifty information about the tags themselves.