HTML Class Attribute: Use in CSS and JavaScript

The HTML class attribute helps group elements. It helps you update the page style without changing the structure of HTML.

Understand the HTML class Attribute

The class attribute is a word you place in an HTML tag. It works like a name. That name links the element to a style or script. You can use the same name on many tags.

HTML uses tags to hold content. The class attribute adds another way to mark those tags. It points to a shared rule in a style or script. When you use it, your HTML comes under control. You can also change one style and affect many parts.

You add a class to give many elements the same rule. It also helps your scripts find those tags.

You can add a class when you write the word class in the tag. Then give it a value in quotes. The value is the name of the class.

Here is an example:

<p class="note">This is my note.</p>

This puts the word note as a class name. Now you can write CSS or JavaScript that works on that tag.

Here is another example:

<div class="card">This is one class</div>

You can also add more than one. Just use spaces between the names.

<div class="card red large">This has three classes</div>

Each class adds a rule. You can mix them to build what you need.

Many pages need one tag to follow more than one rule. You can do this by placing more than one class name inside the quotes. Each name must be simple. You do not use commas or other symbols.

<span class="bold italic">Text with two styles</span>

This tag now matches anything that uses bold or italic. You do not need to repeat the tag or write new code.

So, does class attribute affect SEO?

Search engines do not read class names as a ranking signal. So, adding a class does not change your page rank. That helps crawlers understand your page.

The Difference Between class and id

Use class when you need to affect more than one element, while the id when the tag is one of a kind. You cannot reuse the same id in more than one place. A class can show up in many tags.

You can use id to find one tag in scripts and class to work on groups. Here is a table that shows you the key differences:

Examples of class Attribute in HTML

Box with Class Name:

<div class="box note">This is a note inside a box</div>

This uses two classes to set both shape and style. One makes the box layout. The other adds a special style.

Button with Style and Action:

<button class="btn hover small">Send</button>

This has three classes that work together. One gives size. Another changes look at the mouse. The last adds button shape.

Wrapping Up

In this article, you learned what the class attribute does and how it works. You also saw how to write it and how it is different from id. Here is a quick recap:

• class helps you group tags and apply rules with less code
• You can use many class names in one tag by writing them with spaces
• Classes do not affect search rank, but they help build fast and clean pages
• Use id for single use and class for shared use
• You can write styles and scripts that target class names

FAQs

<p class="highlight">Text here</p>

<div class="box shadow large"></div>

<div id="header"></div>

<div class="menu"></div>

.highlight {
  color: red;
}

<span class="highlight">Red text</span>

Similar Reads