HTML - Global class Attribute

HTML class is a global attribute that is used to specify the class name for the current element or tag.

Classes allow CSS and JavaScript to select and access specific elements via class selectors or functions like the DOM Method "document.getElementsByClassName".

Syntax

<element class  = "class_Name" >

Applies On

Almost all the HTML tags supports usage of class attribute. However, there are a few HTML tags that do not support the class attribute, typically because they are void elements or have a specific purpose that doesn't involve styling or scripting in the usual way. For example <html>, <title>, <head>, <script>, <base> and <meta> does not support class attribute.

Example of HTML class Attribute

Bellow examples will illustrate the HTML accesskey attribute, where and how we should use this attribute!

Using defined class in CSS

In the following example, we are creating an HTML document and using the class attributes to style the content of the elements, as follows

<!DOCTYPE html>
<html>

<head>
   <style>
      .brand {
         font-size: 30px;
         color: green;
      }

      .point {
         font-size: 26px;
         color: black;
      }

      .caption {
         font-size: 20px;
         font-style: italic;
      }
   </style>
</head>

<body>
   <p>
      This is example of class attribute
   </p>
   <h2 class="brand">
      tutorials 
         <span class="point">
            point
         </span>
   </h2>
   <p class="caption">Easy to Learn!</p>
</body>

</html>

Multiple classes for same tag

We can provide any number of classes to an HTML tag, each should space separated. Here we provided three classes.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Multiple Classes Example</title>
   <style>
      .class1 {
         color: blue;
      }
      .class2 {
         font-weight: bold;
      }
      .class3 {
         background-color: yellow;
      }
   </style>
</head>

<body>
   <h2 class="class1 class2 class3">
      This is a heading with three classes for styling
   </h2>
</body>

</html>

Single Class in Multiple Tags

We can use a class name for any number of tags. All the tags with that class get same type of styling

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Same Class for Multiple Tags</title>
    <style>
        .shared-class {
            color: green;
            font-style: italic;
        }
    </style>
</head>

<body>
   <h1 class="shared-class">
      This is a heading with a shared class
   </h1>
   <p class="shared-class">
      This is a paragraph with the same shared class
   </p>
</body>

</html>

Supported Browsers

Attribute
class	Yes	Yes	Yes	Yes	Yes

html_attributes_reference.htm