At this point we have covered lots of the simple HTML elements by exploring the different tags and using them in code. When using more complex HTML elements, or even ones we have used before, we need to start giving each element different attributes.
Attributes have various uses but generally they give more information about the specific details of a HTML element. This could include how it will look, how it will behave or how to identify that specific element or elements like it.
Two of the more common attributes are the id attribute, which is pronounced as two separate letters (I D) as it is short for identifier, and the class attribute.
The id attribute gives a unique name to the HTML element and so should not be repeated in other elements. This is very much like the name you may give a cat. If we were to describe Aria in HTML we may assign her id attribute to be ‘Aria’.
The class attribute is used to identify or group together similar HTML elements, much like knowing a dog or a cat’s breed helps you to know some common details about an animal.
Unlike the id attribute, class names can repeat with no issues; in fact repeating class names is encouraged so you can group similar elements.
If we were describing animals using HTML it might look something like this.
<cat id=”Aria” class=”british-shorthair”> </cat>
<cat id="Greebo" class=”ragamuffin”> </cat>
<cat id="Muffin" class=”british-shorthair”> </cat>
From what we know already, we can tell that all three of these tags describe cats as HTML elements, but this time an id attribute and a class attribute has been included. Each attribute is assigned in such a way that it is easy to read as it looks like how you may say it.
For example:
This cat’s id is equal to Aria.
This cat’s id is equal to Greebo and its class is equal to a ragamuffin.
This is very much like saying: This cat's name is Aria, or this cat's name is Greebo and its breed is a ragamuffin.
Aria's Class Is A British Shorthair And Not A Snow Leopard
Each attribute is added by including the name of the attribute, id or class in these examples, then an = sign and the value of the attribute inside speech marks. All of this, for every attribute is included only in the opening HTML tag; it is not needed in the closing tag.
Reading the above code we can see that the three cats each have three different names which are used as their unique identifier in their id attribute and that they each have a breed given as a class.
We can also see that both Aria and Muffin and British Shorthairs so we know already that these cats, or HTML elements, will share similar traits. In cats this may be the size of their ears or how playful they are, in HTML this may be how they look or what happens when they are clicked.
These attributes are used a lot, do they make sense?
Yes, but what if I need to use my name is really long or I want to add my title of Princess.
You can use longer id attribute values but you cannot have spaces.
But I want all the spaces, you know that from when we share the sofa.
What I mean is your id, in HTML, cannot include spaces.
Instead, use hyphens which look like this –
Just like when we named our HTML files.
Ok, I see. I’ll make up for it by using lots of space on the sofa.
Let’s try adding the id and class attributes to a real HTML example from earlier.
<body>
<h1 id="main-title">Aria The Cat's Website!</h1>
<p id=”first-line” class=”introduction-text”>I am a tabby cat named Aria and I like to sleep quite a lot. Every cat does because, let’s face it, sleeping is great.</p>
<p class=”introduction-text”>Also, I have an owner who, in my opinion, could feed me more enthusiastically.</p>
</body>
In this example, you’ll notice that not all elements have both an id and a class; you only need to assign the values you need. The h1 tag and the first p tag have been identified as unique and given unique id attributes and both p tags have been grouped together by using the same class attribute.
This may mean that we want the two paragraph elements to have similar characteristics but we may want to give the first one some extra.
As we haven't yet covered styling, the above code isn't shown because you wouldn't see a difference between the two paragraph elements. But can you work out what it will look like?
Can elements have more than one class?
Great question. Yes they can.
Classes are used to group like elements together and so its fine for elements to fit into more than one group.
Class names are separated by a space but each class name may include a hyphen.
So my id could be Aria and my classes could be very-cute and really-hungry.
Don't forget to add: extremely-annoying.
Try out your own ID in the box below. Remember you can't use spaces but you can join words with hyphens.
In the box below, try out a few class names. Remember, for classes you can use spaces and you can join words with hyphens. When you want to give an element multiple classes then use spaces to separate each class
It's a good idea to make sure you don't reuse a class name for an ID. For instance, earlier we used 'british-shorthair' as a class to describe a cat, but it would be confusing to name a cat 'british-shorthair'.
At the moment, this may seem pointless but there are lots of attributes you can add and they are important to understand before you start adding more complex HTML elements and for when we start writing CSS to style your website.