HTML

HTML id Attribute

The HTML id attribute is a core part of web development. It assigns a unique identifier to an HTML element. You can use this id in CSS for styling, in JavaScript for manipulation, and as a bookmark for navigation. This tutorial explains how the id attribute works, its syntax, best practices, and how it compares to the class attribute.

Learning Outcomes

After completing this tutorial, you will be able to:

Understand the function of the HTML id attribute for uniquely identifying elements.
Apply the id attribute to HTML elements using correct naming rules.
Compare the use of id attributes with class attributes.
Target an element with CSS using its id and apply specific styles.
Manipulate elements in JavaScript using methods like getElementById().
Create internal bookmarks for navigation with id attributes.
Follow best practices to use id attributes effectively.
Debug common issues related to id attribute misuse.

What is the HTML id Attribute?

The id attribute gives an HTML element a unique identifier. No two elements on the same page should share the same id. This uniqueness ensures that styles or scripts affect only the intended element.

Each id must be unique within the document
id values are case sensitive
id can be used for styling, DOM manipulation, and as navigation anchors

Example:

<h1 id="myUniqueHeader">Welcome to SitePoint</h1>

Unlike class attributes, the id attribute is meant for single use per page. This ensures that when you target an element by its id, you affect exactly that element.

Naming Rules and Best Practices

When naming id values, follow these rules:

The id must begin with a letter (a–z or A–Z)
Allowed characters include letters, digits, hyphens (-), underscores (_), and periods (.)
Do not include spaces
Use descriptive names that reflect the element's purpose

Examples:

id="headerOne" is valid
id="123header" is invalid because it starts with a number
id="main header" is invalid due to whitespace
id="my_header" and id="my-header" are valid using consistent naming

Comparison with Class Attributes

The id and class attributes are both used to target elements for styling and scripting, but they serve different purposes.

Attribute	Intended Use	Targeting
id	Meant for a single, unique element	Ideal for specific targeting (each id should be unique in the document)
class	Can be applied to multiple elements	Useful for broad targeting and shared styling (multiple elements can share the same class)

Styling with the id Attribute in CSS

To target an element using its id in CSS, prefix the id value with a hash (#).

Example CSS Rule:

#myUniqueHeader {
  background-color: lightblue;
  color: black;
  padding: 20px;
  text-align: center;
}

This rule applies only to the element with the id myUniqueHeader.

Manipulating Elements with JavaScript

JavaScript can select an element using its id via the getElementById() function. This method returns the element with the specific id, letting you modify its content or style.

Example:

<script>
  function updateHeader() {
    var header = document.getElementById('myUniqueHeader');
    header.innerHTML = 'Header Updated!';
  }
</script>
<button onclick="updateHeader()">Change Header Text</button>

When the button is clicked, the function changes the header's content.

HTML Bookmarks with id and Links

The id attribute can also create internal bookmarks on your page. Readers can jump to specific sections without scrolling.

Example: Creating a Bookmark

<h2 id="section-about">About SitePoint</h2>
<!-- Later in the page -->
<a href="#section-about">Jump to About Section</a>

To link to a bookmarked section on another page, include the filename with the id.

<a href="tutorial.html#section-about">Learn More About SitePoint Premium</a>

Bookmarks improve navigation by allowing quick jumps within long pages.

Avoid Over-Engineering

Use the id attribute only when you need to uniquely identify an element. For styling or targeting groups of elements, the class attribute is more appropriate. Avoid overusing ids to keep your code modular and manageable.

Debugging Tips

If you encounter issues with id attributes, try these tips:

Ensure that each id is unique
Confirm that id values follow proper naming rules (start with a letter, no spaces)
Use browser developer tools to inspect elements and check that ids are applied correctly

FAQs on HTML id Attribute

What is the difference between name and id in HTML?

The id attribute uniquely identifies a single element, while the name attribute is used with form elements to reference data during form submission.

What characters are allowed in an HTML id?

An id must start with a letter and can include letters, digits, hyphens (-), underscores (_), and periods (.).

Should I use the id attribute in HTML?

Yes, the id attribute is crucial for targeting a specific element for styling or scripting. Use it only for unique elements.

What is the rule for using ids in HTML?

Each id must be unique within the document. Do not use the same id on multiple elements.

Can HTML have two elements with the same id?

No, duplicate ids can lead to issues with CSS and JavaScript functionality.

Previous Next