id (HTML attribute)

Share this article

Description

The id attribute provides a unique identifier for an element within the document. It may be used by an a element to create a hyperlink to this particular element. This identifier may also be used in CSS code as a hook that can be used for styling purposes, or by JavaScript code (via the Document Object Model, or DOM) to make changes or add behavior to the element by referencing its unique id. Note that the id attribute cannot be applied to the following elements:
  • base
  • head
  • html
  • meta
  • script
  • style
  • title
<span id="thisspan">A uniquely identifiable element.</span>

Value

The most important aspect of the id
attribute is that it must be absolutely unique. Unlike the class attribute, which may apply the same value to many elements in a page, an id that’s applied to an element must not match an id used anywhere else on the same page. The id attribute value must begin with a letter in the roman alphabet (a–z or A–Z); this can be followed by any combination of letters (a–z or A–Z), digits (0–9), hyphens (-), underscores (_), colons (:), and periods (.). The id value is case sensitive, thus <span id="me">This is me</span> and <span id="ME">This is me</a>
would be considered to be separate and uniquely identifiable elements on the same web page.

Frequently Asked Questions about HTML ID Attribute

What is the significance of the HTML ID attribute?

The HTML ID attribute is a unique identifier used to specify a particular element within an HTML document. It plays a crucial role in enhancing the functionality and interactivity of web pages. It is used in conjunction with CSS and JavaScript to manipulate, style, or animate specific elements. It also aids in fragment identifiers, which allow direct navigation to a specific part of the web page.

Can I use the same ID for multiple elements in a document?

No, the ID attribute must be unique within the HTML document. This uniqueness is critical because it allows specific targeting of elements for styling or scripting purposes. Using the same ID for multiple elements can lead to unexpected results and errors in your code.

How do I select an element with a specific ID in CSS?

To select an element with a specific ID in CSS, you use the hash (#) symbol followed by the ID name. For example, if you have an element with the ID “header”, you would select it in your CSS file like this: #header { /* your styles here */ }.

How do I access an element with a specific ID in JavaScript?

In JavaScript, you can access an element with a specific ID using the document.getElementById() method. For instance, if you have an element with the ID “myElement”, you can access it like this: var element = document.getElementById("myElement");.

Are there any naming rules for the ID attribute?

Yes, there are a few rules to follow when naming your ID attributes. The ID must start with a letter (A-Z or a-z), followed by any number of letters, digits (0-9), hyphens (-), underscores (_), colons (:), and periods (.). Also, remember that IDs are case-sensitive.

Can I use special characters in an ID?

While it’s technically possible to use certain special characters in an ID, it’s generally not recommended. This is because special characters can cause issues when trying to select the ID with CSS or JavaScript. Stick to alphanumeric characters, hyphens, and underscores for best results.

What happens if I don’t specify an ID for an element?

If you don’t specify an ID for an element, nothing inherently bad will happen. However, you will lose the ability to directly target that element with CSS or JavaScript, which can limit what you’re able to do in terms of styling and interactivity.

Can I change the ID of an element dynamically using JavaScript?

Yes, you can change the ID of an HTML element dynamically using JavaScript. You can do this by accessing the element’s id property and assigning it a new value. For example: document.getElementById("myElement").id = "newID";.

How does the ID attribute assist in accessibility?

The ID attribute can be used to improve web accessibility by associating text descriptions with form elements. This is done by using the for attribute in the <label> element, which references the ID of the associated <input> element. This helps screen readers and other assistive technologies provide a better user experience.

Can I use numbers to start an ID name?

No, an ID name cannot start with a number. It must begin with a letter, followed by any combination of letters, digits, hyphens, underscores, colons, and periods. Starting an ID with a number can lead to unexpected results and is not considered valid HTML.

Adam RobertsAdam Roberts
View Author

Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week