What is the difference between HTML ID and Class?

Hello friends,

You are welcome to our HTML series.

In the last segment, we learned about HTML head, what html head is and the different tags we add like link, script, style, meta, base etc.

When we add these tags, what is their use, they don't show up in the body but pass the information to the browser.

All this we learned in our last session.

The topic today is class and ID.

So, in today's topic, we will not only see the difference between class and ID but also will see when the class and id is used, what is the need and for what we use class and id.

Firstly, we will see the class.

So, what is a class?

When we need to define something, style an element, or utilize a thing more than one time, in that case, we use class.

As it's written here in the definition

The HTML class attributes are used to specify a single or multiple class name for an HTML element.

We can give multiple class names to multiple attributes.

As we saw, whenever we give CSS, any style or perform any javascript task, in that case, to interact the CSS or JavaScript with the html page, class and id are very useful.

That we will see today with an example.

When we create a class we use the dot or the period sign (.) and with its help, we generate the class.

So we will take an example and understand through that what a class actually is.

So let's open our editor and select HTML

HTML ctrl space

We will take the title as class and ID

Save our program with the name class_and_id.html.

I will run the program along

Here is the class and id

So run

This is the program that is being run with the name of class and id.

So, currently, there is nothing in our program so in this case, we will firstly create the class.

Let us take an element inside the body

Let's say I am using an H1 tag and write "Hello! How are you" inside it.

Save

And when we run it we get hello how are you as the output.

So, in the current program, we haven't added anything new.

The head tag we gave was studied in the segment for the headings.

And we are showing the same with a heading.

So, currently without any extra style I have added H1 and added some content "hello how are you" in it.

The content is shown as it is in the browser

So that was the data insider H1.

Currently, the content is in black and I want to change it to green, blue or yellow but that I want to do through the class.

How do we do that?

As the class is used for CSS as we saw in today's PPT.

When we are accessing any element with the help of CSS or JavaScript in that case the class is used.

I am repeating,

When we want to access an element with the help of CSS or JavaScript, we use class and id.

Currently, we will use it throughout the class.

We saw how to add CSS in the last segment.

The first method is with the help of the style.

Here I have opened the style tag, inside this I will add the class.

As we saw in the PPT that the class always starts from a (.).

Let's say my class is. colour.

Or we can write .heading-color

So this is the way of writing the class.

How can we write the class?

So what does the dot define?

Dot defines that what we are writing is a property of a class.

I am saying again.

Whatever we start with a dot is a property of a class.

If I have added a dot before the heading colour that means the heading colour is a class.

If I create any other class .abcd, then abcd will become a class.

So, inside the heading colour let me take the colour

All this is CSS, when we do a course on CSS we will learn it in-depth like how we write css, what are the different CSS available.

So, currently, it is heading color and inside it, I'm taking colour.

Blue

Save.

We have saved it but we haven't made the class applicable anywhere and when I am reloading this page no difference is being shown.

Now, I will copy this class and add it to h1.

The way of writing the class is like this:

Type class enter the class name.

So, I wrote class and then wrote the name of the class inside the quotes ("").

Let us save and reload.

So you can see the font colour has changed and this has turned blue.

So what do I do with the help of class here?

I took an H1 tag and gave it a class "heading-colour" and I have written a property in that class.

The property I wrote in class is applied here.

Now, the class can be used with multiple elements.

So let's say the first element is h1.

So let's say I take one more element here

I take a p tag and write any content in it, so I write "I am fine thank you".

When I wrote I am fine thank you in the p tag and run it.

So here I am fine, thank you is shown.

Let me make the fonts bold

Hello, how are you and after that thank you.

But, currently, it is in black colour because we haven't given the class to the p tag.

So let's say I apply the same class here in p.

What will happen?

Save and reload

The colour of p became the same as h1 which means by providing the same class in more than one element we can give any design or style we want.

Let's say I want to make the fonts of H1 and p similar.

So I am adding a css of font size equal to 20 px.

When I reload it

You can see the fonts or H1 and P1 are the same in size but because this is h1 tag it is shown a bit bolder.

So, we saw that the fonts both became the same and the colour is also the same.

That means the changes I want to make whether it's H1 or p, the changes I will make in the details of the class will reflect in both elements H1 and p.

So, that was the class with the help of the class we can give the css we want along with that we can apply the same css on more than one element.

That was the class. The next segment is the id.

What is an Id?

When we need to uniquely identify an element that means, within the web page we want to give a unique Id to an element, so using ID we can uniquely identify any element.

But make sure the ID we gave once cannot be given again.

That means as we saw the example we used two elements the h1 and p and I give an id to h1 then the same ID cannot be given to p.

In the whole web page, the Id is only one so it will either be of H1 or p.

So let us see this with an example,

I am including an h3 tag

"This is an H3 tag"

Save and reload

So when I added the h3 tag it is showing something like this and the default colour is also black.

So in this let me add the id and to add the id we will write ID equals heading style.

This is my Id.

Copy it and will include it with a hashtag (#) in the CSS.

So this is a difference when we add a class we include it with a dot and when we include the id we include it with a hashtag.

So these are the differences for a class a period and for id a hashtag.

So, whatever style I want to give it, I will give it here.

Let us say, the font size equals 30 px and the color is green

Save and reload

As soon as I reload I can see that the font size has increased and is shown in green colour because I have given an id to h3 and I have given a css to the same Id.

So here we saw if I give the same Id to some other element or attribute it will not work especially if we are working with javascript.

But If I do the same thing with HTML, it works.

So, for that I took h3 and after it, I took the h5 heading tag.

Here I have placed the same things. by copying them the things I took in h3 same I have written here.

And I will replace the h3 with h5 and I have included the same Id as well.

So, when we are Working with javascript it becomes mandatory for the id to be one on the complete page.

But, If I do this, although it's a wrong approach to do that by giving the same IDs to two elements but still for example I gave the same Id to both.

I will save it

And when I run it

I can see the same line as the h3 tag is shown for the h5 tag, same colour and size of the font.

This means, the same work has been done by the h3 and h5 tags, the same CSS has been applied to both but when I handle this with javascript (which we will learn in the JavaScript course).

According to JavaScript if I gave the same Id to two different elements, it will throw an error and we cannot work properly with it.

So better is to keep up with the practice that we can give the same class to different elements but only one Id should be given to an element.

So if I want to correct this code I will either remove h5 or I will remove the id

Save it run

And I can see the content in the h5 tag.

So do remember guys

If we are working with class and id.

We can include more than one class on one web page.

If we are working with Id.

On one web page, there should be only 1 Id.

You will get the output for sure but it is not proper coding practice.

As per the coding standards, there should be only one Id on one web page.

So that was the id.

So the two points we learned today are class and ID.

We studied what is a class and id, and saw the difference between both that there can be more than one class on a web page but Id should be one.

We identify class with a dot and id with a hashtag.

The next segment will be about HTML layouts, how do we create the layouts, what are the types of html layouts, how can we place them on the web page.

So we will learn about HTML layouts.

So today in the session we saw class and id and we performed an example. You can also take the same example and perform.

And try to run the program if it runs successfully that's well and good butIf you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

Thank you.