Class, ID and < div > and < span > in HTML

brackets iconIn this lesson we’ll learn about class and ID attributes, and two tags that are useful for structuring our HTML.  If you haven’t followed the lessons up to now then you should start from the beginning of the course. For this lesson you’ll want to have your “index.html” open in both Notepad and your browser so we can make changes to it and refresh the browser to see them, as usual.

Use the buttons below to navigate through the lesson


Classes and IDs

Class and ID are two very important attributes that can go on any HTML element.

Class is used to group together elements that are alike in some way.

ID is used to identify one particular element that we want to interact with.

For example, earlier we added an ID to our <section> element, like so:

<section id=”content”>…blah blah blah…</section>

This is so we can tell this <section> element apart from any other <section> elements we might add later. What this says is “this section element is called ‘content'”.

IDs are referred to using the “#” symbol, so the correct way to describe this element using its id is #content. This means “the element with the ID ‘content'”. This is called a selector.

There can only be one element with a particular ID on each page. In other words IDs specify an element that is unique.

Classes are used to group together alike elements that share a characteristic.

For example, our page might have many <li> elements. (remember <li>? <li> is a list item – an item that appears as part of a list). Imagine a page with lots of different lists on it, all with lots of <li> elements.

What if we wanted to do something with just ONE group of the list elements? Well, we could add a class to those list elements. Something like this:

<li class=”special”>Item One</li>
<li class=”special”>Item Two</li>
<li class=”special”>Item Three</li>

Now we can specify the list items that have the class “special”. The selector for classes uses the symbol “.” so in this example our selector would be .special

Classes do not have to be unique, they can be shared by any element that you want to be part of the same class.

It will be important to understand classes and IDs when we start learning CSS in detail later.

The <div> and <span> elements

We have already seen the <div> element: it acts as a group, to collect together multiple elements that we want to keep together.

The <span> element is similar, except that it acts inline where <div> acts as a block. Later in the course we will study the block model so we can understand this statement in detail.

For now, we just need to know that <span> can go inline as part of text without any effect. For example:

On our index.html page, we could add a <span> around some of the text, like so:

<p>It is possible to make websites using these extremely simple tools. This is <span class=”important”>great news</span> as it means everyone can learn to make websites.</p>

Replace your <p> tag in index.html with the above HTML and hit refresh.

Everything looks EXACTLY the same. That’s because we haven’t told the browser what a span with class important means!

Inside our <style> element in the <head> add the following line:

span.important { font-weight: bold; color: red; }

With our understanding of selectors we can probably guess what this CSS means – if we have a <span> with class important (i.e. span.important) then make it bold and red. If you save and refresh then you can see the text now shows as red and bold:

HTML 8 - 1

What if the <span> was a <div>? Try changing the <span> to <div> like so:

<p>It is possible to make websites using these extremely simple tools. This is <div class=”important”>great news</div> as it means everyone can learn to make websites.</p>

Save and refresh and we get this:

HTML 8 - 2

Ok. So the <div> has put “great news” on it’s own line. This is what we mean when we say <div> acts as a block – it is now a separate block between the other two lines, instead of being inline like the <span> tag was. This is the essential difference between <div> and <span> – <div> starts a new line for all of its content. Technically it’s a little more complicated than that, as we’ll see when we study the block model in more detail. But for now that gives us a good understanding to work from.

Wait, why isn’t my important text bold and red anymore?

That’s the other change – now our text isn’t getting the “important” change we made before with our “important” class.

If you remember the line of CSS we added, we said span.important – we specified that it must be a <span> element with a class important. If we remove the word “span” so it just says “.important” let’s see what happens.

Change the line of CSS you added earlier to read:

.important { font-weight: bold; color: red; }

HTML 8 - 3

Now our “important” class is working again!

Of course, we don’t want to keep this as a <div> as we want the text to appear in line. So change it back to a span and save, so it looks like this:

HTML 8 - 1

Now you can see how to use <div> and <span> to group content in your own websites, and we have begun to learn about classes and IDs.