HTML Id Attribute

Navdeep kaur HTML

The HTML id attribute is used to specify a unique id for an HTML element. You cannot have more than one element with the same id in an HTML document. The id global attribute defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

Using The id Attribute

The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document. The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.

the id‘s value must not contain spaces, tabs etc.. Browsers treat non-conforming IDs that contain whitespace as if the whitespace is part of the ID. In contrast to the class attribute, which allows space-separated values, elements can only have one single ID value.The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}. In the following example we have an <h1> element that points to the id name “my Header”. This <h1> element will be styled according to the #myHeader style definition in the head section:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

What Is the ID Attribute Used For?

  • A style sheet selector: This is the function most people use the ID attribute for. Because they are unique, you’ll style just the one item on your web page when you style using an ID property. The downside to using an ID for styling purposes is that it has a very high level of specificity, which can make it very challenging if you need to override a style for some reason later in a stylesheet. Because of this, current web practices lean toward using classes and class selectors in place of IDs and ID selectors for general styling purposes.
  • Named anchors for linking to:  target precise locations in your web documents by pointing to the ID at the end of the URL. Add the id to the end of the page URL, preceded by a hash mark. Link to these anchors with the page itself by adding the hash tag and the ID name in the href attribute for the element. For example, for a division with an ID of contact, link to it on that page with #contact.
  • A reference for scripts: If you write any Javascript functions, use the ID attribute so that you can make changes to the precise element on the page with your scripts.
  • Other processing: The id supports processing within your web documents in whatever way you need. For example, you might extract the HTML into a database and use the ID attribute to identify fields.

Rules for Using the ID Attribute

Ensure your ID attributes conform to these three standards:

  • The ID must start with a letter (a-z or A-Z).
  • All subsequent characters can be letters, numbers (0-9), hyphens (-), underscores (_), colons (:), and periods (.).
  • Each ID must be unique within the document.

Difference Between Class and ID

A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:

Example:

<style>
/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

HTML Bookmarks with ID and Links

HTML bookmarks are used to allow readers to jump to specific parts of a webpage. Bookmarks can be useful if your page is very long. To use a bookmark, you must first create it, and then add a link to it. Then, when the link is clicked, the page will scroll to the location with the bookmark.

Example

First, create a bookmark with the id attribute:

<h2 id="C4">Chapter 4</h2>

Then, add a link to the bookmark (“Jump to Chapter 4”), from within the same page:

Example:

<a href="#C4">Jump to Chapter 4</a>

Using The id Attribute in JavaScript

The id attribute can also be used by JavaScript to perform some tasks for that specific element. JavaScript can access an element with a specific id with the get Element By Id() method:

Example

Use the id attribute to manipulate text with JavaScript:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

HTML Id Attribute
Show Buttons
Hide Buttons