HTML attributes id and class

Creating web pages is neither rocket science, nor a piece of cake, so sometimes you might find yourself in pretty difficult situations. You may even start to think that there is no way out of them!

For example, how do you change the style of one particular tag if there are hundreds of the same tag in the HTML markup of the web page? Or how do you apply the same style to a lot of different elements without having to duplicate the CSS code and wrap these elements in a new tag?

Fortunately, there are no problems without solutions. The two problems we brought up can easily confuse a beginner developer, but we will prove to you that sometimes difficult tasks have very simple solutions.

For more flexible management of the web page elements design there are HTML attributes id and class. They are needed to identify the elements. Let's take a look at the features of these attributes, see what they have in common, how they differ, and how to work with them.

id attribute

In order to work with a particular element when there are many similar ones, you need to endow it with a unique identifier using the id attribute. It gives you the opportunity to come up with a name for the selected element; the id attribute takes this name as a value. Here is a syntax example:

<h1 id="title">Good Morning!</h1>

In this example, title is the unique name of the element. Styles can now be applied to this element not through the tag selector, but through the value of the id attribute.

To work with this attribute efficiently, keep in mind a few things:

• When creating a unique name, you can use only Latin alphabet characters (A-Z, a-z), numbers, hyphens, and underscores. For example, names Navbar, nav_item, and margin-b-40 will be correct.

• The id name should not contain spaces. That is, names like our products will not be valid.

• The id can be used for only one element; you will not be able to work with multiple elements that have identifiers with the same name.

• Identifiers are case-sensitive: id="FirstHeader" and id="firstheader" are different identifiers.

Class attribute

When you need to give many different elements the same look, the class attribute comes in handy. As a value, it takes any name you come up with. Unlike the id attribute, a web page can have many elements with the same value for the class attribute. Consider an example:

<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>

In this example, all the div tags have the same class – card. This is very convenient because now you don't need to fiddle with each element individually through tag selectors; it is enough to specify the style only for class.

You can apply several classes to one element. To do this, you just need to write the names of the classes separated by a space. It will look like this:

<div class="card profile-card">Card 1</div>
<div class="card news-card">Card 2</div>

In this example, the div element with "Card 1" as text has two classes at once: card and profile-card.

The rules for naming class are exactly the same as for id: when creating a name, use only Latin characters (A-Z, a-z), numbers, hyphens, and underscores. Do not use spaces and keep in mind case sensitivity.

Points to remember

• Use id when you need to target a specific, unique element on the page. For example, the main header, a specific form, or a unique button.

• Use class when you want to apply the same styles or behavior to multiple elements. For example, grouping all the buttons with the same design, styling all the cards in a grid, or highlighting several elements.

• Duplicate id Values: Remember, an id must be unique. If you accidentally assign the same id to multiple elements, it can lead to unpredictable behavior, especially in JavaScript(you'll learn this in next topics).

• Overusing id: While it's okay to use id when needed, it's often better to use class if there's any chance that you might want to style or manipulate multiple elements together.

Conclusion

Next time when you face a problem like that, do not clog the code – often there is a simpler solution that lies on the surface. Understanding this will help you a great deal with creating web pages. Hopefully, now the tasks associated with the identification of elements will not confuse you since you know that they only seem scary at first glance.