id / class

id and class are global attributes that can be applied to almost all HTML elements. id gives an element a unique name to identify it, while class gives a name used to group multiple elements together. You use them to apply CSS styles or manipulate elements with JavaScript.

Syntax

<!-- Specifying an id -->
<div id="header">...</div>

<!-- Specifying a class -->
<p class="text-red">...</p>

<!-- Specifying multiple classes (space-separated) -->
<p class="text-large text-bold">...</p>

<!-- Specifying both id and class -->
<section id="about" class="section-wrapper">...</section>

Attribute list

Attribute	Description
id	Specifies a unique name that identifies the element. The same id cannot be used on more than one element per page.
class	Specifies the class name(s) the element belongs to. Multiple classes can be listed, separated by spaces. The same class name can be used on multiple elements.

Usage in CSS

Selector	Description
#id-name	Prefix the id with `#` to target it. Example: `#header { background: #fff; }`
.class-name	Prefix the class with `.` to target it. Example: `.text-red { color: red; }`

Sample code

<style>
  /* id selector (#) */
  #main-title {
    font-size: 2rem;
    color: #333;
  }

  /* class selector (.) */
  .highlight {
    background-color: yellow;
  }

  /* Apply styles to multiple elements sharing the same class */
  .btn {
    padding: 8px 16px;
    border-radius: 4px;
  }
  .btn-primary {
    background-color: blue;
    color: white;
  }
</style>

<!-- Uniquely identified by id -->
<h1 id="main-title">Main Title</h1>

<!-- Apply styles to multiple elements using a class -->
<p>Regular text and <span class="highlight">highlighted text</span>.</p>

<!-- Combining multiple classes -->
<button class="btn btn-primary">Submit</button>
<button class="btn">Cancel</button>

Result

The heading gets a larger font size and color. The element with the highlight class displays a yellow background. Both buttons share the btn style, and the submit button additionally gets a blue background with white text.

Notes

An id must be unique within a page. Using the same id on more than one element is a violation of the HTML specification. If ids are duplicated, document.getElementById() in JavaScript will only return the first matching element.

A class name can be reused as many times as needed. You can apply CSS to all elements sharing a class name at once, or use document.querySelectorAll(".class-name") in JavaScript to select and manipulate them together.

Names cannot start with a digit and cannot contain spaces. When joining multiple words, use a hyphen (e.g., main-title) or an underscore (e.g., main_title).