In this article, I will show you how to use ID and class in HTML, these are two very important attributes, it helps us to combine with CSS easily.

Each HTML tag has its own and different attributes. However, with the ID and Class attributes, 100% of the tags can be used. ID is like your identification number, and class is like your gender. Let's find out the details together.

What is ID in HTML?

ID in HTML is a unique and identifying string, used to attach to a certain HTML tag. In an HTML file, the ID is unique, which means you cannot set 1 ID for 2 HTML tags.

The naming of IDs should follow the following rules :

• Name given in English and without accents, no spaces, no special characters.
• Naming makes sense, helping us to look at the ID to know what the card is for.

Example : I create a dialog box that displays a discount code, and I will use a div tag to surround the entire dialog box. Then I did not forget to set the ID for it as " discount_wrapper ".

 <div id="discount_wrapper"> </div>

Now, if you want to use CSS to edit this tag, use the following syntax:

 #discount_wrapper{ background:red; height: 300px }

In short, if you want to use CSS to query the ID, use the #ten_id syntax.

What are classes in HTML?

If the ID is unique in an HTML document file, then the class is different, it is used to establish a class of objects that share a common characteristic. So you can attach a class to many different HTML tags.

The naming of the class should also follow the rules that I instructed in part 1.

Example : I want to display a list of posts, and each post I will call it a block. Thus, if there are 100 posts, I will need 100 blocks. If we use ID to set those 100 blocks, it is very difficult. So, we will put a class for 100 blocks, and we only need to write CSS for that class and the other 100 blocks will be applied CSS right away.

 <div class="post"> Post 1 </div> <div class="post"> Post 2 </div> <div class="post"> Post 3 </div> <div class="post"> Post 4 </div> <div class="post"> Post 5 </div> <div class="post"> Post 6 </div>

In CSS I would write the following:

 .post{ background:red; height: 100px; margin: 20px; }

Thus, we use the . for class and # for ID.

When to use ID and when to use class?

This is a question many of you have asked me. To answer, you have to review the two concepts that I presented above.

• The ID is unique within an HTML document set. Therefore, you should set it if the site structure exists only in one position, i.e. CSS has no inheritance.
• Class is different, can attach classes to many different HTML tags. Therefore, you should use it in case you want different HTML tags to be able to inherit each other's CSS.

Through this tutorial, I have finished showing you how to use IDs and classes in HTML. This is an important issue, it is a premise for you to learn the next lessons. Please watch carefully, if you have any questions, please comment so I can answer them.