The difference between ids an classes in HTML

Question

I am learning HTML and CSS from a book and I've faced a problem with connecting between the ids and classes, can any one answer me when to use them?

<p id=”footer”>Please steal this page, it isn’t copyrighted in any way</p>
    <p class="guarantee">

The book said : Giving an element an id is similar to adding an element to a class. The only differences are that the attribute is called “id”, not “class”, an element can’t have multiple ids, and you can’t have more than one element on a page with the same id. but still not understand when to use them :P thanks guys

Does this solve any of your problems? https://css-tricks.com/the-difference-between-id-and-class/ — DevNebulae, May 05 '16 at 11:30
`id` is for unique elements, `class` are for multiple elements that use the same styling — Andy Holmes, May 05 '16 at 11:31
Think of it as a university classroom. Every student is unique and has an identity of his/her own. That is the ID. Certain things may be common across the entire classroom, that's when you apply a class. — Satej S, May 05 '16 at 11:31
Duplicate - http://stackoverflow.com/questions/12889362/difference-between-id-and-class-in-css-and-when-to-use-it — Paulie_D, May 05 '16 at 11:42
Possible duplicate of [CSS ID vs Class](http://stackoverflow.com/questions/970730/css-id-vs-class) — Daniel Beck, May 06 '16 at 18:37

score 1 · Accepted Answer · answered May 05 '16 at 11:41

classes are generally used to group elements together while ids are used to identify specific elements.

<div class="buttonContainer">
    <button id="home">home</button>
    <button id="about">about</button>
    <button id="contact">contact</button>
</div>

<div class="buttonContainer">
    <button id="email">email</button>
    <button id="query">query</button>
</div>

another example

<div id="header">
    <p class="title">Header Title Here</p>
</id>

<div id="footer">
    <p class="title">Footer Title Here</p>
</div>

Very understandable answer , thank you – Wael Assaf May 05 '16 at 11:47 — Wael Assaf, May 05 '16 at 11:47

score 0 · Answer 2 · answered May 05 '16 at 11:32

0

The quick answer is that an id should be used to identify a specific element on the page and all ids should be unique. A class, on the other hand can be used to identify multiple elements with the same or similar meaning.

answered May 05 '16 at 11:32

phuzi

12,078
3
26
50

score 0 · Answer 3 · answered May 05 '16 at 11:33

You've already mentioned the main differences. But when it comes to the CSS #id selector, there are other things to consider:

See, for example:

<div id="mydiv" class="mydiv"><p>Hello there.</p></div>

CSS:

#mydiv {
color:red;
}

.mydiv {
color:blue;
}

This will yield red colored text because IDs are more specific and thus more relevant to CSS, they are a priority with respect to classes.

score 0 · Answer 4 · edited May 05 '16 at 11:45

The 'id' attribute should be unique within the same webpage although it is possible to declare more than one element with the same id. There can't be more than one element with a particular 'id'.

There can be multiple elements on the page with the same 'class'. This is useful when you want, for example, apply same CSS style to several elements.

The 'id' is used, for example, in Javascript, for getting an element with a specified id, or when you want to apply a style to only that element.

score 0 · Answer 5 · answered May 05 '16 at 11:39

0

ID's are unique

Each element can have only one ID. Each page can have only one element with that ID.

Classes are NOT unique

You can use the same class on multiple elements. You can use multiple classes on the same element.

answered May 05 '16 at 11:39

Asim Iqbal

148
1
7

The difference between ids an classes in HTML

5 Answers5