Go Tutorial

Introduction to ID and Class Attributes

HTML id and class attributes are used to identify and style elements. While both serve similar purposes, they have distinct characteristics and use cases.

ID Attribute

1. Understanding ID Attribute

The id attribute specifies a unique identifier for an HTML element. Each ID must be unique within the entire document.

Key Characteristics:

  • Must be unique in the entire document
  • Used for unique element identification
  • Can be targeted by CSS and JavaScript
  • Used for anchor links (page navigation)
  • Case-sensitive

2. ID Syntax and Usage

Proper syntax and examples of using ID attributes.

Code Example:

<!-- Basic ID usage -->
<div id="header">Website Header</div>
<section id="main-content">Main Content Area</section>
<footer id="page-footer">Footer Content</footer>

<!-- ID with CSS -->
<style>
#header {
  background-color: #333;
  color: white;
  padding: 20px;
}

#main-content {
  padding: 40px;
  background-color: #f8f9fa;
}

#page-footer {
  background-color: #222;
  color: white;
  text-align: center;
  padding: 20px;
}
</style>

<!-- ID with JavaScript -->
<script>
const header = document.getElementById('header');
header.style.fontSize = '24px';
</script>

<!-- Anchor links with ID -->
<a href="#main-content">Skip to main content</a>

Output:

Website Header
Main Content Area
Footer Content
Skip to main content

3. ID Best Practices

  • Use descriptive and meaningful names
  • Use kebab-case (hyphens) for multiple words: main-content
  • Start with a letter (not a number or special character)
  • Avoid using reserved words
  • Keep IDs concise but descriptive

Class Attribute

1. Understanding Class Attribute

The class attribute specifies one or more class names for an element. Classes can be reused across multiple elements.

Key Characteristics:

  • Can be used on multiple elements
  • Multiple classes can be applied to one element
  • Used for grouping and styling similar elements
  • Not unique (same class can be used many times)
  • Case-sensitive

2. Class Syntax and Usage

Proper syntax and examples of using class attributes.

Code Example:

<!-- Single class -->
<div class="container">Content</div>
<p class="text-center">Centered text</p>

<!-- Multiple classes -->
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>

<!-- Class with CSS -->
<style>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.text-center {
  text-align: center;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}
</style>

<!-- Class with JavaScript -->
<script>
const buttons = document.querySelectorAll('.btn');
buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    console.log('Button clicked!');
  });
});
</script>

Output:

Container Content

Centered text paragraph

3. Class Naming Conventions

BEM Methodology

.block__element--modifier

Example: .card__title--large

SMACSS

.l-header, .module-name

Example: .l-grid, .user-profile

OOCSS

.object-modifier

Example: .button-disabled

ID vs Class: Key Differences

CharacteristicID AttributeClass Attribute
Uniqueness✅ Must be unique❌ Can be reused
Multiple values❌ Single value only✅ Multiple classes allowed
CSS specificityHigh (0,1,0,0)Low (0,0,1,0)
JavaScript targetinggetElementById()getElementsByClassName()
Use caseUnique elements, anchorsReusable styles, groups
PerformanceFaster (browser optimized)Slower (multiple elements)

CSS Specificity Example

Code Example:

<style>
/* ID selector - higher specificity */
#main-content {
  color: blue;
}

/* Class selector - lower specificity */
.content {
  color: red;
}

/* Element selector - lowest specificity */
div {
  color: green;
}
</style>

<div id="main-content" class="content">
  This text will be BLUE because ID has higher specificity
</div>

Output:

This text will be BLUE because ID has higher specificity

Practical Examples

1. Form with ID and Classes

Using both ID and class attributes in a form.

Code Example:

<!-- HTML -->
<form id="contact-form" class="form-container">
  <div class="form-group">
    <label for="name-input">Name:</label>
    <input type="text" id="name-input" class="form-input" required>
  </div>
  
  <div class="form-group">
    <label for="email-input">Email:</label>
    <input type="email" id="email-input" class="form-input" required>
  </div>
  
  <div class="form-group">
    <label for="message-input">Message:</label>
    <textarea id="message-input" class="form-input form-textarea" required></textarea>
  </div>
  
  <div class="form-actions">
    <button type="submit" class="btn btn-submit">Send Message</button>
    <button type="reset" class="btn btn-cancel">Cancel</button>
  </div>
</form>

<!-- CSS -->
<style>
.form-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-submit {
  background-color: #28a745;
  color: white;
}

.btn-cancel {
  background-color: #dc3545;
  color: white;
}
</style>

Output:

2. Navigation Menu

Using classes for reusable navigation components.

Code Example:

<!-- HTML -->
<nav id="main-navigation" class="navbar">
  <div class="nav-brand">
    <a href="#" class="brand-link">MyWebsite</a>
  </div>
  
  <ul class="nav-menu">
    <li class="nav-item">
      <a href="#home" class="nav-link active">Home</a>
    </li>
    <li class="nav-item">
      <a href="#about" class="nav-link">About</a>
    </li>
    <li class="nav-item">
      <a href="#services" class="nav-link">Services</a>
    </li>
    <li class="nav-item">
      <a href="#contact" class="nav-link">Contact</a>
    </li>
  </ul>
</nav>

<!-- CSS -->
<style>
.navbar {
  background-color: #2c3e50;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-brand .brand-link {
  color: white;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
}

.nav-link {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 3px;
  transition: background-color 0.3s;
}

.nav-link:hover,
.nav-link.active {
  background-color: #3498db;
}
</style>

Best Practices

When to Use ID

  • Unique page elements (header, footer, main content)
  • Anchor links for page navigation
  • JavaScript DOM manipulation
  • Form element labels
  • When you need high CSS specificity

When to Use Class

  • Reusable styling across multiple elements
  • Component-based styling
  • State modifications (active, disabled, hidden)
  • Grouping related elements
  • When you want lower CSS specificity

Naming Conventions

  • Use meaningful, descriptive names
  • Follow a consistent naming methodology
  • Use kebab-case for multiple words
  • Avoid presentational names (red-text, big-button)
  • Keep names concise but clear

Performance Tips

  • Use IDs for frequently accessed elements
  • Avoid overly specific CSS selectors
  • Use classes for bulk styling
  • Minimize deep nesting in CSS
  • Consider CSS methodologies for scalability

Common Mistakes to Avoid

  • Using the same ID on multiple elements
  • Overusing ID selectors in CSS
  • Creating overly specific CSS selectors
  • Using presentational class names
  • Not following a consistent naming convention
  • Forgetting to use classes for reusable styles
Logo

HiFi Toolkit is a free online platform offering essential tools and converters for developers, designers, and everyday productivity tasks.

Follow Us

Our Tools
Our Company
Special Tools

© 2026 HiFi Toolkit. All rights reserved.

Terms & ConditionsPrivacy Policy