CODEWITHSUNDEEP
htmlcssxhtml
Jitendra Vyas
Jitendra Vyas

Reputation: 152677

Is it really best to make site without using <div>, using semantic tags only?

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?

Upvotes: 4

Views: 2149

Answers (3)

Residuum
Residuum

Reputation: 12064

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.

Upvotes: 1

Pekka
Pekka

Reputation: 449435

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.

Upvotes: 9

Emily
Emily

Reputation: 10088

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. :)

Upvotes: 3

Related Questions