The ID Attribute: Unique Identifiers in HTML

When you build a web page, you’re really building a collection of elements: headings, paragraphs, buttons, images, and more. Sometimes, you need a way to point to one specific element out of all of them. That’s where the id attribute comes in.

In this article, you’ll learn what the id attribute is, how to use it safely, and how it connects to other tools like links and CSS. We’ll walk through simple, hands-on examples you can try right in your browser or a basic code editor.

What is the `id` Attribute?

In HTML, an attribute is extra information you add to an element. For example, href on a link or src on an image. The id attribute gives an element a unique name on the page.

Think of id like a name tag at an event. Many people might have the same job title (like multiple <p> paragraphs), but each person has their own name tag. The id is that name tag for an element.

Important rule: Each id must be unique on a single page. That means you should not use the same id value more than once.

Basic Syntax: Adding an ID to an Element

You can add an id to almost any HTML element. Here’s the pattern:

<tagname id="unique-name">Content goes here</tagname>

Let’s look at a concrete example.

<!-- Example 1: A heading with an ID -->
<h1 id="main-title">Welcome to My Page</h1>

<!-- A normal paragraph without an ID -->
<p>This is my first paragraph.</p>

What’s happening here?

<h1> is the element (a large heading).
id="main-title" gives the heading the unique identifier main-title.
The text Welcome to My Page is what visitors will see on the page.

Try it yourself:

Open a new file named index.html on your computer.
Paste the code above inside the <body> of a basic HTML page.
Open the file in your browser and look for the heading.

You won’t see the id just by looking, but it’s there, ready to be used by links, CSS, and JavaScript.

Rules for Naming IDs

To avoid problems, follow these simple rules when naming your ids:

Use letters, numbers, hyphens (-), and underscores (_).
Don’t use spaces. Use main-title instead of main title.
Don’t start with a number in older HTML specs; instead of 1section, use section1.
Make the name meaningful, like contact-section rather than abc.

Examples of good id values:

main-title
hero-image
contact-form

Examples of bad id values:

main title (space in the middle)
#section (includes a # sign, which is used in links)
123 (not very descriptive)

Using ID with Links (Jump to a Section)

One very practical use of id is to create jump links inside a page. This lets a user click a link and jump straight to a specific section.

Step 1: Add IDs to Your Sections

<!-- Example 2: Sections with IDs -->
<h2 id="about">About Me</h2>
<p>Hello! I love learning HTML.</p>

<h2 id="projects">Projects</h2>
<p>Here are some things I have built.</p>

<h2 id="contact">Contact</h2>
<p>You can reach me by email.</p>

Here, each <h2> heading has its own id:

about
projects
contact

Step 2: Create Links That Point to These IDs

Now, we’ll add a simple navigation menu at the top that links to these sections.

<!-- Navigation menu at the top -->
<a href="#about">Go to About</a> |
<a href="#projects">Go to Projects</a> |
<a href="#contact">Go to Contact</a>

<!-- The sections from before -->
<h2 id="about">About Me</h2>
<p>Hello! I love learning HTML.</p>

<h2 id="projects">Projects</h2>
<p>Here are some things I have built.</p>

<h2 id="contact">Contact</h2>
<p>You can reach me by email.</p>

How it works:

Each link uses href="#id-value".
The # sign tells the browser, “Look for the element with this id on this page.”
Clicking Go to Projects scrolls straight to the element with id="projects".

Try it yourself:

Add the code above to your index.html file inside <body>.
Open it in your browser.
Click each link and watch the page jump to the right section.

You’ve just built in-page navigation using id!

Using ID with CSS (Styling One Specific Element)

Another common use of id is with CSS, the language used to style web pages (change colors, fonts, spacing, and more).

In CSS, you target an id using the # symbol followed by the id name.

Step 1: Add IDs in HTML

<!-- Example 3: Elements with IDs to style -->
<h1 id="page-title">My Simple Website</h1>
<p id="intro-text">Welcome! This site is just a practice project.</p>
<p>Thanks for visiting.</p>

