HTML Classes and IDs

Name elements so CSS and JavaScript can find them.

Lesson 24 of 44Beginner11 min read

class and id are attributes you add to elements so you can find them later: with CSS to style them, or with JavaScript to make them do something. On their own they don't change how anything looks. They are name tags.

As soon as a page has more than a few elements, you need a reliable way to point at "this paragraph" or "all of these cards". Classes and ids are that way. Almost every CSS rule and most JavaScript code you write will start by selecting elements through them.

The class attribute: a reusable label

  • Many elements can share the same class.
  • One element can have several classes, separated by spaces.
HTML
<p class="note">Remember to save your work.</p>
<p class="note warning">This cannot be undone.</p>

In CSS you target a class with a dot: .note { … }. Every element with that class gets the style, so you write the rule once and reuse it as often as you like.

Combining classes is a powerful habit. Above, both paragraphs get the shared note style, and the second also gets the extra warning style.

The id attribute: a unique name

  • An id must be unique on the page. Only one element can have it.
  • One element has at most one id.
HTML
<section id="pricing">…</section>

In CSS you target an id with a hash: #pricing { … }. Ids are also used for jump links (href="#pricing"), for connecting a <label> to its input, and by JavaScript to grab one specific element.

Naming rules and good habits

  • Names are case-sensitive: Card and card are different.
  • A single name can't contain spaces, because a space starts another class.
  • Use lowercase words joined by hyphens: product-card, main-nav.
  • Name things by what they are, not how they look. error-message stays correct if the colour changes from red to orange, but red-text doesn't.
  • Prefer classes for styling. Keep ids for jump links, form labels and JavaScript hooks.

Why classes are preferred for styling

Ids have a very high priority in CSS. A rule written for an id beats almost any class rule, which makes styles hard to override later. Ids also can't be reused, so a style written for #promo-box can't be shared with a second box. Classes avoid both problems, which is why most professional stylesheets contain hardly any id selectors. You'll see the reasons in detail in CSS Specificity.

HTML Class and ID Syntax

class and id

<div id="unique-name" class="name another-name">…</div>
#unique-name { }   /* one element  */
.name { }          /* every element with that class */

HTML Class and ID Summary

  • class and id label elements so CSS and JavaScript can find them.
  • Many elements can share a class, and one element can have several classes.
  • An id must be unique on the page.
  • Target classes in CSS with .name and ids with #name.
  • Name classes by purpose, in lowercase with hyphens, and prefer classes for styling.

HTML Class and ID Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Styling with classes

Three cards share card; one also has featured. Add featured to another card and run.

<div class="card">Basic: £0</div>
<div class="card featured">Pro: £9</div>
<div class="card">Team: £29</div>

<style>
  .card { padding: 12px 16px; margin: 8px 0; border: 2px solid #ccc; border-radius: 10px; }
  .featured { border-color: #17a865; background: #d6f4e4; font-weight: bold; }
</style>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 1 to 3All three share the card class, so they get the same base style.
  2. Line 2The middle card has two classes: card and featured.
  3. Line 6.card styles every card.
  4. Line 7.featured adds extra style only to cards with that class.
Example 2

id for a jump link and JavaScript

Click the button: JavaScript finds the element by its id and changes it.

<a href="#booking">Jump to booking ↓</a>
<p style="height: 200px">…</p>
<h2 id="booking">Book a table</h2>
<p id="status">No table booked yet.</p>
<button onclick="document.getElementById('status').textContent = 'Table booked for 7pm.'">Book now</button>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1The link targets the element with id="booking".
  2. Line 4A unique id makes this paragraph easy to find from JavaScript.
  3. Line 5getElementById('status') finds it and changes its text. You'll learn this in DOM Selecting.

Common HTML Class and ID Mistakes

Using the same id twice

Don't
<p id="price">£10</p>
<p id="price">£20</p>
Do
<p class="price">£10</p>
<p class="price">£20</p>

Duplicate ids break jump links, labels and JavaScript, which only ever finds the first one.

Commas or dots in the class attribute

Don't
<div class=".card, featured">…</div>
Do
<div class="card featured">…</div>

The dot is only for CSS. In HTML, separate class names with spaces.

HTML Class and ID in Real Projects

Design systems run on classes

Large websites have "design systems": libraries of reusable components like .btn, .btn-primary, .card and .alert. Developers build pages by mixing these classes, just like the card featured example. Frameworks like Tailwind CSS take this further with classes like p-4 and text-center.

HTML Class and ID Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Give the paragraph two classes: tip and small.

<p class="">Drink water while you code.</p>
Multiple choiceeasy

How many elements on a page can share the same id?

Multiple choicemedium

Which is the best class name for a box that shows form errors?

Fix the bugmedium

Both alerts should get the warning style, but they're using the same id and the CSS targets a class. Fix the HTML.

<p id="alert">Low battery</p>
<p id="alert">Storage almost full</p>

<style>
  .alert { background: #fff1c2; padding: 8px; border-left: 4px solid orange; }
</style>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Both paragraphs have the class "alert"
  • No duplicate ids
  • The style is applied

HTML Class and ID Quiz

3 questions to check what you learned.

  1. In CSS, how do you select elements with class="box"?

    • #box
    • box
    • *box
    • .box

  2. Can one element have more than one class?

    • No, only one
    • Yes, separated by commas
    • Yes, separated by spaces
    • Only if it has no id

  3. Which is a good use for an id?

    • Styling every button
    • The target of a jump link like #contact
    • Styling all paragraphs
    • Grouping list items

HTML Class and ID Challenge

Label a menu

Create three <li> items in a <ul id="menu">:

  1. All three items have the class item
  2. The second item also has the class active
<ul>

</ul>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The list has the id "menu"
  • Three items with the class "item"
  • Only the second item is active

Related HTML topics

23Div, Span & Block/InlineWhy some elements stack and others flow, and the two generic containers.04SelectorsTarget exactly the elements you want by tag, class, id, family or attribute.33DOM: Selecting ElementsFind elements on the page with querySelector, querySelectorAll and friends.
Esc
↑↓ to navigateEnter to open