The id Attribute

Use CSS to style an element with the id "myHeader".

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

My Header

Difference Between Class and ID

The id name is case sensitive. The id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, ect.).

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:

My Cities

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

Jump to Chapter 4

Jump to Chapter 10

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 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. First, create a bookmark with the <id> attribute. Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page. Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:

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

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.

JavaScrpit can access an element with a specified id by using the getElemntById() method:

Hello World!