id - Every HTML element can carry the id attribute. It is used to uniquely identify that element from other elements on the page. Its value should start with a letter or an underscore (not a number or any other character). It is important that no two elements on the same page have the same value for their id attributes (otherwise the value is no longer unique).
As an example of how we can use ID's, they can be used to link to a section on the same page. In order to link to a part of the same page, you can add an ID attribute to the element you want to reference (for example, <h1 id="top">), and in your anchor element, the value of the href attribute will be "#top" (<a href="#top">skip to top</a>). More complete code is as follows:
<h1 id="top"> Title of My Site </h1>
<p> a long passage of text, or many elements </p>
<a href="#top"> jump to beginning </a>
class - Every HTML element can also carry a class attribute. Sometimes, rather than uniquely identifying one element within a document, you will want a way to identify several elements as being different from the other elements on the page. For example, you might have some paragraphs of text that contain information that is more important than others and want to distinguish these elements, or you might want to differentiate between links that point to other pages on your own site and links that point to external sites. To do this you can use the class attribute. Its value should describe the class it belongs to.
In the following example, key paragraphs have a class attribute whose value is important:
<p class="important"> some important text, blah, blah, blah. </p>
<p> some less important text text, blah, blah, blah. </p>
<p class="important"> some more important text, blah, blah, blah. </p>