Scribd
Upload
3 views

HTML - The id attribute

The HTML id attribute is used to assign a unique identifier to an HTML element, ensuring that no two elements share the same id within a document. It is essential for styling with CSS and for JavaScript manipulation, allowing specific elements to be targeted. Additionally, the id attribute can be utilized for creating bookmarks within a webpage for easy navigation.

Uploaded by

dev.edossmjo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

HTML - The id attribute

The HTML id attribute is used to assign a unique identifier to an HTML element, ensuring that no two elements share the same id within a document. It is essential for styling with CSS and for JavaScript manipulation, allowing specific elements to be targeted. Additionally, the id attribute can be utilized for creating bookmarks within a webpage for easy navigation.

Uploaded by

dev.edossmjo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

5/8/25, 11:31 AM HTML - The id attribute

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

HTML id Attribute
❮ Previous Next ❯

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 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 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
"myHeader". This <h1> element will be styled according to the #myHeader style
definition in the head section:

Example
<!DOCTYPE html>
<html>
<head>
https://www.w3schools.com/Html/html_id.asp 1/9
5/8/25, 11:31 AM HTML - The id attribute

<style>
#myHeader
Tutorials
{  Exercises  Services   Sign Up Log in
background-color: lightblue;
HTML
 CSS black;
color: JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
padding: 40px;
text-align: center;
}
</style>
</head>
<body>

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

</body>
</html>

Try it Yourself »

Note: The id name is case sensitive!

Note: The id name must contain at least one character, cannot start with a number, and
must not contain whitespaces (spaces, tabs, etc.).

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;

https://www.w3schools.com/Html/html_id.asp 2/9
5/8/25, 11:31 AM HTML - The id attribute

padding: 40px;
 Tutorials  center;
text-align: Exercises  Services   Sign Up Log in
}
HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
/* 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>

Try it Yourself »

Tip: You can learn much more about CSS in our CSS Tutorial.

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.

https://www.w3schools.com/Html/html_id.asp 3/9
5/8/25, 11:31 AM HTML - The id attribute

To use a bookmark, you must first create it, and then add a link to it.
 Tutorials  Exercises  Services   Sign Up Log in
Then, when the link is clicked, the page will scroll to the location with the bookmark.
HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

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>

Try it Yourself »

Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:

<a href="html_demo.html#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 getElementById() method:

Example
https://www.w3schools.com/Html/html_id.asp 4/9
5/8/25, 11:31 AM HTML - The id attribute

Use the id attribute to manipulate text with JavaScript:


 Tutorials  Exercises  Services   Sign Up Log in
<script>
HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

Try it Yourself »

Tip: Study JavaScript in the HTML JavaScript chapter, or in our JavaScript Tutorial.

Chapter Summary
The id attribute is used to specify 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 by CSS and JavaScript to style/select a specific element
The value of the id attribute is case sensitive
The id attribute is also used to create HTML bookmarks
JavaScript can access an element with a specific id with the getElementById()
method

?
Exercise
True or False. The id name is case sensitive

True

False

https://www.w3schools.com/Html/html_id.asp 5/9
5/8/25, 11:31 AM HTML - The id attribute

 Tutorials  Exercises  Services 


Submit Answer »
 Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

Video: HTML ID

❮ Previous Next ❯

Track your progress - it's free! Sign Up Log in

https://www.w3schools.com/Html/html_id.asp 6/9
5/8/25, 11:31 AM HTML - The id attribute

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

COLOR PICKER



 

 PLUS SPACES

GET CERTIFIED FOR TEACHERS

https://www.w3schools.com/Html/html_id.asp 7/9
5/8/25, 11:31 AM HTML - The id attribute

 Tutorials  Exercises 
FOR BUSINESS
Services 
CONTACT US
 Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top Examples Get Certified


HTML Examples HTML Certificate
CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
W3.CSS Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate

    

FORUM ABOUT ACADEMY


W3Schools is optimized for learning and training. Examples might be simplified to improve
reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot

https://www.w3schools.com/Html/html_id.asp 8/9
5/8/25, 11:31 AM HTML - The id attribute
warrant full correctness

 of all content. While using W3Schools, you agree to have read and accepted our terms of use,
Tutorials  Exercises  Services 
cookie and privacy policy.
 Sign Up Log in

HTML
 Copyright
CSS 1999-2025 by Refsnes
JAVASCRIPT SQLData. PYTHON
All Rights Reserved.
JAVA W3Schools
PHP is Powered
HOW TOby W3.CSS.
W3.CSS C

https://www.w3schools.com/Html/html_id.asp 9/9

You might also like