Step 2: Add CSS That Targets These IDs

You can include CSS inside a <style> tag in the <head> of your HTML file.

<head>
  <meta charset="UTF-8" />
  <title>My Simple Website</title>

  <style>
    /* Style the element with id="page-title" */
    #page-title {
      color: darkblue;         /* Text color */
      text-align: center;      /* Center the text */
    }

    /* Style the element with id="intro-text" */
    #intro-text {
      font-style: italic;      /* Make text italic */
      color: darkgreen;        /* Change text color */
    }
  </style>
</head>

What this does:

#page-title applies styles only to the <h1 id="page-title"> element.
#intro-text applies styles only to the <p id="intro-text"> element.
Other paragraphs without these ids are not affected.

Expected result:

The main heading appears centered and dark blue.
The intro paragraph appears italic and dark green.

Try it yourself:

Combine the <head> and <body> examples into one full HTML file.
Open it in your browser.
Change some values (like color or text-align) and refresh to see what happens.

Using ID with JavaScript (A Quick Preview)

You don’t need to know JavaScript yet, but it’s helpful to see how id makes elements easy to control with code.

JavaScript can find an element by its id and then change it.

<!-- Example 4: Changing text with JavaScript using an ID -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>ID and JavaScript Example</title>
</head>
<body>
  <!-- Paragraph with an ID -->
  <p id="message">Original message</p>

  <!-- Button to trigger JavaScript -->
  <button onclick="changeMessage()">Click me</button>

  <script>
    // This function runs when the button is clicked
    function changeMessage() {
      // Find the element with id="message"
      var paragraph = document.getElementById('message');

      // Change its text content
      paragraph.textContent = 'The message has changed!';
    }
  </script>
</body>
</html>

How it works:

The <p> element is given id="message".
The button calls the changeMessage() function when clicked.
document.getElementById('message') tells JavaScript to find the one element with that id.
Then we change its text.

Expected result:

At first, you see “Original message”.
When you click the button, the text changes to “The message has changed!”.

If this feels advanced, that’s okay. The important idea is: id makes it easy for scripts to find exactly the element they need.

Common Mistakes to Avoid

As you practice, watch out for these easy-to-make mistakes:

Using the same ID more than once
- Problem: Two elements both say id="header".
- Why it’s bad: Links, CSS, or JavaScript might get confused about which one to use.
Typos in ID names
- Example: You write id="main-titel" in HTML and target #main-title in CSS.
- Result: The CSS doesn’t apply, and it can be hard to spot the typo.
Overusing IDs for styling
- It’s often better to use classes for styling groups of elements.
- Use id when you truly need a single, unique element.

Don’t worry if you make these mistakes at first. Debugging (finding and fixing errors) is a big part of learning to code.

Try It Yourself: Mini Project

Create a simple one-page “profile” with:

A title with an id (for example, id="profile-title").
Three sections: About, Hobbies, and Contact, each with its own id.
A navigation menu at the top with links that jump to each section using href="#about", etc.
Some simple CSS styles targeting at least one id.

As you build:

Check that each id is only used once.
Make sure your href values exactly match your ids.

This small project may seem simple, but you’re practicing skills used in real websites.

Quick Recap and What’s Next

You’ve just learned a core concept of HTML that you’ll use again and again:

The id attribute gives an element a unique name on your page.
Each id must be unique—no duplicates on the same page.
You can use id with links to jump to sections (href="#section-id").
You can use id with CSS to style one specific element (#my-id { ... }).
You can use id with JavaScript to find and change elements (getElementById).

If you made it this far, that’s a big win—many people never get past the basics. Next, you might explore the class attribute, which is like id but meant for groups of elements, or dive deeper into CSS to design more attractive pages.

Keep experimenting, keep breaking things (and fixing them), and remember: every small project makes you a better coder.

Mudzinga