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.
Always surprised how often this question comes up myself…
Of course you can also turn any element into a block element with style=”display: block” and a into an inline element with style=”display: inline” – just to complicate things a little. Unusual with and but frequently done with images.
That’s one of the reasons that I read your blog Rick, you are also one of those guys how “has to know how things work” !
Good point!
It is important to know the differences between these two tags.
DIV should always be used as the parent; and SPAN for the smallest and/or nested elements within the parent.
Thanks1
Just when you think you’ve got Divs and spans down pat, html5 comes along and adds section, aside, and article to the mix.