06. class Attribute

Introduction

The class attribute assigns one or more class names to HTML elements, allowing you to group elements for CSS styling and JavaScript selection. Unlike id, multiple elements can share the same class name. Understanding how to use the class attribute effectively is essential for creating maintainable, styled web pages.

Basic Usage

<p class="highlight">Highlighted text</p>
<div class="container">Content</div>

Multiple Classes

<div class="container main featured">Content</div>

Common Use Cases

CSS Styling

<p class="error">Error message</p>

<style>
    .error {
        color: red;
        font-weight: bold;
    }
</style>

JavaScript Selection

<button class="btn-primary">Click Me</button>

<script>
    document.querySelectorAll('.btn-primary').forEach(btn => {
        btn.addEventListener('click', function() {
            // Handle click
        });
    });
</script>

Reusable Styles

<p class="highlight">Text 1</p>
<p class="highlight">Text 2</p>
<p class="highlight">Text 3</p>

Best Practices

Semantic Class Names

<!-- Good: Semantic names -->
<div class="article-header">Header</div>
<div class="error-message">Error</div>

<!-- Avoid: Presentational names -->
<div class="red-text">Text</div>
<div class="big-box">Content</div>

Consistent Naming

<!-- Good: Consistent convention -->
<div class="btn-primary">Button</div>
<div class="btn-secondary">Button</div>

<!-- Avoid: Inconsistent -->
<div class="button">Button</div>
<div class="btn">Button</div>

References

• MDN Web Docs - Global attributes - class