I admit, I have been guilty of this. Once you get started doing CSS layouts, it's easy to get sucked into the use of DIV tags for everything. At one point, I was even working on a site where every paragraph was surrounded by <div class="para">...</div>. That's a bit excessive. But it's completely understandable. When you're first learning CSS layouts, it's hard enough to understand how to get the page to look the way you want it to look without worrying about whether or not you're using semantic markup to create your Web page. And besides, nearly every example written uses the div tag to demonstrate how to put up CSS layouts, why should you be any different?
Start Thinking Semantically
When you're trying to set up a Web page where the styles are separated from the content, you should also be trying to markup your content so that it defines the content that is contained in it. The way you do this is by thinking about the structure of your page and what the elements you're placing on the page are rather than just what they're going to look like. For example, this About Web page has some standard elements in the design.
- At the top is the breadcrumb trail
- The About logo
- A search bar/box
- Navigation on the left (divided into sub-sections)
- Navigation in two columns on the right
- A title, sub-title, and author information
- Body content in the middle of the page
- Ads in various locations on the page
Now it would be easy to simply mark up these sections as divs and then give them all unique ids and be done with it. But semantically, these are not all just divisions of the content, in fact, in many cases they have very specific roles on the page.
- The breadcrumb
Arguably, this is not the most important part of the page, but it still is a header of sorts. I would mark this up as an <h5> or <h6> to state to the browser that it's a header, but it's not a very important one.
Using CSS we can style these tags to look however we want them to look. Don't think of <h1> as "big, bold, and ugly" - think of it as "the most important header on the page". So an h5 header is saying "this is a fairly low-importance header on the page", not "small and bold".
- The About logo
You have a choice here. If you think that this logo should be given prominence on the page, then use an <h1> header on the image. If you just want it to be an image - then use an <img> tag and put an id on it that indicates it's the logo.
- The search bar/box
Another header - probably <h4>. It's more important than the breadcrumb, but not really high priority.
- Navigation - left or right
Navigation is 99.99% of the time a list of links. So, if you're using a list for your navigation, then use a list for your markup. The About lists tend to have a header item at the top ("Essentials" on the left or "More About the DIV Tag" on the right). I would call these out with a header tag around the list item:
<li><h4>Essentials</h4></li>Then you can use IDs descendant selectors to style the specific areas (like the left and right headers).
- Title, sub-title, and author information
These are clearly headers. Even the image in the author information can be styled using headers - you don't even need an img tag if you don't want to use one.
- Body content
Here's our first div. But be sure to use paragraph tags for the paragraphs inside it and header tags for headers, etc.
These can also be divs, but many sites are using iframes to place their ads. If you do this, you don't need to surround it with a div, just style the iframe.
Use Divs for Divisions
I'm, by no means, advocating that we stop using divs. Let's just start using them where we need to use them, and use the other tags we have available when they should be used. Divs are meant to be logical divisions of content on the page.
In the above example, there may be div tags that I didn't mention to help lay out the page. But use them only once you've used up your semantic markup.