HTML ID

❮ PrevNext ❯

In HTML we have an attribute called id attribute. It is like an identity card which is unique and can't be of the same name as others.

The id attribute is used to uniquely select an element in an HTML document.

It is used to add CSS property to the element as well as used for performing javascript tasks.

Use of id attribute for CSS

We can add CSS properties to the HTML elements using the id attribute.

Steps to use id attribute for adding CSS properties:

  1. create a <style> tag <head> tag.
  2. write name of your id preceding with a Hash sign ( # ).
  3. Make curly braces. Define the CSS properties inside curly braces.
  4. Create an id attribute inside the tag you want to define those CSS properties and give it the name of your class within a double quote.

<!DOCTYPE html>
<html>

<head>
  <style>
    #id-1 {
      color: red;
      background-color: orange;
      padding: 20px;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <h2>This is not given any id.</h2>
  <p id="id-1">This paragraph has an id named "id-1".</p>
</body>

</html>
Try It

bookmark on a webpage using id

Bookmarks of a webpage allow the user to jump to a certain section of a long webpage. Instead of scrolling manually, you can just click on the bookmark and you will directly jump to that section of the webpage.

To create a bookmark, create a link ( which will be clicked ) and create a bookmark ( the section where to jump ) on the webpage.

Creating a bookmark: - Choose the element where you have to jump. give that element an id attribute and an id name.

<h4 id="bookmark1">Jump here section 25</h4>

Create a link to this bookmark: - Create an anchor tag ( <a> ) with href attribute bookmark name starting with a hash ( # ) sign.

<a href="#bookmark1">Go to section 25</a>

A working example.

<!DOCTYPE html>
<html>

<head>
  <title>Document</title>
</head>

<body>
  <h2>Webpage example jump to section 25.</h2>
  <a href="#bookmark1">jump to section 25.</a>
  <p>Section 1.</p>
  <p>Section 2.</p>
  <p>Section 3.</p>
  .
  .
  .
  <p id="bookmark1">Section 25.</p>
</body>

</html><!DOCTYPE html>
<html>

<head>
  <title>Document</title>
</head>

<body>
  <h2>Webpage example jump to section 25.</h2>
  <a href="#bookmark1">jump to section 25.</a>
  <p>Section 1.</p>
  <p>Section 2.</p>
  <p>Section 3.</p>
  .
  .
  .
  <p id="bookmark1">Section 25.</p>
</body>

</html>
Try It

Difference between class and id

<!DOCTYPE html>
<html>

<head>
  <style>
    .my-class {
      color: red;
      background-color: orange;
      padding: 20px;
      font-size: 20px;
    }

    #my-id {
      color: blue;
      background-color: lightpink;
      padding: 25px;
      font-size: 25px;
    }
  </style>
</head>

<body>
  <h2>Class used multiple times but id is used only once.</h2>
  <p id="my-id">I have id named "my-id".</p>
  <p class="my-class">I have class named "my-class"</p>
  <p class="my-class">I have class named "my-class"</p>
  <p class="my-class">I have class named "my-class"</p>
  <p class="my-class">I have class named "my-class"</p>
</body>

</html>
Try It

Selecting and id element by javascript

An id can be used to select and modify any element using javascript

We can select the id using document.getElementById("id-name") and call a function over any event targeting that id.

<!DOCTYPE html>
<html>

<head>
  <script>
    function change() {
      document.getElementById("my-id").innerHTML = "Welcome to TutorialsTonight";
      document.getElementById("my-id").style.fontSize = "30px";
      document.getElementById("my-id").style.color = "red";
    }
  </script>
</head>

<body>
  <h2>Selecting and changing element by id using javascript.</h2>
  <button onclick="change()">modify id elemet</button>
  <p id="my-id">Hello world!</p>
</body>

</html>
Try It
❮ PrevNext ❯