An id identifies exactly one element and must be unique in the document, while a class labels any number of elements and can be reused.
id
class
Elements per value
One
Any number
Values per element
One
Several, separated by spaces
CSS selector
#header
.card
JavaScript lookup
getElementById()
getElementsByClassName()
Specificity
Higher
Lower
An id is also a link target, so href="#header" jumps to that element, and a label's for attribute points at a control's id. Use ids for those jobs and for unique scripting hooks.
Use classes for styling. An ID selector outweighs any number of class selectors, which makes rules written on ids hard to override later. Name classes after what an element is, such as card, rather than how it looks.
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
