HTML Classes and IDs

Master the distinction between classes and IDs, and learn when to use each for optimal HTML structure and CSS styling.

Understanding Classes and IDs

Classes and IDs are fundamental HTML attributes that serve as selectors for CSS styling and JavaScript functionality. While both provide ways to target specific elements, they have distinct purposes and usage patterns that every web developer must understand.

The key difference lies in uniqueness and reusability: IDs must be unique on a page and identify single elements, while classes can be reused across multiple elements to apply consistent styling or behavior.

🎯 Key Concept

IDs are for unique identification (like a social security number), while classes are for grouping elements with shared characteristics (like a club membership).

HTML ID Attribute

The ID attribute provides a unique identifier for a single element on the page: 

<!-- Unique identification -->
<header id="main-header">
    <h1>Website Title</h1>
</header>

<nav id="primary-navigation">
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</nav>

<main id="content">
    <section id="home">
        <h2>Home Section</h2>
    </section>
    
    <section id="about">
        <h2>About Section</h2>
    </section>
</main>

<footer id="site-footer">
    <p>Copyright information</p>
</footer>
ID Usage Rules:
  • Must be unique per page (only one element per ID)
  • Case-sensitive
  • Cannot contain spaces
  • Must start with a letter (a-z, A-Z)
  • Can contain letters, digits, hyphens, and underscores

HTML Class Attribute

The class attribute groups elements that share common styling or functionality: 

<!-- Multiple elements with same class -->
<article class="blog-post featured">
    <h2 class="post-title">First Post</h2>
    <p class="post-excerpt">This is the excerpt...</p>
    <a href="#" class="btn btn-primary">Read More</a>
</article>

<article class="blog-post">
    <h2 class="post-title">Second Post</h2>
    <p class="post-excerpt">Another excerpt...</p>
    <a href="#" class="btn btn-secondary">Read More</a>
</article>

<!-- Form elements with classes -->
<form class="contact-form">
    <div class="form-group">
        <label class="form-label required">Name</label>
        <input type="text" class="form-input">
    </div>
    
    <div class="form-group">
        <label class="form-label">Email</label>
        <input type="email" class="form-input">
    </div>
</form>

Single Class

class="primary-button"

Simple styling for one purpose

Multiple Classes

class="btn btn-large btn-primary"

Modular approach for complex styling

CSS Targeting

Understanding how to target classes and IDs in CSS is crucial for effective styling: 

/* CSS targeting examples */

/* Target ID with # */
#main-header {
    background-color: #333;
    color: white;
    padding: 20px;
}

/* Target class with . */
.blog-post {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #ddd;
}

/* Target multiple classes */
.btn.btn-primary {
    background-color: #007bff;
    color: white;
}

/* Combine ID and class targeting */
#content .featured {
    border-left: 4px solid #ff6b6b;
}

/* Target elements within an ID */
#primary-navigation ul li a {
    text-decoration: none;
    display: block;
    padding: 10px 15px;
}

Practical Implementation

<!-- Complete page structure example -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Classes and IDs Example</title>
    <style>
        /* ID styles */
        #page-header { background: #333; color: white; }
        #sidebar { width: 250px; float: left; }
        
        /* Class styles */
        .card { border: 1px solid #ddd; padding: 15px; }
        .highlight { background-color: yellow; }
        .text-center { text-align: center; }
    </style>
</head>
<body>
    <header id="page-header" class="text-center">
        <h1>My Website</h1>
    </header>
    
    <aside id="sidebar" class="card">
        <h3>Navigation</h3>
        <ul>
            <li>Home</li>
            <li>About</li>
        </ul>
    </aside>
    
    <main id="main-content">
        <article class="card highlight">
            <h2>Important Article</h2>
            <p>This content is highlighted and styled as a card.</p>
        </article>
        
        <article class="card">
            <h2>Regular Article</h2>
            <p>This content uses only the card class.</p>
        </article>
    </main>
</body>
</html>

When to Use Classes vs IDs

Use IDs For:

  • Unique page sections (header, footer, nav)
  • JavaScript targeting
  • Form labels and inputs
  • Internal page links (anchors)
  • Specific styling overrides
  • Modal dialogs and popups

Use Classes For:

  • Reusable styling patterns
  • Component-based design
  • Utility classes (text-center, hidden)
  • State classes (active, disabled)
  • Responsive design modifiers
  • Theme variations

Best Practices

✅ Do

  • Use semantic, descriptive names
  • Follow consistent naming conventions
  • Use hyphens to separate words
  • Keep names readable and meaningful
  • Use classes for styling, IDs for unique identification
  • Combine classes for modular design

❌ Avoid

  • Duplicate IDs on the same page
  • Names based on appearance (red-text, big-box)
  • Special characters except hyphens and underscores
  • Starting with numbers or special characters
  • Overly generic names (content, text, box)
  • Using IDs for repeated elements