tags:

views:

130

answers:

3

I found this on net in google search

and see article here: http://www.thatcssguy.com/limit-your-divs/

See his final layout here: http://www.nodivs.com/

Some quotes from article

1

When I limited the use of my divs all the major browser including both IE6 and IE7 would render the sites nearly perfectly. Or with very little fixes needed.

2

it’s magic but proves divs nor tables are necessary for layout

Should we try to make sites like this?

+9  A: 

The article makes a number of good points on how to avoid "divitis", i.e. the usage of div elements where there would be a semantically more fitting element. But this:

When I limited the use of my divs all the major browser including both IE6 and IE7 would render the sites nearly perfectly. Or with very little fixes needed.

is total bullcrap. DIVs are perfectly valid container elements and make sense in a lot of situations. Only where there is a semantically more suitable element (e.g. ul in an unordered list like a menu, h1 h2 h3 for headings, ol for ordered lists) is it wrong to use a div, as it is usually wrong to use a table for layout.

What the author of the site you mention does is blatantly misusing other elements like dl (definition lists) as surrogates of div elements, something that is as idiotic as misusing divs as surrogates for ul ol etc. Look at the W3C's definition of ul, ol, and dl lists and consider for yourself whether those elements are supposed to do layout tasks like the author does use them for.

As far as I can see, the insinuation that not using divs somehow makes sites render better cross-browser is utter humbug. Correct me if I'm wrong, but I can not think of one single instance where this holds true.

Pekka
but it's not necessary to add <div. if other semantic tag + css can do same thing
metal-gear-solid
@jitendra yes and even more, it's *wrong* to use divs when there is better semantic tag for it. But abandoning `<div>` elements for what they are right for is as stupid as abandoning `<table>` elements for rendering tabular data (which is their purpose).
Pekka
I agree with you. I'm sharing this artice because i found this and looks like interesting
metal-gear-solid
+1 for the undercurrent of anger in this answer :-) @jitendra: semantic tags have a specific purpose, using them for a different purpose than intended could cause problems with accessibility (screen readers and the like).
Andy E
@jitendra this is a great question, and pointing at interesting sites is always a good thing. My anger is directed only at the author of the article :)
Pekka
@Pekka - ok thanks. What u will say on his "divless Header" see article
metal-gear-solid
@jitendra hmmm. I would say that's not so terrible and can be done. Still, strictly speaking, it is abusing the `<h1>` tag IMO - it should contain textual or image information relevant to a Heading of the level 1 only, and no phone numbers and background images. (I'm not really zealous about all this, I've put all kinds of stuff into a H1 myself. But if somebody *actively propagates* a working method like this, that can't stand.)
Pekka
+1  A: 

You quote from the article, but in the comments the author himself states:

Not using DIVs tends to make sites render more reliably cross-browsers. You’re removing an element in the code that could be the source of a browser not displaying correctly. Remove the variables and you’ll see less problems.

So: switching divs for headings does not change the reliability of rendering (the article implies that, but the author does not mean that), but removing unnecessary nested divs elements help that, but as a good HTML layouter you should always do that ;)

Just keep in mind that you should prevent Divitis whenever possible, and making use of semantically correct markup helps your SEO efforts and accessability and karma and stuff.

EDIT:

OK, as all know, divitis is bad. Let's have a look at the article's markup:

<body>
    <div id="page">
        <div id="header">
            <h1 id=logo">(some stuff)</h1>
            <ul id="nav1">navi</ul>
        </div>
        <div id="columns">
            (Content)
        </div>
        <div class="box6">
             <div class="top"></div>
             <div class="spacer">                 
                 <div class="col3">
                 </div>
                 <div class="col3">
                 </div>
                 <div class="col3 last">
                 </div>
                 <br class="fix">
             </div>
             <div class="bot"></div>
         </div>

        <div id="footer">
            (Footer Content)
        </div>
    </div>
    (Script tags)
</body>

Let's see: <div id="page"> to center the page with margin: 0 auto;. Apply this style to <body> and you can remove one div. The whole content of the <div class="box6"> is not exactly clean of divs, and absolutely unnecessary. And for the rest: See for yourself.

Residuum
+1 Good points Residuum. The way you put it, it is totally correct of course. But if I look at the outlandish elements the author is using in his example to avoid `div` s, I can't help but shake my head. Instead of promoting cleaner HTML, the article is fit to incite a new "let's get rid of tag `xyz`" movemement without understanding what's really behind it.
Pekka
@Pekka: agreed. Looking at the semantics of the article page itself, I see a clear case of "do as I say, not as I do" as well.
Residuum
+3  A: 

He has a point as far as using styles on the elements instead of automatically wrapping them in divs:

<ul class="navList">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

instead of

<div class="navList">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
</div>

He lost me though when he used absolute positioning to overlay a h1 with an h2 to create his header.

Maintainability is just as important as clean code. When I see a div named "header" I know what that is as opposed to this:

   <h1 class="border"><a href="#" id="logo">Welcome to NoDivs.com</a></h1>

    <h2 class="border">Contact NoDivs.com <span>1-888-1485</span></h2>

And he doesn't practice what he preach. Anybody who uses a "spacer" div to add padding between divs shouldn't talk about the dangers of divitis. :)

Emily