Avoiding div soup
Written June 5, 2009. 8 comments.
When I first made the transition from tables to divs for layout (yeah, I was that guy once upon a time!), I clearly remember being frustrated at how difficult it was to achieve my goals without over using the div tag. My main problem aside from still finding my CSS feet was I had completely ignored what the div tag was intended for.
I was using <div> as if it were the holy grail of achieving all my design goals. These days most of us know better but I will concede that until HTML5 and CSS 3 are commonplace we sometimes have to use a div for the ‘wrong’ purpose. When I say ‘wrong’ purpose I mean there are times when we have to break the rules because of cross browser issues, and I’m OK with that for now.
Div, if you had forgotten, is short for division, and as the name implies is meant to be used to divide your mark-up into appropriate sections, such as the header, content, footer etc. Aside from those, your goal should be to reduce your reliance on div’s as much as possible and make use of existing HTML tags.
The following part of this article will show some of the more common mistakes I’ve seen some designers do using divs (including yours truly) along with appropriate solutions.
The navigation
How it’s sometimes done
<div class="nav">
<ul>
<li><a href="">First item</a>
<li><a href="">Second item</a>
<li><a href="">Third item</a>
</ul>
</div>Div-less solution
<ul class="nav">
<li><a href="">First item</a>
<li><a href="">Second item</a>
<li><a href="">Third item</a>
</ul>See what I did there? The only reason you contained it within a div in the first place was so you could position and style it. Why not position and style the <ul> instead?
The logo
How it’s sometimes done
<div id="logo">
<img src="mylogo.jpg" alt="CompuGlobalHyperMegaNet" />
</div>Div-less solution
<h1 id="logo">
CompuGlobalHyperMegaNet
</h1>…with some CSS…
#logo {
width:200px;
height:100px;
background-image:url(mylogo.jpg);
text-indent:-9999em;
}The width and height are required to be the size of mylogo.jpg otherwise the div will simply collapse on itself and you won’t see the background image. The text-indent will move the actual text off-screen so it’s not visible on top of your logo.
The headings
How it’s sometimes done
<div class="larger_header">
Welcome to CompuGlobalHyperMegaNet
</div>Div-less solution
<h1>
Welcome to CompuGlobalHyperMegaNet
</h1>That particular one is rare but I’ve seen it enough times in the past to justify mentioning it here.
Forms
How it’s sometimes done
<div id="theform">
<div>Personal Information</div>
<form action="send.php" method="post">
<div>Name:</div>
<input type="text" id="name">
<div>Age:</div><input type="text" id="age">
<div><input type="submit" value="Submit" name="Submit" />
</div>
</form>
</div>Div-less solution
<form action="send.php" method="post">
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name: </label> <input type="text" id="name">
<label for="age">Age: </label> <input type="text" id="age">
<input type="submit" value="Submit" name="Submit" />
</fieldset>
</form>Conclusion
There are plenty of HTML tags at your disposal and the chances are you can accomplish your design goal by taking advantage of them. Try to limit divs to what they were intended for but as mentioned earlier there may be times when you just have to use an empty div. Those days are numbered but for now we can only do the best we can.
Start of pageWho is That Web Guy?
Michael is a veteran web designer / developer / usability evangelist, practitioner of W3C guidelines, and currently head of the web dev unit at Stormbox, a branding and creative communications agency located in Perth, Western Australia.
Anyway, I just wanted to say that I would always choose Transitional before Strict, and now you got me thinking.
Not sure why your comment cut out – unless you tried to insert some code in which it would have been stripped.
This is a great post and gives some good examples and alternatives to simply replacing table-code with divs. :)
I have one or two questions though, as there’s some things I mull over, and it’s good to have another opinion :)
Navigation
I understand what you’re saying, although I think a div, as a division, for me looks cleaner around the ul, if I have divs for header, content, etc, although I understand it’s pretty redundant, unless needed as a wrapper, to allow for styling, which is sometimes also required.
The Logo
Why would a [p] be better than a [div]? A logo really isn’t a paragraph of text either. I usually make it an H1, tbh. I see the need for a logical tag as opposed to a generic one though, just not sure the [p] tag is the best choice?
Headings
I fully agree!! [div] or [span] or even [p] for that matter is simply bad use of html. Headings should be defined as such. BTW, what do you use for slogans or buylines? I usually go with a [p] but again, it isn’t a paragraph of text. A span maybe be better, but it’s predominantly an inline tag, and so it feels strange having it float amongst block tags like H1 or UL (presuming logo and nav are in the header)
Forms
I agree with you here too :D – but what are your thoughts on keeping the label and input together? – often one needs a wrapper tag around the label and input, and although I tend to go with the [p] tag, as noted above, I feel it’s not really the right tag for the job either. I’ve considered using a [div] for this, and on occassion I have – as in theory, it’s less specific than the [p] tag. Also, ideally, the form should have a [fieldset] surrounding the logical divisions within the form.
Just wondering ‘out loud’ really, as it’s things I’ve been pondering for a while, and as you brought it up, thought I’d mention it :)