HTML: A Classy Identity

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 SushiCodes 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.

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 SushiCodes 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. For example, if you take a look at the tailwindcss docs, you’ll notice a list of links under “On this page” on the right side. If you click on any of those links, it will jump to the relevant section on that page.

If you hover over the links, do you notice how the URL is the link to the page, but then at the end it has a pound sign and then a name? 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 instances of one id, then how would your browser know which instance 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 the share links to the left of each post here on SushiCodes. Every single one of the icons has the same design. If we only had the id attribute, then we’d have to create a new id every single time we wanted another icon in the share section. 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.