HTML Class Attributes - Gyanipandit Programming

HTML class attributes

The class attribute is a global attribute, which means that this attribute can be used with any element. Well, the name of the attribute, that is class, says it all, that what is this attribute used for.

If we consider a class of students, we can say that there are many students that can belong to one class, similar to that, here, there can be many elements, which can belong to one class.

Also, if we consider some students, it can be a part of a number of classes, like the student can attend English class, music class, dance class, art class, etc. Similar to this, some particular elements in our HTML document can also be a part of multiple classes. With the help of classes, we can group similar elements, and access the elements for styling or scripting purposes.

So, here is an example, where we are using the class attribute.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Superscript example</title>
</head>
<body>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit voluptatum sint a impedit alias sed sunt corporis corrupti ullam omnis cumque non et rem eligendi incidunt nulla, rerum ea nobis.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit voluptatum sint a impedit alias sed sunt corporis corrupti ullam omnis cumque non et rem eligendi incidunt nulla, rerum ea nobis.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit voluptatum sint a impedit alias sed sunt corporis corrupti ullam omnis cumque non et rem eligendi incidunt nulla, rerum ea nobis.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit voluptatum sint a impedit alias sed sunt corporis corrupti ullam omnis cumque non et rem eligendi incidunt nulla, rerum ea nobis.
</body>
</html>

As you can see, there are some paragraphs in this document, which we can see, belong to the class paragraph. This is a different part, then how are we going to access these elements for styling or scripting, but the thing is that we can group the similar elements together and access them.

Note that if you want to make some element as a part of multiple classes, we can simply separate each class with a space. Have a look at the below example –

As you can see, the first paragraph in the above example belongs to the class paragraph, and major para as well.

So, whenever we are required to make use of the class attribute, we can do it. It would be used when we want to group similar elements together, and then we can access them.