HTML Id

HTML The id Attribute

 

 

Using The id Attribute

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

The id value can be used by CSS and JavaScript to perform certain tasks for the element with the specific id value.

In CSS, to select an element with a specific id, write a hash (#) character, followed by the id of the element:

Example :

Use CSS to style an element with the id “myHeader”:

 

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

 

<h2>The id Attribute</h2>

<p>Use CSS to style an element with the id “myHeader”:</p>

 

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

 

</body>

 

</html>

 

The id Attribute

Use CSS to style an element with the id “myHeader”:

My Header

Tip: The id attribute can be used on any HTML element.

Note: The id value is case-sensitive

Note: The id value must contain at least one character, and must not contain whitespace (spaces, tabs, etc.).

 

Difference Between Class and ID

An HTML element can only have one unique id that belongs to that single element, while a class name can be used by multiple elements:

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

<!– A unique element –>
<h1 id=”myHeader”>My Cities</h1>

<!– Multiple similar elements –>
<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>

Difference Between Class and ID

An HTML page can only have one unique id applied to one specific element, while a class name can be applied to multiple elements.

My Cities

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

Bookmarks with ID and Links

HTML bookmarks are used to allow readers to jump to specific parts of a Web page.

Bookmarks can be useful if your webpage is very long.

To make a bookmark, you must first create the bookmark, and then add a link to it.

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:

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

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

 

<!DOCTYPE html>

<html>

<body>

 

<p><a href=”#C4″>Jump to Chapter 4</a></p>

<p><a href=”#C10″>Jump to Chapter 10</a></p>

 

<h2>Chapter 1</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 2</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 3</h2>

<p>This chapter explains ba bla bla</p>

 

<h2 id=”C4″>Chapter 4</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 5</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 6</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 7</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 8</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 9</h2>

<p>This chapter explains ba bla bla</p>

 

<h2 id=”C10″>Chapter 10</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 11</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 12</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 13</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 14</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 15</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 16</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 17</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 18</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 19</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 20</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 21</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 22</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 23</h2>

<p>This chapter explains ba bla bla</p>

 

</body>

</html>

 

Jump to Chapter 4

Jump to Chapter 10

Chapter 1

This chapter explains ba bla bla

Chapter 2

This chapter explains ba bla bla

Chapter 3

This chapter explains ba bla bla

Chapter 4

This chapter explains ba bla bla

Chapter 5

This chapter explains ba bla bla

Chapter 6

This chapter explains ba bla bla

Chapter 7

This chapter explains ba bla bla

Chapter 8

This chapter explains ba bla bla

Chapter 9

This chapter explains ba bla bla

Chapter 10

This chapter explains ba bla bla

Chapter 11

This chapter explains ba bla bla

Chapter 12

This chapter explains ba bla bla

Chapter 13

This chapter explains ba bla bla

Chapter 14

This chapter explains ba bla bla

Chapter 15

This chapter explains ba bla bla

Chapter 16

This chapter explains ba bla bla

Chapter 17

This chapter explains ba bla bla

Chapter 18

This chapter explains ba bla bla

Chapter 19

This chapter explains ba bla bla

Chapter 20

This chapter explains ba bla bla

Chapter 21

This chapter explains ba bla bla

Chapter 22

This chapter explains ba bla bla

Chapter 23

This chapter explains ba bla bla

Using The id Attribute in JavaScript

JavaScript can access an element with a specified id by using the getElementById() method:

<!DOCTYPE html>

<html>

<body>


<h2>Using The id Attribute in JavaScript</h2>

<p>JavaScript can access an element with a specified id by using the getElementById() method:</p>


<h1 id=”myHeader”>Hello World!</h1>

<button onclick=”displayResult()”>Change text</button>

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

</body>

</html>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

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