Scribd
Upload
28 views6 pages

HTML - The Id Attribute

Uploaded by

RamanKumarJha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views6 pages

HTML - The Id Attribute

Uploaded by

RamanKumarJha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Dark code

  HTML CSS   
 Menu  Log in

Ads by
Stop seeing this ad Why this ad?

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.

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 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>
Dark mode
D k d
<style> Dark code
  HTML CSS   
#myHeader {
background-color: lightblue;
color: black;
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;
padding: 40px;
text-align: center;
} Dark mode
D k d
Dark code
  HTML CSS   
/* 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.

ADVERTISEMENT

Prospect in seconds u
AI
Tired of manually personalizing co
emails? Use Regie.ai to write ema
Regie.ai Chrome Extension seconds.

Dark mode
D k d
Dark code
HTML
 Bookmarks
HTMLCSS
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>

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.

Dark mode
D k d
JavaScript can access an element with a specific id with the getElementById()
Dark code
  HTML CSS   
method:

Example
Use the id attribute to manipulate text with JavaScript:

<script>
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

HTML Exercises

Test Yourself With Exercises


Dark mode
D k d
Dark code
  HTML CSS   
Exercise:
Add the correct HTML attribute to make the H1 element red.

<!DOCTYPE html>
<html>
<head>
<style>
#myheader {color:red;}
</style>
</head>
<body>

<h1 >My Home Page</h1>

</body>
</html>

Submit Answer »

Start the Exercise

❮ Previous Next ❯

ADVERTISEMENT

Dark mode
D k d

You might also like