All geek questions in one place

Is it really better to make a site without using a <div> using only semantic tags?

I found this on the web in google search

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

Check out his final layout here: http://www.nodivs.com/

Some quotes from the article

1

When I limited the use of my divs to the entire main browser, including both IE6 and IE7, the sites would be almost perfect. Or with very small corrections needed.

2

its magic but proves divs or tables are needed for layout

Should we try to create such sites?

+4
source share
3 answers

The article contains a number of good points on how to avoid "divitis", that is, the use of div elements, where there will be a semantically more appropriate element. But this:

When I limited the use of my divs, all major browsers, including IE6 and IE7, would render sites almost perfectly. Or with very small corrections.

- full wrapper. DIVs are perfectly valid container elements and make sense in many situations. Only where there is a semantically more appropriate element (for example, ul in an unordered list, such as a menu, h1 h2 h3 for headers, ol for ordered lists), is it wrong to use div , since it is usually wrong to use table for layout.

The fact that the author of the site you are mentioning explicitly uses the wrong elements, such as dl (definition lists) as surrogates for div elements, which is just as idiotic as misusing div as surrogates for ul ol , etc. Take a look at the W3C definition for ul, ol, and dl lists and think about whether elements should perform mock tasks, as the author does for.

As far as I can see, insinuations that do not use a div somehow render sites rendering a better cross browser are a complete hoax. Correct me if I am wrong, but I can not imagine a single instance where this is true.

+9
source

It makes sense to use styles for elements, rather than automatically wrapping them in a div:

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

instead

 <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 h1 with h2 to create his headline.

Maintaining health is just as important as clean code. When I see a div called "header", I know what it is:

  <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 does not practice what he preaches. Anyone who uses the spacer to add padding between divs should not talk about the dangers of devit. :)

+3
source

You are quoting the article, but in the comments the author himself states:

Do not use DIVs, as a rule, makes sites more reliable cross-browsers. You are deleting an element in the code, which may be the source of a browser that does not display correctly. Remove the variables and you will see fewer problems.

So: switching div for headers does not change the reliability of rendering (the article assumes that, but the author doesn’t mean it), but removing unnecessary nested div elements helps, but as a good HTML placeholder, you should always do that;)

Just keep in mind that you should prevent Divitis whenever possible, and using semantically correct markup helps your search and availability efforts and karma and more.

EDIT:

OK, as you know, divides the bad. Let's look at the layout of the article:

 <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 using margin: 0 auto; . Apply this style to <body> and you can remove one div. All content <div class="box6"> not completely clean from the div and is completely unnecessary. And for the rest: see for yourself.

+1
source

Source: https://habr.com/ru/post/1303446/

More articles:


All Articles