is the div ids or div classes in layout, which is the best

**venoogopal** · Apr 22, 2008 03:12

Hi All,

In layout whichever is best the divs with ids or divs with classes, I often use all divs in my markup with ids and classes is for text styling, links styling etc, is it good habit or not.

do any one clarify my doubt

thanks all

**JimmyP** · Apr 22, 2008 03:23

IDs are unique identifiers of elements. You cannot use the same ID for more than one element. Classes however can be applied to multiple elements.

I use classes when I know there will be more than one element styled the same way. For example if I have several DIVs which all need to be styled the same way then I would give them all a single class.

So a typical layout of mine would look something like this:

Code HTML4Strict:

<body>
<div id="wrapper">
    <div id="header">
        <h1>head</h1>
    </div>
    <ul id="nav">
        <li id="home"><a href="home.html" title="home">link</a></li>
        <li id="about"><a href="about.html" title="about">link</a></li>
        <li id="shop"><a href="shop.html" title="shop">link</a></li>
        <li id="terms"><a href="terms.html" title="terms">link</a></li>
        <li id="contact"><a href="contact.html" title="contact">link</a></li>
        <li id="links"><a href="links.html" title="links">link</a></li>
    </ul>
    <div id="content">
        <div class="news-unit" id="1">INFO</div>
        <div class="news-unit" id="2">INFO</div>
        <div class="news-unit" id="3">INFO</div>
        <div class="news-unit" id="4">INFO</div>
        <div class="news-unit" id="5">INFO</div>
        <div class="news-unit" id="6">INFO</div>
        <div class="news-unit" id="7">INFO</div>
        <div class="news-unit" id="8">INFO</div>
    </div>
</div>
</body>

I have used IDs for all elements which will only exist once and I have used classes for the news-items since there will be more than one. I've also added unique IDs to the news-items so that if I need to target one in CSS it's relatively easy.

**feketegy** · Apr 22, 2008 03:25

Based on the W3C Standards you use IDs on a single element no matter if it is a div, span, etc.

And you use classes on a group of elements where you can apply the same style on all of them.

**AutisticCuckoo** · Apr 22, 2008 03:38

@venoogopal: As a rule of thumb: use IDs for specific page elements that occur on all (or most) pages, such as the page header/footer, navigation, sidebar, login form, search form, etc.

Use classes for elements that share some form of common traits, and make sure to name the classes so that they reflect the meaning, not the appearance. Examples can be 'warning', 'product', 'user', etc.

@JimmyP: The IDs in your example are invalid. An ID must not start with a digit. (The title attributes of the navigation links are also completely redundant and will be annoying rather than helpful, as they state the same thing that should go in the anchor text.)

I realise that it's a simplified example, but there's one thing that catches my eye. If all DIVs in the #content element have the same class, there's something 'wrong'. You don't really need the class then – you should use a contextual selector instead:

Code:

#content>div {...}

**Genexbs** · Apr 22, 2008 03:39

Style your main template using div ids that will be unique for page for sure like header div, links div etc. For elements that are being reused multiple times use css defined style.

Since I work in team environment most of time, using ids reduces chances of confusion and accidental changes, as other person knows from its name where it is being applied and will affect which section of page.

**JimmyP** · Apr 22, 2008 03:51

Eh oh... Sorry Tommy - I completely forgot about that number thing - I don't use that layout - just quickly did it for this example... Sorry if I confused anyone.

And yep ur obviously right about all the divs in the content, but as you also said it's just an example.

How do you suggest accomodating older browsers if you're using '>' ??

**venoogopal** · Apr 22, 2008 04:12

Hi, thanks all for ur clarifications

the information is very useful for me, and I have a clarity now on ids, and classes thanks once again to jimmy p and autisticcukoo

**AutisticCuckoo** · Apr 22, 2008 04:17

No worries, Jimmy. I'm sorry for coming across all negative. I should have mentioned that your example is fundamentally good, but that there are a few issues with it.

Personally speaking, I prefer the navigation after the content, but that's me.

**JimmyP** · Apr 22, 2008 04:22

mmm Personally I am not totally sure about where about's the nav should go. Surely it's best for those users on text-only browsers (no css) to have it at the top... or maybe at the bottom when they have finished reading the page? - This is the dilemma.

**AutisticCuckoo** · Apr 22, 2008 04:57

Originally Posted by JimmyP

Surely it's best for those users on text-only browsers (no css) to have it at the top...

That depends on what you expect them to do. If you expect that the first thing they'll do when they arrive at this page is to go somewhere else, then it might make sense to have the navigation first.

I prefer to believe that they would like to read the page first, and then feel inclined to move on to some other interesting page, in which case it makes sense to have the content first.

As long as you provide a skip link at the top, it doesn't matter all that much.

**Paul O'B** · Apr 22, 2008 05:26

Originally Posted by Tommy

If you expect that the first thing they'll do when they arrive at this page is to go somewhere else,

lol

I think you could be on to something there Tommy and to make life interesting perhaps we should put an immediate random re-direct on the page and send visitors off on a mystery tour somewhere else.

**JimmyP** · Apr 22, 2008 05:38

I think it depends on what type of content you have. If I arrive at some random website, normally the first thing I'll do is look for an "about" link regardless of the actual content on the page. - In this instance it might be better to have that link at the TOP of the page.

**AutisticCuckoo** · Apr 22, 2008 06:24

As I said, the solution to the problem is to have a skip link at the top of the page. If you have your navigation first, use a 'jump to main content' link. If you have your content first, use a 'jump to page menu' link.

User Tag List

Thread: is the div ids or div classes in layout, which is the best

Thread Tools

Display

is the div ids or div classes in layout, which is the best

Bookmarks

Bookmarks

Posting Permissions