HTML id, class and data-* Attributes: Naming Elements for CSS and JavaScript

To style an element with CSS or work with it in JavaScript, you first need a way to find it. The id and class attributes give elements names, and data-* attributes store extra information on them.

id: one unique element#

An id names one element. No two elements on the same page may share an id:

<section id="pricing">
  <h2>Pricing</h2>
</section>

Ids are used for:

• fragment links: <a href="#pricing"> jumps to this section (Page Anchors);
• connecting a <label for="..."> to its field;
• finding one element in JavaScript: document.getElementById("pricing").

class: a group of elements#

A class names a group. Many elements can share a class, and one element can have several classes, separated by spaces:

<style>
  .card { border: 1px solid #ccc; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
  .featured { border-color: #2f5fe0; background: #eef3ff; }
  .price { font-weight: bold; }
</style>

<div class="card">
  <h3>HTML course</h3>
  <p class="price">Free</p>
</div>
<div class="card featured">
  <h3>Full web bundle</h3>
  <p class="price">Free</p>
</div>

Both boxes get the card styles; the second also gets the featured styles. In CSS, a class is selected with a dot (.card) and an id with a hash (#pricing).

id or class?#

Most styling is done with classes. Ids have very high priority in CSS, which makes styles hard to override, so many teams avoid styling by id.

Naming#

• Names are case-sensitive: Card and card are different classes.
• Names cannot contain spaces (a space separates two class names).
• Describe what something is, not how it looks: class="error-message" is better than class="red-text", because the colour may change later.
• Common styles: lowercase with hyphens (product-card), which is the most widespread convention in HTML and CSS.

data-* attributes#

You cannot invent attributes in HTML, except those starting with data-. They store extra information for your own scripts and styles:

<style>
  [data-status="sold-out"] { color: #999; text-decoration: line-through; }
</style>
<ul>
  <li data-product-id="101" data-status="available">Blue notebook</li>
  <li data-product-id="102" data-status="sold-out">Red pen</li>
</ul>

• CSS can select them with attribute selectors, as above.
• JavaScript reads them through element.dataset: data-product-id becomes dataset.productId.
• They are visible in the page source, so never store secrets in them.

Common mistakes#

Practice#

<p><a href="#most-useful-tip">Jump to the most useful tip</a></p>
<p class="tip">Label every form field.</p>
<p class="tip important" id="most-useful-tip">Use meaningful elements before div and span.</p>
<p class="tip" data-topic="forms">Use type="email" for email addresses.</p>

Key takeaway#