HTML - Container id or class

html standards

18,615

Solution 1

I don't know that there is an industry standard. If it's a container, you should have only one so an ID makes sense. You can use classes and IDs however you see fit, the bigger challenge is having cleanly-written, well-stacking rules that apply to the design you're working with.

Edit: Your question just updated -- it'd be better to have id="container" and then class="home", class="about", etc. as needed. This would make for a neater stylesheet and would give you the option of simply overwriting #container rules if you need to.

Solution 2

Giving an element an id, implies that that element is unique. In your case, a container div is usually unique and therefore an id would do.

A class is used when you want multiple items to have the same styling. Giving different items the same id, is a violation to the w3c standards.

I think this is something you should decide for yourself, I've always used the above way.

Solution 3

Setting an id of container would be most appropriate because you should only have one container. Setting the class = container would imply that more than one container existed. Since a container is designed to wrap all of your page content you should only have 1.

Solution 4

HTML document can have several containers, all sharing some style and each with some unique style.

So best practice is giving each both class and ID:

<div id="Header" class="container">
    ...header goes here...
</div>
<div id="Menu" class="container">
    ...menu goes here...
</div>
<div id="Contents" class="container">
    ...main contents come here...
</div>

View more solutions

18,615

SmokingKipper

Updated on June 22, 2022

Comments

SmokingKipper about 2 years
When writing HTML, what is the industry standard regarding a Container div?
Is it more popular to have a Container id, or use a container class which I add to the divs I wish to inherit the features?

For example:
```
<body>
    <div id="container">
       ...etc
    </div>
</body>
```
or
```
<body>
    <div id="main" class="container">
        ...etc
    </div>
</body>
```
SmokingKipper almost 13 years

Sorry,to be clear, I am aware of the differences between class and id. I thought there may be an instance whereby you may want to use the same container in multiple places (header and footer) but not in the main content.
SmokingKipper almost 13 years

Hmmm, thats pretty interesting..food for thought. Thanks Matt.
SmokingKipper almost 13 years

That is along the lines of what I was thinking, would the use of the word "container" in this instance not be confusing?
Shadow The Kid Wizard almost 13 years

Not all all, by having it you say "this element acts as container to some more elements" and can apply similar style to all containers.