HTML Attribute Class

HTML Attribute class can be used to specify one or more class names to an HTML element.

  • The value of a class attribute takes one or more class names
  • The same class name can be used by multiple HTML elements on an HTML document
  • The same class name can be used by different types of elements on an HTML document
  • Class names are case sensitive
  • Class names can be used to apply styles and scripts to the respective HTML elements
<h1 class="head">Heading</h1>
<p class="para">Paragraph Text</p>
<div class="section">
    <h1>Heading</h1>
    <p>Paragraph text within the div</p>
</div>

In the below example, the class names are shared across elements, where all headings and paragraphs are using the same class name.

<h1 class="head">Heading One</h1>
<p class="para">Paragraph One text goes here.</p>

<h1 class="head">Heading Two</h1>
<p class="para">Paragraph Two text goes here.</p>

<h1 class="head">Heading Three</h1>
<p class="para">Paragraph Three text goes here.</p>

In the below example, the class names are case-sensitive, so the class names on the below headings are different.

<h1 class="head">Heading One</h1>
<h1 class="Head">Heading Two</h1>
<h1 class="heaD">Heading Three</h1>

In the below example, the class name is applied to different types of elements, where one is a heading <h1> and the other is a paragraph <p>.

<h1 class="highlight">Heading</h1>
<p class="highlight">Paragraph text goes here.</p>

In the below example, multiple classes head and highlight are added to the same element, which is valid.

<h1 class="head highlight">Heading</h1>

Class Attribute values used for styling

The class name head can be accessed using a dot .head to apply styles within the style element or CSS file.

In the below example, when the page is loaded, this style will apply a background-color of gray to all the elements containing the class head.

<style>
.head {
    background-color: gray;
}
</style>

Class Attribute values used for scripts

Javascript can perform certain tasks on the elements with a class attribute by accessing the elements using the method getElementsByClassName() within the script.

In the below example, when the Javascript method highlightHeadings() is invoked, the script will turn the text color to red on all the elements containing the class highlight.

<script>
function highlightHeadings() {
    var x = document.getElementsByClassName("highlight");
    for (var i = 0; i < x.length; i++) {
        x[i].style.color = "red";
    }
}
</script>

Examples

The below example has the markup that explains all the above examples.

Run this using online IDE

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .head {
            background-color: gray;
        }
    </style>
</head>
<body>
    <h1>HTML Class Attribute</h1>
    <button onclick="highlightHeadings()">Highlight Headings</button>
    
    <h2 class="head highlight">Heading One</h2>
    <p class="para">Paragraph One text goes here.</p>

    <h2 class="head highlight">Heading Two</h2>
    <p class="para">Paragraph Two text goes here.</p>

    <h2 class="head highlight">Heading Three</h2>
    <p class="para">Paragraph Three text goes here.</p>

    <script>
        function highlightHeadings() {
            var x = document.getElementsByClassName("highlight");
            for (var i = 0; i < x.length; i++) {
                x[i].style.color = "red";
            }
        }
    </script>
</body>
</html>

Overall

HTML Class Attribute comes in handy for applying styles and scripts for single or multiple HTML elements across an HTML document.