HTML Classes

HTML Classes: Grouping Elements for CSS and JavaScript

The HTML class attribute assigns one or more reusable labels to an element so CSS stylesheets and JavaScript scripts can target groups of elements at once. Unlike unique identifiers, you can apply the same class name to dozens of elements across your entire website.

Using Single and Multiple Classes

Separate multiple class names inside the same class attribute using spaces. This pattern lets you build a base component class—such as btn—and combine it with modifier classes like btn-primary or btn-large.

In CSS, target a class by prefixing its name with a period (.card). In JavaScript, select all matching elements with document.querySelectorAll('.card') or toggle classes dynamically with element.classList.toggle('active').

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Classes Demo</title>
    <style>
        .alert { padding: 12px 16px; border-radius: 6px; margin-bottom: 10px; font-family: system-ui, sans-serif; }
        .alert-info { background: #e0f2fe; color: #075985; border-left: 4px solid #0284c7; }
        .alert-warn { background: #fef3c7; color: #92400e; border-left: 4px solid #d97706; }
    </style>
</head>
<body>
    <div class="alert alert-info">Backup finished in 4 seconds.</div>
    <div class="alert alert-warn">Disk space is below 15% capacity.</div>
</body>
</html>

Naming Conventions That Scale

Choose semantic names describing what an element represents—like pricing-card or nav-link—rather than visual names like blue-box. If your brand color changes from blue to green later, you only edit one CSS file without renaming HTML classes across fifty templates.

Class names are case-sensitive in CSS and JavaScript. Stick to lowercase words joined by hyphens (kebab-case) so team members never guess casing.

Common Mistakes to Avoid

• Putting spaces inside a single class name: Writing class="main card" applies two separate classes (main and card), not one class.
• Starting a class name with a number: Class names like .1st-card are invalid in standard CSS selectors without awkward escaping.
• Overloading one element with conflicting utility classes: Keep class lists clear and remove dead classes during refactors.

Frequently Asked Questions

Can one HTML element belong to multiple classes?

Yes. List multiple space-separated names inside class="card highlighted compact", and the element inherits styles from all matching CSS rules.

Are HTML class names case-sensitive?

Yes. .NavCard and .navcard count as two distinct classes in CSS and JavaScript selectors.