HTML Id Attribute

In HTML, the id attribute is used to specify a unique identifier for an HTML element. The id attribute value should be unique within the HTML document, meaning that no other element in the same document should have the same id value.

The id attribute can be added to any HTML element and takes a string value that contains the identifier. For example, the following code defines a paragraph element with an id attribute:

<p id="my-paragraph">This is a paragraph with an ID.</p>

In this example, the id attribute specifies the identifier "my-paragraph" for the paragraph element.

Link to specific section of a page

Another use of the id attribute is to link to a specific part of a document using a fragment identifier. For example, if we have a section with an id of "about", we can link to it from another part of the document or from another page using this URL:

https://example.com/index.html#about

The # symbol followed by the id value indicates that we want to jump to the element with that id. The browser will scroll to the element automatically when we click on the link.
 

Used for styling

The id attribute is often used in conjunction with JavaScript or CSS to manipulate or style specific elements on a page. For example, the following CSS rule targets the paragraph element with the id "my-paragraph" and sets its font color to red:

#my-paragraph {
 color: red;
}

Used in JavaScript

In JavaScript, the getElementById() method can be used to retrieve a reference to an element with a specific id value. For example, the following code retrieves a reference to the paragraph element with the id "my-paragraph" and sets its text content:

var myParagraph = document.getElementById("my-paragraph");
myParagraph.textContent = "This is the new text for the paragraph.";

The id attribute is a powerful tool for uniquely identifying and manipulating HTML elements, and it is widely used in modern web development.