HTML IDs (identifiers) are attributes used to uniquely identify specific elements within an HTML document and are only used once in a web page per element. They act like unique names or labels for individual elements, enabling precise targeting for styling, scripting, and linking.

  • Uniqueness: Each ID must be unique within a single HTML document. No two elements can have the same ID.
  • Assignment: IDs are assigned using the id attribute within an element’s opening tag.
  • Targeting: They are targeted using the hash symbol (#) followed by the ID name in CSS and JavaScript.
  • Specificity: IDs have the highest specificity in CSS, meaning styles applied to an ID will override any other styles targeting the same element.


<h2 id="main-heading">This is the main heading</h2>
<p id="important-notice">Please read this notice carefully.</p>


#main-heading {
  color: blue;
  font-size: 2em;

#important-notice {
  background-color: yellow;
  • Styling: Targeting specific elements with CSS for unique styling or visual effects.
  • JavaScript: Selecting and manipulating specific elements with JavaScript to create dynamic behavior.
  • Linking: Creating internal links within a page that jump to a specific section by referencing its ID.
  • Accessibility: Linking to specific sections of a page for assistive technologies like screen readers, enhancing navigation for users with disabilities.

Best practices for using IDs:

  • Use descriptive and meaningful ID names that reflect the element’s purpose or content.
  • Ensure each ID is unique within the document to avoid conflicts.
  • Use IDs for elements that require unique identification and targeting.
  • Use classes for elements that share common styling or grouping needs, as classes can be applied to multiple elements.

Remember: HTML IDs are unique and an element with an ID should only be referenced once on a web page.