HTML class Attribute
The HTML class attribute is one of the most versatile and commonly used attributes in web development. It allows developers to assign one or more class names to an HTML element, enabling grouping, styling, and dynamic behavior with CSS and JavaScript. The class attribute is essential for building modern, responsive, and well-structured web pages.
What is the HTML class Attribute?
The class attribute in HTML is used to assign a name (or multiple names) to an element. These names are used to group elements for styling purposes with CSS or to target them in JavaScript for scripting purposes.
Syntax of the class Attribute
<element class="class-name">
Content goes here...
</element>
You can assign multiple classes by separating class names with a space.
<element class="class1 class2 class3">
Content goes here...
</element>
Tip: The class attribute can be used on any HTML element.
Note: The class name is case sensitive!
Tip: You can learn much more about CSS in our CSS Tutorial.
Key Features of the HTML class Attribute
- Used to group elements logically.
- Allows the application of consistent styles using CSS.
- Can target elements dynamically using JavaScript.
- Supports multiple class names on a single element.
Examples of the class Attribute in Action
Example 1: Styling Elements with the class Attribute
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p class="highlight">This paragraph is highlighted.</p>
<p>This paragraph is not highlighted.</p>
</body>
</html>
Example 2: Applying Multiple Classes
<style>
.city {
color: red;
}
.main{
font-weight: bold;
}
</style>
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
Example 3: Targeting Classes with JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.clicked {
color: green;
}
</style>
</head>
<body>
<p class="message">Click me to change color!</p>
<script>
document.querySelector('.message').addEventListener('click', function() {
this.classList.add('clicked');
});
</script>
</body>
</html>
Different Elements Can Share Same Class
Different HTML elements can point to the same class name.
In the following example, both <h2> and <p> point to the "city" class and will share the same style:
<h2 class="country">India</h2>
<p class="country">India one of the most beautifull country</p>
Best Practices for Using the class Attribute
- Use meaningful and descriptive class names (e.g.,
.button-primary). - Avoid overly generic class names like
.redor.boxunless necessary. - Use kebab-case for class names (e.g.,
.main-header). - Keep class names consistent across your project for better maintainability.
Chapter Summary
- The HTML
class attribute specifies one or more class names for an element - Classes are used by CSS and JavaScript to select and access specific elements
- The
class attribute can be used on any HTML element - The class name is case sensitive
- Different HTML elements can point to the same class name
- JavaScript can access elements with a specific class name with the
getElementsByClassName() method
class attribute specifies one or more class names for an elementclass attribute can be used on any HTML elementgetElementsByClassName() methodHow to Use the class Attribute
- Add the
classattribute to an HTML element. - Define styles in your CSS file or inside a
<style>block. - Optionally, use JavaScript to interact with the class dynamically.
FAQs About the class Attribute
- Can I assign multiple classes to an element?
- Yes, you can assign multiple classes to an element by separating them with spaces.
- What is the difference between the
idandclassattributes? - The
idattribute is unique and can only be used once per page, while theclassattribute can be reused on multiple elements. - Can I combine the
classattribute with inline styles? - Yes, you can use both the
classattribute and inline styles on the same element, though it is better to keep styling in CSS for maintainability.