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.
<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
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
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
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
Have A Little Class
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
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
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.