HTML - Container id or class_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-29 05:24 出处：网络

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?

相关专题：standards

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>

<body>
    <div id="main" class="container">
        ...etc
    </div>
</body>

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.

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.

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.

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>