Markup and css: why so many div's before the actual content?

Question

So, I practiced HTML/CSS, and wanted to build a simple sub-header, exactly the same as seen on http://www.phppennyauctiondemo.com/ (div id="sub-header", the part with categories).

And I did it like this:

<div id="sub-header">
  <div class="sub-mid">
  <ul id="nav">
    <li><a href="">All items (1)</a></li>
    <li><a href="">Shops and Coupons</a></li>
    <li><a href="">Kids toys</a></li>
    &nbsp;
  </ul>
  </div>
</div>

#sub-header
{
    background: url("/images/front_layout/header_sub_bg.gif") repeat-x;
    height: 31px;
    border-top:1px solid #708044;
    border-bottom:1px solid #d4dde1;
}

#sub-header .sub-mid
{
    width: 950px;
    margin: 0 auto;
}
#nav
{
    padding: 4px 0;
}

#nav li
{
    padding: 0 3px;
    border-right: 1px solid #B1C0C5;
    float: left;
}
#nav li a
{
    padding: 3px 8px;
    color: #607E87;
    text-shadow: 1px 1px 0 #FFFFFF;
    height:15px;
    display: block;
}

And this looks exactly the same as their sub-header (in firefox).

But when I took a look at their markup and CSS, I saw way much more div's before the actual content, and much more CSS then I used:

<div id="sub-header" class="clearfix">

            <div  align="center">

                <div style="width:950px; text-align:left;">

                        <div id="select-categories">

        <ul id="nav">  UL after 4 divs... </ul>

Since I'm not a professional web developer, and I assume professionals built that page - my question is why did they use so much div's that don't do anything?

Is there something I don't know about CSS/HTML?

Answer 1

BEFORE READING THIS ANSWER: understand it is not my choice but that of the employers to use the methods explained below, I do not recommend the methods explained below nor do I like them but sometimes we do what we have to do :-(

I would like to give you an example, I recently wrote a custom module on a custom application using VORK (a PHP framwork) and JavaScript. One of the specifications I had was to use existing CSS files, I could not add my own nor could I edit existing CSS. This was not easy.

The original designer specified something like the following in the CSS

ul {
     margin-top:250px;
     margin-left:50px;
     background:#F00;
}
li{ 
     margin:20px;
     padding:10px;
     display:block;
}
li.priority_high {
     background: red;
}

As you will notice the original designer specified ul and li without any further class specification - naughty designer, this meant I could not use any list items for the requested navigation. To achieve this I had to use a series of DIV tags, a main container and then 1 for each "level" like this

<DIV id="wrapper"> 
     <DIV id="level1">home | PRODUCTS | about us | contact us</DIV>
     <DIV id="level2">product 1 : product 2 : PRODUCT 3 : product 4</DIV>
     <DIV id="level3">OVERVIEW - features - benefits - tech specs - purchase</DIV>
</DIV>

In addition to this, to meet the specifications of the client I also needed to wrap each navigation item in a separate DIV, so for example

<DIV id="level1">
     <DIV id="home">home</DIV><DIV id="products">PRODUCTS</DIV><DIV id="about">about us</DIV><DIV id="contact">contact us</DIV>
</DIV>

The problem is the company didn't and still doesn't appreciate the degree of bad practice their application employs, for example I couldn't use the CSS files but I could use the style property for custom styling - stoooooopid! But you know what, I had to do it.

I know better, their new in-house web designer knows better but sometimes when you're paid REALLY good money you do what you need to do.

In saying all of this, I have put in a proposal to re-develop their application to employ best practices as they are using a fair bit of depreciated PHP as well as their core application has a number of security flaws so adding best practice design with a larger process may actually work.

Anyway, I hope this example helps you with your answer.

Answer 2

Although that site is not a great example of current professional web development techniques, many divs spans and other semantic elements may be used and never styled.

Many times, extra markup will be used for modularity. Many programmers know about design patterns such as the Singleton or Observer patterns. In HTML there are a number of structural patterns that are often used to achieve various different effects.

For instance, if I wanted to create a website's nav area, I might mark it up as:

<nav>
 <a href="foo">foo</a>
 <a href="bar">bar</a>
 <a href="baz">baz</a>
</nav>

Although this format may work great for one style, it will be more difficult to style when the client asks for drop-down menus. To make this more modular, I typically write my nav as:

<nav>
 <div>
  <ul>
   <li>
    <a href="foo">foo</a>
   </li>
   <li>
    <a href="bar">bar</a>
   </li>
   <li>
    <a href="baz">baz</a>
   </li>
  </ul>
 </div>
</nav>

The markup is now a lot larger, the links are contained in an unordered list, which allows the designer to do a lot of fancy effects. Drop down menus can be created by adding more uls to lis. There's an extra div which is useful for special positioning. Additional uls can be added after the first one if multiple menus are wanted.

Answer 3

Sites with excessive markup in this way are often generated using frameworks such as Drupal or Joomla.

It is common for sites to have several layers of elements because (1) the template will need elements that act as wrappers for sections of the page, but also the framework may generate a <div> for each section as well; (2) the framework will create another layer or two for each of the blocks of content that appear in the section, the module may also add its own layer, and the site developer may add his own too before finally getting to the actual content itself.

Often many of these layers could have been dispensed with, but it's not always easy. The same code has to be run for simple sections with a single bit of content and for complex sections with multiple content blocks. Plus the same code has to run on many different sites, all with radically different layouts and designs.

Answer 4

Using that many divs is a disease we call 'divitis'. It comes from the sickness that makes a developer forget he can frequently use elements such as ul, p, and so on as they are for positioning and styling without the need to wrap them in a div. Frequently, you can remove such extra div elements without harm other than probably needing to rewrite the CSS to account for that.

No vaccine has been found and only time and experience helps.

Answer 5

Since CSS2 is pretty limited, we have to resort to using tricks and hacks to get certain.. pretty things to work, such as border-radius.

This is probably the same case. Also, in many scenarios, wrapper divs are used to groups things together to make the code more readable. They could also be used in javascript manipulations that may not pop out at you at the source, as they're being (actively) transformed when the page is loaded (to see them, use the dev console in your browser.)

For this example, it's badly done as it's using deprecated code, as well as some bad practise (style in html, although acceptable in a production environment, as the html code maybe generated according to the scenerio)

Answer 6

While the site may have been designed by professionals, there are many techniques that age very badly.

<div align="center">

As an example, the align attribute was deprecated from HTML 4.01 in preference of using CSS for style, not HTML attributes.

Therefore, beware of examples such as this. Less mark-up is better. Mark-up that offers semantic meaning is better. Using CSS for styling, not HTML for styling is better.