XHTML: there is such a thing as too many <div>!

Layout with inbricated tables is obsolete, this is no secret nor revolution!

Using <div> layers associated with CSS is the new integration and layout format for all documents.

This new "fashion" brings it wave of fanatism and most of all incomprehension and wrong usage. To sum it up, people are thinking "all right! I can get rid of all my tables and use <div> instead!".
Then they have as many div> in their code as they had cells in their tabs, and they think that layers and CSS are no improvement at all.

This is what happens in many cases, <div> are overused, there are too many imbrications and sub divisions just to say "oh, I'm using <div> ...".

The downside? There are many of them, but the most obvious are that using too many <div> will create difficulties for updating your site, they will make your code too heavy and it will make your code a total mumbo-jumbo for others (friends won't be able to help you if you need them to look into your code for you...) and most of all, after a while you won't know the way out of your own code!

Here is an exmaple of what I mean: 

<div class="gauche">
<div class="menu">
<ul>
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 4</a></li>
</ul>
</div>
</div>

The menu (block <ul>) is imbricated within a "menu" div , which is imbricated within a "left" div ... both completely unecessary!
For this example, here is how it could have been written by using the only important tag in this case: <ul>, since it is a block tag as any other: 

<ul class="menu gauche">
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 4</a></li>
</ul>

The whole idea is to realize that there are other tags than <div> that can be used to create blocks, such as <p>, <ul>, <li>, <h1>...<h6>, <blockquote>... (see this tutorial)

So, to write a clean code and to save your tags, it is necessary to use the right one at the right place.

This is a Semantics principle, <p> is used to structure paragraphs, <div> is used to determine larger zones within the document, <h1> ... <h6> are for the levels of titles, <ul> is for lists and menus, and so on and so forth.

Avoid using <div> everywhere, your code will be easier to read and much lighter in the end. Get rid os unecessary tags, learn not to over use <div>!

Print article

Raphaël GOETTER
www.alsacreations.com