HTML Classes

The HTML class attribute is used to specify one or more class names for an element. Classes are used to style elements with CSS and to select elements with JavaScript. Multiple elements can have the same class, making it perfect for reusable styling and functionality.

Basic Class Syntax

The class attribute can contain one or more class names, separated by spaces:

<!-- Single class -->
<div class="container">Content here</div>

<!-- Multiple classes -->
<div class="container blue large">Content here</div>

<!-- Classes on different elements -->
<h1 class="title main-title">Main Title</h1>
<p class="content">Paragraph content</p>
<button class="btn primary">Click Me</button>

Class Naming Rules

Here are the rules for naming classes in HTML:

Valid Class Names

These are valid class names:

<!-- Valid class names -->
<div class="header">Header</div>
<div class="main-content">Main Content</div>
<div class="button-primary">Primary Button</div>
<div class="nav_item">Navigation Item</div>
<div class="sidebar2">Sidebar 2</div>

Class Naming Rules:

Here are the rules for naming classes in HTML:

Invalid Class Names:

These are invalid class names:

<!-- Invalid class names -->
<div class="1header">Invalid: starts with number</div>
<div class="header content">Invalid: contains space</div>
<div class="header@content">Invalid: contains special character</div>

Practical Examples

Here are some practical examples of using classes in HTML:

Card Components

Here is an example of a card component:

<!-- HTML -->
<div class="card">
  <div class="card-header">
    <h3 class="card-title">Card Title</h3>
  </div>
  <div class="card-body">
    <p class="card-text">Card content goes here.</p>
    <button class="btn btn-primary">Learn More</button>
  </div>
</div>

Utility Classes

Utility classes are single-purpose classes that do one specific thing:

<!-- HTML with utility classes -->
<div class="text-center margin-bottom-20 padding-10">
  <h1 class="text-large font-bold color-blue">Centered Title</h1>
  <p class="text-small color-gray">Subtitle text</p>
</div>

State Classes

Classes can be used to represent different states of elements:

<!-- State classes -->
<button class="btn active">Active Button</button>
<button class="btn disabled">Disabled Button</button>
<div class="alert error">Error message</div>
<div class="alert success">Success message</div>
<div class="loading">Loading content...</div>

Class Naming Conventions

Here are some common class naming conventions:

BEM (Block Element Modifier)

BEM is a popular naming convention that stands for Block, Element, and Modifier:

<!-- BEM naming convention -->
<div class="card">
  <h2 class="card__title">Card Title</h2>
  <p class="card__text">Card text</p>
  <button class="card__button card__button--primary">Primary Button</button>
  <button class="card__button card__button--secondary">Secondary Button</button>
</div>

Common Patterns

Here are some common class naming patterns:

<!-- Component-based naming -->
<div class="navigation">
  <ul class="navigation__list">
    <li class="navigation__item navigation__item--active">Home</li>
    <li class="navigation__item">About</li>
    <li class="navigation__item">Contact</li>
  </ul>
</div>

<!-- Utility-based naming -->
<div class="flex justify-center items-center p-4">
  <h1 class="text-2xl font-bold text-blue-600">Title</h1>
</div>

Best Practices

Here are some best practices for using classes in HTML: