tutorialstonight logo
A Platform To Learn To Code

HTML ID



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 in side 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.

Example

Run the code

bookmark on 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.

Example


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

Example

A working example.

Example

Run the code

Difference between class and id

  • Once a class is defined it can be used as many times you want to use in the HTML document but an id can be used only once in an HTML document as id indicates unique identity.
  • From CSS point of view there is no difference between Class and id. They both can be used to add CSS property to the element.
  • Classes are not unique but ids are unique.
  • Classes does not have any browser ability but id have special ability. When you have URL like http://yourwebsite.com#id1 then the browser will locate the id having name "id1" in the webpage and will scroll to "id1".
  • An element can have both a class as well as an id.

Example

Run the code

Selecting and id element by javascript

A 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. You can learn more about HTML javascript here.

Example

Run the code