Один из самых частых вопросов в процессе знакомства с новыми стандартами — в чем разница между атрибутами HTML-элементов “id” и “class”. Ведь эффект, вроде бы, одинаковый.

Одинаковый эффект у них только в самых простых случаях использования в CSS. На самом деле отличий полно.

Суть

id

уникальное собственное имя элемента на странице, то есть на странице не должно быть нескольких элементов с одним id. Например блоку с шапкой сайта можно дать id="title".

class

вольный признак, который дается обычно нескольким элементам, чтобы отличать их от других. Например, картинкам, которые просто сопровождают текст, можно дать class="decor", а картинкам, которые важны для понимания текста — class="content".

Следствия

Из этой сути прямо или косвенно вытекают остальные отличия, которые видны и в HTML, и в CSS, и в скриптах.

Якорные ссылки

Если нужно поставить ссылку на какой-то элемент в странице, то ему достаточно дать id (<h2 id="about">...</h2>) и ссылаться на него якорем (http://site/path/#about). Это, кстати, предпочтительный способ взамен старого <a name="...">.

Множественные признаки

Элементу можно задавать несколько классов через пробелы: <img class="important centered printable">. Причем их можно использовать и по отдельности:

/* все important элементы */
.important {color:red;}

… и в сочетании:

/* элементы с important и centered одновременно */
.important.centered {border:solid black 1px;}

Обратите внимание, что между классами в CSS-правиле нет пробела.

Разный вес в CSS

<h2 id="about" class="important">...</h2>

#about {color:green;}
.important {color:red;}