HTML id Attribute: How to Assign Unique Identifiers to Elements

The id attribute adds a unique name to an HTML element. It helps with CSS and JavaScript in the page. You can only use each id once.

What Is the HTML id Attribute?

The id attribute gives a unique name to one element in a page. No other element should use the same name. It works as a reference point for styles or scripts.

This name can include letters, numbers, hyphens, and underscores. It must not have spaces.

You can add an id to almost any element. It sits inside the opening tag. Here’s a basic use:

<div id="main-content">Welcome</div>

This tag adds the id name main-content to the <div>. Now you can target this div from CSS or JavaScript.

Here are the rules to help you choose a name for an HTML id attribute:

• Use short names that explain the role or purpose.
• Use lowercase with hyphens or underscores if needed.
• Don’t use the same id twice on the same page.
• Avoid starting with numbers.

Good names:

header, user-list, main_section

Bad names:

123box, test, content1 and content1 again

You can use the id in CSS by placing a # before the name. This lets you style one single element.

Here is an example:

#main-content {
  font-size: 18px;
  color: black;
}

This rule targets only the element that has id="main-content".

You can grab any element with its id in JavaScript. The function getElementById finds the element fast.

For example:

const box = document.getElementById('box');
box.style.background = 'red';

This script finds the element with id="box" and sets its background color.

The id helps with these:

• Style one element
• Change one element with JavaScript
• Make internal links in a long page
• Help screen readers know the structure

So, why id must values be unique in an HTML document?

If you reuse the same id, the browser may act in strange ways. JavaScript will only find the first match. CSS will not behave as expected.

Examples of id Attribute in HTML

Style One Section with CSS

<section id="about">About Our Work</section>
<style>
  #about {
    background: lightgray;
    padding: 10px;
  }
</style>

This code adds a gray background and padding to the <section> with the id="about". The style rule only affects this part of the page.

Use id to Scroll to a Section

<a href="#contact">Go to Contact</a>

<div style="height: 700px;"></div> <!-- for scroll -->

<section id="contact">Contact Us</section>

This link jumps to the #contact section when clicked. It helps in long pages to move the user to the right place without reload.

Control Element with JavaScript:

<div id="notice">Click the button</div>
<button onclick="hideNotice()">Hide</button>

<script>
  function hideNotice() {
    document.getElementById('notice').style.display = 'none';
  }
</script>

This example hides the div when you click the button. The script targets the element using its id and changes its style.

Wrapping Up

In this article you learned what the id attribute does and how it helps with styling, scripting, and navigation. You also saw how each id must be unique.

Here is a quick recap:

• The id gives a unique name to an element.
• You can use it in CSS with #idname.
• You can find it in JavaScript with getElementById.
• It helps users jump to parts of a page.
• Every id must appear only once in a page.

FAQs

<div id="main">Content</div>

<p id="intro">First paragraph</p>
<p id="intro">Second paragraph</p> <!-- Invalid -->

/* CSS */
#header {
  color: red;
}

// JavaScript
const el = document.getElementById("header");
el.style.fontSize = "18px";

<h2 id="contact">Contact Us</h2>
<a href="#contact">Go to Contact Section</a>

Similar Reads