What is it for?
W3C specification is fairly clear about what the purpose of <div> tag is.
The full quote from W3C HTML specification is:
The
DIVandSPANelements, 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.
Some on-line references say that <div> tag is ‘semantically neutral‘, but I would strongly disagree with this statement. <div> is essentially there to be used for denoting sections of HTML documents.
<div> tag stands for ‘division’ on page, hence it has a semantic meaning to it which can be infered simply from its name.
Appropriate use
<div>, coupled with and id or a class attributes, is semantically very strong statement which gives a meaningful top level structure to any HTML document.
Structure and top level semantics of HTML pages are very important parts of creating web sites of any size these days.
This aspect of web pages not only helps organise the application for end users, but also helps developers organise the application from the developer perspective, aiding overall usability of software (it is commonly forgotten that usability does not only apply to application interfaces, but also to the back end, as well as general day-to-day life).
We need to think about usability all the time, as we are developing products which need to be maintained and upgraded (scaled) in future in the most meaningful (i.e. semantic) way all-round and not just from the interface point of view.
Web developers who know what they are doing, understand that <div> tag is a very powerful tool in web development and create ‘objects’ on screen which are completely encapsulated within their own <div> tags with a relevant id which uniquely identifies that ‘object’ within any page.
Inappropriate use
How ‘granular’ should we go with <div> tag and what is the smallest amount of code we could surround with a <div>?
I tend to implement standards as strictly as possible, since I have found (over years) that approach to be the wisest approach (least error prone and most scalable).
‘Sections’ or ‘components’ on a page should contain at least 3 tags in order to be considered candidates for being surrounded by <div> tag. (I am sure someone will be able to come up with examples of where this does not stand).
It is important to avoid divitis in order to keep interfaces lean, fast performing and avoid code bloat (and therefore decrease maintainability of the application).
There are many examples within which a <span> will work as well as <div>, but semantically will not be as ’strong’ as <div> and the code will still work, validate and make more sense.
There are also frequent circumstances within which other elements can be treated as a <div> and therefore use of <div> avoided, while achieving the same results.
Great examples of this situation are usually presented wherever ordered or unordered lists are used, in which cases <li> can (in most circumstances) act as a <div>.
A look into future
An HTML construct such as
<div id="news" class="component">Component content goes here<div>
means a lot and creates a very good structure on a modern web page.
Future automated semantic tools could potentially understand these conventions and be able to ‘pick up’ complete components from pages and create mash-ups which can work with content directly pulled in from any web site.
Treating user interface as an API and standardising HTML mark-up (in a similar way in which Microformats community does it) can enable any portion of any interface to become reusable anywhere.
Name spacing CSS files according to the structure of the <div> component based mark-up also leads to better CSS development, leading towards faster performing and much more scalable and easily re-skinable interfaces and generally smaller and leaner implementations.
Example
Good example of using <div> tag and utilising its full semantic power.
Written by Jason Grant, BSc, MSc on 6th June 2008
I would beg to differ with your “Appropriate Use of Divs” characterization. A “span” and “div” have no innate semantic meaning besides the logical grouping of the content. So developers are free to use them according. If you want to use as you described fine. However, that is not Gospel. The reference included in your post (http://www.w3.org/TR/REC-html40/struct/global.html#edef-DIV) states: “… authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.” Refer to http://en.wikipedia.org/wiki/Span_and_div which also mirrors this usage.
Keith on 2nd July@Keith < div >s are very semantic when used with a class. This is the reason why MicroFormats work. < span >s are different as they are not block level, so you cannot wrap inside of them < h2 >s and so on, hence their purpose and meaning ends up being quite different to < div >s. Yes you can style any element in HTML however you want with CSS, but that does not help anyone with anything, especially when we are talking about semantics. Hope this helps.
Jason Grant on 2nd July