This attribute defines a unique identifier for an Html element. This is used to to apply specific CSS properties to Html element. In CSS select element with # Sign.
<style>#myheading{
background-color:green;
color:white;
}
</style>
<h6 id="myheading">This is id Attribute element.</h6>
Id Attribute can apply to any Html element. Id attribute is case sensitive, and must contain one character. Note:-White spaces are not allowed in id value.
Create a reference with id. Use Id Attribute Where you want to navigate.
<body>
<p><a href="#p3">Jump to Page 3</a></p>
<h2>Page 1</h2>
<p>This is First Page.</p>
<h2>Page 2</h2>
<p>This is Second Page.</p>
<h2 id="p3">Page 3</h2>
<p>This is Third Page.</p>
<h2>Page 4</h2>
<p>This is Fourth Page.</p>
<h2>Page 5</h2>
<p>This is Fifth Page.</p>
</body>
This is First Page.
This is Second Page.
This is Third Page.
This is Fourth Page.
This is Fifth Page.
The main difference is that Id Attribute is used to identify one element and Class Attribute is used to identify more than one element. # Sign is used for id and . is used for Class in CSS selector.
<style>#myred{
background-color:red;
color:white;
}
.mygreen{
background-color:green;
color:white;
}</style>
<body><h2 id="myred">Page 1</h2>
<p>This is First Page.</p>
<h2 class="mygreen">Page 2</h2>
<p>This is Second Page.</p>
<h2 class="mygreen">Page 3</h2>
<p>This is Third Page.</p>
<h2 class="mygreen">Page 4</h2>
<p>This is Fourth Page.</p>
<h2 class="mygreen">Page 5</h2>
<p>This is Fifth Page.</p>
</body>
This is First Page.
This is Second Page.
This is Third Page.
This is Fourth Page.
This is Fifth Page.