Photo courtesy of Allison Day

If you look at the HTML code of any modern website, you’re likely to see a lot of <div> elements. A whole lot of <div> elements. A lot of coders use <div> elements to format the layout of their websites. But what does a <div> element do?

By itself, not much.

All a <div> element does is group the elements inside of it together, and add a line break after the closing tag. Seriously. That’s it. Nothing more.

Now, you’re probably wondering… why do we so often see <div> tags nested one within another… within another… within another? And how do we get from a <div> tag that supposedly doesn’t do much to a beautifully formatted website like Sirius where there’s obviously something more than mere grouping going on?

That, my friends, is the beauty of id and class attributes. They are a big part of how a website changes from a barebones scattering of elements to a beautiful work of art like those we do here at Sirius.

In essence, they are the bridge between your HTML and your CSS. They tell your browser where to apply the styles specified in the CSS file. And they’re not just for <div> elements. Anytime you want to apply some style to an element on your website, you’ll use an id or a class attribute.

Identify Yourself

Think of the id attribute as your Social Security Number. Every person only has one Social Security Number, and every Social Security Number only identifies one person (At least, that’s how it’s supposed to work). If you have one person with many SSNs, or one SSN that’s referring to more than one person, you know you have a problem.

It’s the same way with the id attribute. Every element should only have one id attribute, and you should only ever see each id attribute once in a webpage. Mind you, I said webpage, not website. If you look at the code here on Sirius or in most WordPress themes, you’ll see that almost every single page has an id=”header” attribute (or something similar). That’s okay, so long as you don’t see that attribute more than once on the same page.

One of the main reasons for using an id attribute in any of your elements is, as I mentioned before, to apply styles from your CSS file to your HTML code. Go look in your CSS file (probably titled something like ‘style.css’). Do you see how some of the words have a pound sign before them – for example, ‘#header’? That pound sign tells you that it’s referring to an id attribute (A period in front tells you it’s referring to a class attribute, and nothing at all means it’s a regular element, such as ‘body’ or ‘p’.).

Later we’ll go into all sorts of detail about your CSS file and how everything works, but for now you just need to know that the id attribute is used in conjunction with the CSS file to apply styles that you only want in one place on your webpage.

Another cool thing you can do with the id attribute is link to it to jump to the middle of a page. If you’ve ever followed a link in one of my blog posts to a previous post, you might have noticed that instead of going to the top of the post, the link jumps right to the part of the post that I’m referring to (Like here, when I was talking about the closing tag in HTML elements).

Notice how the URL is the link to the post, but then at the end it has a pound sign and then a name? (In that example, it was ‘#close_tag’.) That tells your browser that you’re jumping to that id in your webpage. Remember that there’s only one id in every page – so your browser is going to know exactly where it’s supposed to go. If there were multiple ids, then how would your browser know which one you’re referring to?

So remember: each id should only appear once on a webpage, and each element should only have one id.

Have A Little Class

Whereas the id attribute has a one-to-one relationship with your webpage elements, the class attribute has a many-to-many relationship. Each class attribute can have multiple elements, meaning it can show up as often as you need it on a single webpage, and each element can have many class attributes.

This comes in handy when you want to apply the exact same style more than once on a webpage. For example, take a look at our sidebar here on Sirius. Every single one of the boxes has the same rounded corners, the same gradient background, the same header styling, etc. If we only had the id attribute, then we’d have to create a new id every single time we wanted another box on the sidebar. And if we wanted to change something, we’d have to remember to change it for all of the ids, or else something might look a little screwy. That’d be a pain, right? (If this sounds familiar, it’s because we’ve said the same thing about using PHP to give every page the same header, sidebar, and footer without having to hard code it into every single webpage.)

Thus the beauty of the class attribute. You just have to create one class with the specific styling you want, and then add it to any element where you want that style. Even better, if you have several different classes that you want to apply to one element, that’s completely okay – just separate each class name with a space, like this: <div class="comment even highlight"> This will tell your browser that it should apply three different classes to that <div> element: the ‘.comment’ class, the ‘.even’ class, and the ‘.highlight’ class.

Stay Tuned…

Next week we talk about the general layout of your website. This means we’ll discuss tables, when it’s okay to use them, and when to absolutely NOT use them (or else suffer my wrath, and the general disdain of any decent web developer out there). Believe me, you’re going to want to tune in for this one.

Even as we digress a bit the next few weeks, remember today’s lesson – every id should only be seen once on a webpage. But you can have as many instances of a class as you want.

So stay classy, my friends.

Previous

Wax On, Wax Off: Podcasting The Miyagi Way

Next

Branding the Artist Within

Related posts you might also like:

• HTML: Let’s Take It From The Top, People
• HTML/CSS: Navigation: All Your Cookies In A Row
• HTML: Getting Inside Your Head
• HTML: An Intro To Headers
• To Table or Not To Table? That Is The Question.