Using builder tools like FrontPage or ASP.NET WebForms has permitted web developers the “luxury” of avoiding learning the details of some parts of the standard web application stack (like HTML).

Like many types of syntax, HTML has it’s nuances and one that is often missed by folks learning HTML is the difference between the <DIV> tag and the <SPAN> tag.

Probably the reason that folks find this confusing is the haphazard use of these tags in the markup that they review.

In fact the differences are pretty simple and are clearly defined in the HTML specification.

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

Pretty simple when you think about it.

<DIV> renders it’s contents as a block and <SPAN> renders it’s content “in-line”.

I’ve found remembering this useful as I concentrate on avoiding tables for any layout tasks.