Начнем с определений.
Id – уникальный определитель объекта. Это значит, что несколько элементов на странице не должны иметь одинаковый id. В HTML записывается, например, так:

В CSS, стили для id, записываются так:

Class – определитель стиля объекта, или группы объектов на странице. Его часто применяют для повторяющихся конструкций, например, публикаций на нашем сайте. В HTML записывается, например, так:

В CSS, стили для id, записываются так:

Не всегда можно сразу понять отличия этих атрибутов, поэтому рассмотрим их подробно:

1. Разная значимость атрибутов в CSS.
Id имеет больший вес, а значит стили под этим атрибутом – значительнее.
Например:

Текст в блоке получится размером 12 пикселей, а не 14, как того требует class.

2. Возможность проставления якорных ссылок.
Использования атрибута id позволяет поставить якорную ссылку на объект страницы.
Например:

Ссылка на содержания блока будет иметь следующий вид:

Якорные ссылки чаще всего используются в длинных документах для мгновенного перемещения.

3. Дополнительные функции id.
Для атрибута id существует функция .getElementById().

4. Запись множественных атрибутов.
Здесь имеются принципиальные различия между id и class. Так – одному объекту можно задать сразу несколько классов:

При записи в CSS нескольких стилей с одинаковыми атрибутами для классов это будет так:

Для id – будет так:

Вот и все основные отличия атрибута id от class. Спасибо за внимание!