Difference between ID and Class Attributes in HTML

What is ID and Class?How do they differ in HTML?

by Akhil Yalla

HTML

<h3>Click on P tags to view the difference between ID and Class Attributes</h3>
</br/><b>When you click P tag with ID attribute only that gets hidden</b>

<p id='id'>ID 1</p>
<p id="id">ID 2</p>
<b>When you click P tag with CLASS attribute both classes gets hidden</b>
<p class='class'>Class 1</p>
<p class='class'>Class 2</p>

<span style='color:red;font-weight:bold;'>CSS Doesn't care about ID and CLASS but JavaScript,Jquery cares about ID and CLASS attributes.</span>

CSS

#id
{
background-color:#ea6645;
color:white;
font-weight:bold;
padding:3px;
}
.class
{
background-color:#012951;
color:white;
font-weight:bold;
padding:3px;
}

JavaScript

$(document).ready(function(){
    $("#id").click(function(){
        $("#id").hide();
    });
     $(".class").click(function(){
        $(".class").hide();
    });
});