HTML Classes and IDs

The class and id attributes are used to identify and target HTML elements. They are mainly used with CSS to apply styles and with JavaScript to add behavior. Understanding when to use each one is a key skill in web development.

The id Attribute

An id gives an element a unique name. No two elements on the same page should have the same id. Think of it like a national ID number — it must be unique to that one element.

<h2 id="main-title">Welcome to HTML Learning</h2>
<p id="intro">HTML is the foundation of all websites.</p>
<div id="footer-section">This is the footer area.</div>

Uses of id

• To target a single specific element with CSS
• To target an element with JavaScript
• As an anchor for page navigation links (href="#section-id")
• To connect a <label> to a form input

The class Attribute

A class is a reusable name that can be given to multiple elements. Elements with the same class share the same group identity. Think of it like a team uniform — many players can wear the same uniform.

<p class="highlight">This paragraph is highlighted.</p>
<p class="highlight">This one is also highlighted.</p>
<p>This one is normal — no class.</p>

<div class="card">Card 1 content.</div>
<div class="card">Card 2 content.</div>
<div class="card">Card 3 content.</div>

Multiple Classes on One Element

An element can have more than one class by separating the class names with a space. This allows combining styles from different classes.

<p class="text-large text-blue">Large blue text.</p>
<button class="btn btn-primary">Submit</button>
<div class="card featured">A featured card.</div>

id vs class – Comparison

Practical Example – Blog Post Layout

<div id="blog-page">

  <div class="post">
    <h3 class="post-title">How to Learn HTML</h3>
    <p class="post-date">Posted on: January 10, 2025</p>
    <p class="post-content">Start with the basics of tags and elements...</p>
    <a href="#" class="read-more">Read More</a>
  </div>

  <div class="post">
    <h3 class="post-title">CSS Tips for Beginners</h3>
    <p class="post-date">Posted on: January 15, 2025</p>
    <p class="post-content">CSS selectors are the first thing to master...</p>
    <a href="#" class="read-more">Read More</a>
  </div>

</div>

Using id for Anchor Navigation

The id attribute is also used for same-page navigation links. When a link uses #id-name, clicking it scrolls the page to the element with that id.

<!-- Navigation -->
<nav>
  <a href="#intro">Introduction</a>
  <a href="#course-list">Courses</a>
  <a href="#contact">Contact</a>
</nav>

<!-- Target sections with matching ids -->
<section id="intro">
  <h2>Introduction</h2>
  <p>Welcome to our learning platform.</p>
</section>

<section id="course-list">
  <h2>Our Courses</h2>
  <p>HTML, CSS, JavaScript and more.</p>
</section>

<section id="contact">
  <h2>Contact Us</h2>
  <p>Reach us at hello@example.com</p>
</section>

Naming Rules for id and class

• Names can contain letters, numbers, hyphens (-), and underscores (_)
• Names must start with a letter, not a number
• Names are case-sensitive — myClass and myclass are different
• Use lowercase letters and hyphens as a standard naming convention (e.g., main-title)
• Do not use spaces in names — use hyphens or underscores instead

Key Points to Remember

• Use id for one unique element; use class for groups of similar elements
• An element can have both an id and one or more class attributes
• Classes allow reusing styles across many elements efficiently
• IDs are used for anchor links and unique element targeting
• Never use the same id value more than once on a page