HTML id Attribute

The HTML id attribute gives a unique name to a specific element on your page. Unlike classes which can be used on many elements, an id can only be used on one element per page.

What is the id Attribute?

The id attribute gives an element a unique identifier. Think of it like a social security number or a passport. No two elements on the same page can share the same id.

Ids are useful for two main things:

• Styling a specific element with CSS
• Finding and manipulating a specific element with JavaScript

Notice how the CSS uses a hash symbol (#) before the id name. That is how CSS knows you are targeting an id, not a class.

The Syntax for id

In CSS, you target an id using the hash symbol (#) followed by the id name:

#demoMyIdName {
  property: value;
  property: value;
}

In HTML, you add the id attribute to any element:

<div id="demoMyIdName">Content here</div>

Difference Between Class and id

This is a very common question. What is the difference between class and id?

The main difference is that a class can be used on many elements, but an id can only be used on ONE element per page.

See how the id “demoUniqueHeader” is only used once (on the main heading), but the class “demoCityCard” is used three times (on each city box)? That is the key difference.

HTML Bookmarks (Jump Links)

One of the coolest uses of the id attribute is creating bookmarks. You can make a link that jumps to a specific spot on the same page. This is very useful for long pages like FAQs or tables of contents.

Here is how it works. First, you add an id to the element you want to jump to. Then you create a link with the id name preceded by a hash symbol (#).

Click the links in the example. See how the page jumps to each chapter? That is a bookmark in action.

You can also create bookmarks that link to a specific spot on a different page. Just add the id to the URL:

<a href="another-page.html#demoChapter4">Go to Chapter 4 on another page</a>

Using id with JavaScript

JavaScript can find an element by its id using the getElementById() method. This is one of the most common ways JavaScript interacts with HTML.

When you click the button, JavaScript finds the element with id “demoGreetingText” and changes its content. That is how dynamic websites work.

Do not worry if the JavaScript looks confusing. You will learn it later. For now, just know that ids let JavaScript find and change specific elements on your page.

Quick Summary

• Id is unique. Each id can only be used once per page.
• In CSS, use # (hash) to target an id (like #demoHeader).
• In HTML, use the id attribute (like id="demoHeader").
• Class is for multiple elements. Id is for one specific element.
• Ids cannot start with a number or contain spaces.
• Ids are case sensitive.
• Use ids to create bookmarks (jump links) within a page.
• JavaScript uses getElementById() to find elements by their id.

What Just Happened? Let Me Explain

• Id and class are similar, but they have different purposes. Think of class like a team jersey (many players wear it). Think of id like a player number (each player has their own unique number).
• Use id when you have one special element on the page that needs unique styling or behavior.
• Use class when you want to style multiple elements the same way.
• Bookmarks are a great way to help users navigate long pages. They are very easy to implement with ids.
• If you accidentally use the same id twice on one page, your HTML is invalid and JavaScript might not work correctly. So always check.

HTML id Reference

Here are the concepts we covered in this chapter: