HTML Id Attribute

Used to apply internal or external css styles to an element with a id name.
This style will be applied for single element.
The id can be identified in css as #name
The id name in id attribute is also used in js to change or add the styles or classnames.
The id attribute takes a id name, which consits a set of styles, The id name is kept in the attribute and only single id name is kept without any space.
Syntax: <tagname id="idname" > Content <tagname>


<p id="p1">This is a styled p element using p1 id</p>
<p id="p2">This is a styled p element using p2 id</p>

It is Different from class

There are many difference between is and class.





Used to uniquely identify a single HTML element on a page.

Used to identify a group of HTML elements that share a common purpose or style.


Each element can have only one id, and the id values must be unique within the entire HTML document.

Multiple elements can have the same class, and an element can have multiple classes separated by spaces.


It is often used to target specific elements for styling or scripting purposes.

It is widely used for applying common styles to multiple elements or for selecting elements through CSS and JavaScript.


To select an element with a particular id in CSS, you use the hash (#) symbol followed by the id value (e.g., #myElement).

To select elements with a specific class in CSS, you use a period (.) followed by the class name (e.g., .myClass).


In JavaScript, you can easily select an element by its id using document.getElementById('myElement').

In JavaScript, you can select elements by class using methods like document.getElementsByClassName('myClass').


<!DOCTYPE html>
.topic {background-color: red;text-align:right }
#topic {background-color: orange;text-align:center }

<h1 id="topic">Heading</h1>
<p class="topic">This is a Paragraph</p>


Id used in Javascript

When using JavaScript, you can select elements with a specific id using the querySelector() or getElementById() method.


<!DOCTYPE html>
#unique-paragraph {
  font-weight: bold;

<p id="target-element">This is the target element.</p>

  const targetElement = document.getElementById('target-element');
  // Now you can perform actions on the targetElement


Note: Using id is especially useful when you want to uniquely identify and interact with specific elements on your webpage, and it's an essential tool for creating dynamic and interactive web content. However, make sure that each id is unique throughout the page, as using duplicate id values can lead to unexpected behavior and may not work as intended.

Quick Recap

Topics Covered

HTML id Attribute
Id and Class difference
Id used in javascript

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now

Example 1

Example 1 Example 2 Example 3 Example 4 Example 5