Skip to main content
HTML for Beginners
CHAPTER 08 Beginner

HTML Classes and IDs

Updated: May 10, 2026
5 min read

# HTML Classes and IDs

1. Introduction

While HTML provides structure, we need a way to specifically identify elements so we can style them with CSS or manipulate them with JavaScript. That's exactly what class and id attributes do. They act as name tags for your elements.

2. Learning Objectives

  • Differentiate between class and id.
  • Apply multiple classes to a single element.
  • Use IDs for internal page navigation (bookmark links).

3. Detailed Explanations

The class Attribute

A class is used to identify a group of elements. You can use the exact same class name on as many elements as you want.
html
12345678910 
<!-- Both cities share the &#039;city' class -->
<div class="city">
  <h2>London</h2>
  <p>Capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Capital of France.</p>
</div>

Multiple Classes

You can apply multiple classes to a single element by separating them with a space.
html
12 
<!-- This button is a &#039;btn', it's 'primary', and it's 'large' -->
<button class="btn btn-primary btn-large">Submit</button>

The id Attribute

An id must be unique within the entire HTML document. No two elements can share the same ID. It is used to identify a single, specific element.
html
1234 
<!-- There is only one main header -->
<header id="main-header">
  <h1>Welcome to my website</h1>
</header>

Bookmark Links (Fragment Identifiers)

IDs have a magical secondary use: you can link directly to them to scroll the page!
html
123456789 
<!-- The link -->
<a href="#contact-section">Jump to Contact Form</a>

<!-- Lots of content here... -->

<!-- The target element -->
<section id="contact-section">
    <h2>Contact Us</h2>
</section>

4. Mini Project: Single-Page Navigation

Let's build a page that scrolls to different sections.
html
123456789101112131415161718192021 
<!DOCTYPE html>
<html>
<body>

<nav class="sticky-nav">
  <a class="nav-link" href="#chapter1">Chapter 1</a>
  <a class="nav-link" href="#chapter2">Chapter 2</a>
</nav>

<div id="chapter1" class="content-section bg-light">
  <h2>Chapter 1: The Beginning</h2>
  <p>This is the first chapter...</p>
</div>

<div id="chapter2" class="content-section bg-dark">
  <h2>Chapter 2: The Middle</h2>
  <p>This is the second chapter...</p>
</div>

</body>
</html>

5. MCQs

Q1: Which of the following is TRUE about the id attribute? A) Multiple elements can share the same id. B) It can only be used on <div> tags. C) It must be unique across the entire webpage. D) It is used to add multiple classes. *Answer: C*

6. Summary

Remember the golden rule: Classes are for many, IDs are for one. Use classes for styling reusable components (like cards or buttons). Use IDs for unique sections (like #header or #footer) and for "Jump to" navigation links.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter HTML Attributes and Global Attributes
Next Chapter HTML Comments, Entities, and Symbols

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

🎥 Related Videos 1