Once you get started doing CSS layouts, it is easy to get into the habit of using DIV tags for everything. Even in some websites, every paragraph is surrounded by <*div class="para">…

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 you should be any different.

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, a typical Web page has some standard elements in the design such as the breadcrumb trail at the top, the site 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 and 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. Arguably, the breadcrumb is not the most important part of the page, but it still is a header of sorts. You can 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 you 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. You have a choice here. If you think that the 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.

Another header is needed for search bar/box, probably <*h4>. It’s more important than the breadcrumb, but not really high priority. If you’re using a list for your navigation, then use a list for your markup. The lists tend to have a header item at the top. Then you can use IDs of descendant selectors to style the specific areas (like the left and right headers).

The title, sub-title and author information 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. In body content, you have your first div. But be sure to use paragraph tags for the paragraphs inside it and header tags for headers, etc. Advertisements 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.

In the end, it does not mean that we’ll 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.

Tags: Div Tag Substitute in CSS