Use less DIV, use more HTML
Posted on 26 March 2007 (09:49 PM)
I always try to write my HTML as clean as possible. This means, among other things, the following:
- Always try and find the most semantic elements and attributes for the job
- Don't use too many redundant
divelements, none if possible
The latter item will be the subject of this article. I've been playing around with using the HTML element in my CSS rules lately, and it turns out to be one helluva flexible element. We really have to start using BODY and HTML as the block-level elements they are!
Most developers that know what they're doing won't litter their documents with unnecessary divisions.
There's one div that's always returning in most CSS-based layouts though: the "container" div.
Get rid of your container!
The container is used for a lot of different purposes. It makes it easy to center content for example. Instead of doing...
h1,h2,p,ul,ol, [...] { margin: 0 auto; }- Download this code: /code/less_div_more_html1.txt
...you can do...
#container { width: 90%; margin: 0 auto; }- Download this code: /code/less_div_more_html2.txt
The thing is, all your elements are already contained in a "container" element: body. And that body is also contained within a "container" element: HTML!
So, from this moment on, whenever you want to center content, you don't need to include a container division, just copy the CSS in this example.
It's cleaner, it has less code, and therefore; less clutter and lower maintenance.
The above works because, just like h4, p, ol and pre, the HTML element is just a block-level element. That means you can style it in any way you would style a simple paragraph.
Adding images
There's more: to me, adding background-images is by far the easiest if you add them to the body element. An image placed at background-position: bottom; will always be at the bottom of the page, for example.
But if you think about it; if you want an image to appear at the bottom of the visual stacking order, why do you never see anyone do this:
html { background: #fff url(my_background.gif) top left no-repeat; }- Download this code: /code/less_div_more_html3.txt
HTML is the lowest possible element in the stacking order there is, so it makes sense, doesn't it?
It works in exactly the same way it would as if you add the image to the body element. In fact, taking this in consideration; a common HTML document provides two of those nice, omnipresent style hooks for adding imagery!
This example shows this interesting effect. The repeating clouds would usually be attached to the body, leaving the grassy footer to be attached to a redundant div element. There's no need for that! Not at all! Use HTML!
Applying existing ideas
I've prepared another example in which I use Dan Cederholm's excellent Faux Columns technique. Normally, I would add another div to encapsulate the columns, and attach the faux column image to that element, but with my new-found respect for the HTML element, I can now add the faux column to the body, leaving HTML wide open for a "regular" background-image.
Browser support
As with every new CSS hocus-pocus, it's interesting to know in which browser it goes wrong. I've tested in the following browsers...
- Firefox 2
- Safari
- Camino
- Opera 9
- Internet Explorer 6
- Internet Explorer 7
...and I'm actually just baffled. It works. Everywhere. I've found no bugs or irregularities whatsoever.
If you love HTML so much, why don't you marry it?
I've got nothing against the occasional div. Me and the divisions get along just fine. I just think that every now and again, someone should emphasize the importance of semantic HTML. Lots of developers who convert from table-based layouts to div-based layouts actually think the div element is some kind of replacement for tables and litter their documents with it, using it to contain all sorts of content. I merely want to point out that a division should only be used when you need it, not as a replacement for more semantic elements, and certainly not by default.
Filed under HTML and CSS
- ← previous article: Original new CAPTCHA
- → next article: Use less DIV, use more HTML - Part Deux
Comments:
Nice job done on this... but what will happen when you don't use the body element for instance? While it is not needed to markup your text valid...
To be honest, I'm not sure what'll happen. My guess is, taking my experiments into account, that you just have one less element to attach content to.
It probably acts the same as if you would remove any other block-level element from your document, and background-images and the likes should be attached to the HTML element.
this comment has been quoted by Harmen Janssen
Let me rectify that. I've been thinking; omitting HTML or BODY does not mean they are not available in the document, of course.
The user agent will insert a missing HTML, BODY and/or HEAD element if I'm not mistaken.
It that case, I have to run some more tests to see what happens, but my first guess is the experiments will still work, since eventually, the elements addressed in the CSS file are available in the rendered document.
Hi Harmen,
that was actually a really interesting post. I too must admit that I belong to the webdesigners that rather use a div than thinking about the semantic correct element, although I always try to achieve my desired effects/designs with as less divs as possible. My newer designs already use <hx>-tags which is at least a small improvement.
Sven
A very nifty little trick.
Did you also try this in IE 5 BTW?
I didn't before, actually, but I just checked it out for you (IE 5.01), and the examples above do not work, unfortunately.