Make sure you don't miss the latest insights and tips. Get on my mailing list now »

Using Classname (class) and ID in HTML

Any HTML element (like a body, list, paragraph, table etc.) can have an ID (identifier) and can also have one or more Classnames.

For example, the following DIV element has both an ID and three Classnames (separated by spaces).

<div id="contactblock" class="indent highlight new">...</div>

But what are IDs and classes/classnames, and how and when do you use them?

HTML IDs

An ID in HTML is meant to identify what an HTML element actually IS – as in, its unique identity. You can set pretty much what you want as the ID, just make sure it accurately describes the element.

The only rules you need to know about IDs are:

An element may only have one ID (or none), and

Its ID should be unique. No other element on the same page should have the same ID.

Now, for CSS, it doesn’t really matter for IDs to be Â unique. You can set rules for any element with a particular ID, and that rule will apply to any elements with that ID. CSS doesn’t mind.

But it does matter for other advanced things, like DOM scripting (DHTML, or JQuery).

One of the most useful Javascript tags used in DOM scripting is getElementById(), and that only works reliably if your IDs are unique. (A programmer would use that to manipulate the page using code. You may never need to do that, I’m just telling you so you know.)

When Do You Need To Give Your HTML Elements an ID?

The main reason is if you ever want to writeÂ someÂ programming code that uses that element (say to move it, make it disappear, or change it in some way). Most of the time, this won’t be necessary, but it’s very common in web-based applications.

You may also use IDs for CSS purposes, but I do this very rarely myself.

You should know that when you identify an element by its ID in CSS, using the # character, for example…

#yourdiv {color:red;}

…then that style will override anything that sets styles using classnames. In other words, if you later had more CSS styles like this…

This would not apply, because IDs outrank HTML elements (like body, ul – the bits with no prefix) and classnames (with the dot prefix).

You may then use an ID to override other styles, but generally I avoid using them for CSS purposes, unless I’m 100% absolutely totally completely sure that there will only be one element with that ID on the page – ever.

HTML Classnames

Classnames in HTML are much weaker and looser than IDs. The rules are less strict, and you don’t need to be as careful with classnames.

A classname should be used to describe some property of an HTML element. For example, its importance, visual presentation, or context of use.

An element may have no class, one class, or more than one. If more than one, separate them with spaces (which means you can’t have spaces in your classnames, use hyphens instead).

You can have more than one element with the same class, and that’s very common.

For that reason, class is not quite so useful as ID for identifying an HTML element using Javascript. There is a document.getElementsByClassName() function (method) in Javascript, but this will return a set of elements, which then needs to be looped through. (Again, this is only for programming purposes.)

I use classnames all the time in CSS. You identify an element by its classname using a dot/period, as in the example I used before…

Using Multiple Classnames in CSS

So what this is saying is, “Apply background:yellow to any element that has the classname newsitem AND the classname current”.

But this doesn’t work in every browser, so I tend to avoid relying on identifying elements using more than one classname. You may need to use classnames within classnames (i.e. .class1 .class2) instead.

Ben Hunt

Ben is the creator of Web Design From Scratch. He started writing articles about web design to kill time on a long train commute, and is now one of the most influential figures on the subject of effective web design. He has written three books and spoken at multiple conferences internationally.

Leave a reply:

Excellent post Ben for me who’s a little wet behind the ears when it comes to learning HTML, ID & Classnames. I’ve found your first months course very useful as it enabled me to use CSS and classes. I’ll refer to this post again just to reinforce what I’ve learned in practice.