You are currently viewing IDs in HTML | Lesson 22 HTML Tutorial

IDs in HTML | Lesson 22 HTML Tutorial

IDs in html are unique means you couldn’t repeat them with any case, also IDs are used to give style for one html element, so we will learn how to define ID and how to assign styles to them.

Visual Explain of IDs in HTML:


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 a unique element with the specified id value. In CSS, to select an element with a specific id, write a hash (#) character, followed by the id of the element.


#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;

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

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.


/* 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;

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

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.


First, create a bookmark with the id attribute:

<h2 id="down">down</h2>

Then, add a link to the bookmark (“Jump to down”), from within the same page:

<a href="#down">Jump to down</a>

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

 <a href="html_demo.html#down">Jump to down</a> 

Using The id Attribute in JavaScript

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


function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";

This post is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.

In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.

We hope that we could give the best for you and for the deep and easy understanding.

You could follow the series from our website and go to categories and then programming and then Choose the course you want then just click next post to go step by step.

Finally we hope every thing is works as you suspect.

Consequently You could follow us at :

Website URL:


Twitter: http://


Facebook: http://


Leave a Reply