HTML id Attribute

The purpose of this article is to provide a deeper understanding of HTML ID, how to use it, and some best practices to follow.

HTML id attribute is utilized to identify a unique id for an HTML element – the same id cannot be assigned to more than one element in HTML.

Table Of Content-

Syntax for ID

<tag id=“value”>

Using The id Attribute

HTML elements are identified by their id attributes. HTML documents must have unique id attributes.

An HTML id attribute identifies a specific style statement in a style sheet. The element with the particular id is also accessed and controlled by JavaScript.

It would be best if you started with a hash character (#) followed by the name of your ID. The CSS properties should then be defined within curly braces {}.

Here is an example with an <h1> element with the id “myHeader”.

It will be styled according to the #myHeader style definition in the <h1>:

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>

Reminder: Please note that the ID name is case-sensitive. It must have a name that contains at least one character and is free of whitespace (spaces, tabs, etc.).

ID on Forms

Here is an example of id using on the form each form element has its unique ID.

Example: 

<!DOCTYPE html> <html> <body><form id="form"><fieldset style="background: rgb(158, 156, 156); border: 2px solid #705831;"> <legend id="user">User Data</legend> <input id="firstname" type="text" placeholder="First name" name="firstname"><br><br> <input id="lastname" type="text" placeholder="Last name" name="lastname"><br><br> <input id="email" type="text" placeholder="Email" name="email"><br><br> <input id="usersubmit" type="submit" value="Submit"> </fieldset></form></body> </html>

Difference Between Class and ID

A class name can be utilised by more than one HTML element on a page, whereas an HTML id name can only be operated once.

Example

<!DOCTYPE html> <html> <head><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> </head><body> <!-- 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> </body> </html>

Note: Pay a visit to Our CSS Tutorial will teach you much more about CSS.

Here is another example of Id attribute:

Example: 

<!DOCTYPE html> <html> <head> <title> Id attribute example </title> <style> #company { padding: 25px; background-color: purple; color: white; text-align: center; } #owner { padding: 20px; background-color: blue; color: red; text-align: center; } </style> </head> <body> <p>Stying Id attribute with CSS </p> <h2 id="company"> Microsoft </h2> <h2 id="owner"> Bill Gates </h2> </body></html>

An HTML bookmark allows the user to jump to specific sections of a website. A bookmark can be handy if you have a long page as comes to HTML id.

It is necessary to create a bookmark first and then link to it.

After clicking on the link, the page will scroll to the bookmark location.

Example

As a first step, create a bookmark that has an id attribute OR HTML id:

<h2 id=”bil”>Bookmarks with ID and Links</h2>

Then, Include a link to the bookmark (“Goto Bookmarks with ID and Links section”), within the same page:

Example

<!DOCTYPE html> <html> <body><a href="#bil">Goto Bookmarks with ID and Links section</a></body> </html>

When we talk about HTML id, you can also add a link to the bookmark (“Go to Bookmarks with ID and Links section”) from another page:

<a href=”html_demo.html#bil”>Goto Bookmarks with ID and Links section</a>

Using The id Attribute in JavaScript

JavaScript can also perform some operations on elements with the id attribute.

With the getElementById() method, JavaScript can access elements with specific IDs:

The id attribute OR HTML id can be used to manipulate text in JavaScript:

Example

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

Our upcoming JavaScript lessons will cover JavaScript, or you can study it in the HTML JavaScript chapter.

Advantages of using HTML ID attribute

The HTML ID attribute is a useful tool for web developers as it provides a unique identifier for elements on a web page. Here are some advantages of using the HTML ID attribute:

Uniqueness: The ID attribute ensures that an element can be identified and manipulated without affecting other elements on the page.

Specificity: The ID attribute has a higher level of specificity than other CSS selectors such as classes, making it more precise for targeted styles.

Accessibility: Using meaningful ID names enhances the accessibility of a website for users who rely on assistive technologies.

SEO: Using unique and relevant ID names can optimize a website for search engines.

JavaScript manipulation: The ID attribute is useful for identifying elements in JavaScript, allowing for the creation of dynamic and interactive web pages.

Organization: Using unique ID names can help to keep HTML code organized and easy to read and maintain.

Anchor links: The ID attribute can be used to create anchor links, allowing users to jump directly to a specific section of the page.

Styling: The ID attribute can be used to apply specific styles to individual elements on a web page, such as headings, images, or other important elements.

If this article somehow fulfilled your educational requirements do share this article with your friends by clicking on the links below.
We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon
By subscribing, you agree with our privacy policy and our terms of service.

Leave a Reply

Your email address will not be published. Required fields are marked *