class Attribute - HTML: Hypertext Markup Language

Understanding and using class attributes in HTML - Purpose of the class attribute in HTML

The HTML class attribute is utilized to determine one or more additional class names for an element. Generally, the class attribute points to a class in a style sheet. The class name is case-sensitive.

JavaScript can also use this attribute via the HTML DOM to make specific modifications to HTML elements with a specified class name.

In HTML5, you can use the class attribute for any HTML element.

In HTML 4.01, the class attribute cannot be operated with the following elements: <head>, <html>, <base>, <basefont>, <param>, <style>, <meta>, <script>, and <title>.

Although there aren’t specific needs for the name of classes, it’s more OK to use names representing the semantic purpose of the element and not its presentation. 

The name should start with a letter a-z or A-Z, and it can be followed by letters, digits (0-9), underscores ("_"), and hyphens ("-").

Note: Multiple HTML elements can also share the same class Attribute.

class Attribute - HTML Hypertext Markup Language

{tocify} $title={Table of Contents}

The Syntax For Class

<tag class="your_classname"></tag>{codeBox}

using class attributes in HTML

The class attribute is often utilized to point to a class name in a style sheet. 

JavaScript can also be used to access and manipulate elements with the specific class name.

In the following example, we have 3 <div> elements with a class attribute with the value of “city.”

All of the 3 <div> elements will be styled equally according to the .city style characterization in the head section:

Example -

<!DOCTYPE html>
<html>

<head>
<style>

.city {
background-color: crimson;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>

<div class="city">
<h3>Florida</h3>
<p>Florida is the capital of Tallahassee.</p>
</div>
<div class="city">
<h3>Missouri</h3>
<p>Missouri is the capital of Jefferson City.</p>
</div>
<div class="city">
<h3>New York</h3>
<p>Tokyo is the capital of Albany.</p>
</div>

</body>
</html>{codeBox}

In the next example, we have 2 <span> elements with a class attribute with the value of "note." Both <span> elements will be styled equally according to the .note style definition in the head section:

<!DOCTYPE html>
<html>

<head>
<style>

.note {
font-size: 120%;
color: blue;
}
</style>

</head>
<body>

<h3>My <span class="note">Important</span> Heading</h3>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>{codeBox}

Multiple Classes

HTML elements can belong to more than one class.

To specify multiple classes, divide the class names with a space, e.g., <div class="city main">. The element will be styled according to all the classes defined.

In the following example, the first <h3> element belongs to both the city class and also to the main class and will obtain the CSS styles from both of the classes:

Example -

<!DOCTYPE html>
<html>

<head>
<style>

.city {
background-color: red;
color: white;
padding: 10px;
}
.main {
text-align: center;
}
</style>

</head>
<body>

<h3>Multiple Classes</h3>

<p>Here, all three h3 elements belongs to the "city" class. In addition, Florida also belongs to the "main" class, which center-aligns the text.</p>

<h2 class="city main">Florida</h2>
<h2 class="city">Missouri</h2>
<h2 class="city">New York</h2>

 </body>
</html>{codeBox}

Different Elements Can Share Same Class

Various HTML elements can point to the same class name.

In the following example, both <h3> and <p> point to the "city" class and will convey the same style:

Example -

<html>
<head>
<style>

.city {
background-color: red;
color: white;
padding: 10px;
}
</style>

</head>
<body>
<h2>Different Elements Can Share Same Class</h2>

<p>Even if the two elements do not have the same tag name, they can both point to the same class, and get the same CSS styling:</p>

<h3 class="city">Paris</h3>
<p class="city">Paris is the capital of France.</p>

</body>
</html>{codeBox}

Use of The class Attribute in JavaScript

JavaScript can also use the class name to perform certain tasks for specific elements.

JavaScript can access elements with a specific class name with the getElementsByClassName() method:

Example -

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>{codeBox}

Article Summary

  • The HTML class attribute defines one or more class names for an element
  • Classes are operated by CSS and JavaScript to select and access specific elements
  • The class attribute can be utilized on any HTML element
  • The class name is case sensitive
  • Various HTML elements can point to the same class name
  • JavaScript can access elements with a specific class name with the getElementsByClassName() method

Conclusion:

Friends, according to my expertise, I have written complete information to help you with “class Attribute - HTML: HyperText Markup Language.” If this post is favorable for you or not, please tell me by commenting.

If you liked this post, do not forget to share it with your friends so they can get information about it.

You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.

Please tell us through the comment section if you think we miss anything.

To be published, comments must be reviewed by the administrator.*

Previous Post Next Post