Class attribute in HTML

Here, we are going to learn about the class attribute in HTML with the examples and the browsers compatibility.
Submitted by Munduchirackal Luke Ricky Jacob, on October 20, 2019

The class attribute in HTML is used to specify or set a single or multiple class names to an element for an HTML and XHTML elements. Its majorly used to indicate a class in a style sheet.

Defining the structure of a class can also be considered as description to class attribute. You can identify them as the opening tags to control an element's behaviour. The class attribute often points to the class in the style sheet. Class attribute can also be taken in use by JavaScript, CSS (Cascading Style Sheet). The class name can be used by JavaScript and CSS to perform task or indulge changes for elements under specified class name; mainly for styling purposes or to add behaviour to elements that fall under particular subtype. Class attribute makes it liable to bring changes to any HTML element.

It determines how an element should processed, it will indicate the elements' inheritance and therefore how it should be handled. Name of an element specifies its type but class lets you assign to it one or more subtypes.

The class attributes cannot be applied to following elements,

Base
Basefont
Head
Html
Meta
Para
Script
Style
Title

Class attributes can be used on inline elements.

There can be multiple class names to a single element where each class name must be separated by space between them, and also class attribute value may begin with a number and still be valid HTML unlike id attribute. But it is most likely to be avoided to initiate with a digit.

It is recommended to have semantically meaningful name as possible as it would add to the emphasis of the particular subtype to be specific and would provide an eye of interest and ease to those reading the markup. Purely presentational names would help bring maximum eyes on board.

The syntax which is however the essential format is,

    <element class="classname">

An example on how to place the class attribute?

<html>

<head>
    <style>
        h1.intro {
            color: blue;
        }
        
        p.important {
            color: green;
        }
    </style>
</head>

<body>
    <h1 class="intro">Header 1</h1>
    <p>A paragraph.</p>
    <p class="important">Any important text. :)</p>
</body>

</html>

All the styling and other changes in behavior in an element or elements that you want to provide to all the elements under the same section which is distinguished due to the class attribute can be applied in effect to every element. This in HTML provides a lot of potentials to work with and deal with several arrays of classes.

Different tags can have the same class name and therefore share the same styles as well.

The browsers that are compatible with class attributes are,

Google Chrome
Internet Explorer
Firefox
Opera
Safari

It's one of the basic aspects but essential that you need to know in attributes for HTML. And also quite easy to grasp in with.

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples