Чим відрізняються атрибути html id від class

Бувають ситуації, що одному елементу присвоюються відразу обидва атрибути:

У чому ж відмінність?

Атрибут id розшифровується від англійського слова «identificator», яке перекладається як «ідентифікатор» або унікальний ознака об'єкта, що дозволяє розрізняти його від інших об'єктів. Це, свого роду, паспорт елемента.

Ключове слово тут унікальний. Це означає, що на веб-сторінці, де знаходиться атрибут id певного значення, не повинно більше зустрічатися елемента id з тим самим значенням.

Не можна писати так:

Звичайно, від того, що ви напишіть вміст html-документа таким чином, не зміниться його зовнішній вигляд і явних помилок ви не побачите.

Атрибут id найчастіше використовується для того, щоб позначити області на сторінці, які зустрічаються тільки один раз. Наприклад, на блогах часто виводиться список нотаток.

Кожна замітка, сама по собі унікальна, і іншої такої немає. В цьому випадку, кожній з цих заміток може бути привласнений свій унікальний ідентифікатор, і в разі необхідності потрібну замітку можна приховати або оформити відповідним чином.

Тепер атрибут class. Його завдання об'єднати групу елементів в один клас (тобто групу з подібними параметрами і характеристиками).

Елементів з атрибутом class може бути скільки завгодно на сторінці.

Наприклад, якщо якусь групу абзаців потрібно виділити певним кольором, їм можна присвоїти атрибут class з однаковим значенням.

Тепер, до всіх цих абзаців можна звернеться за допомогою технології CSS і разом поміняти їх зовнішній вигляд.

Це дуже зручно і економить величезну кількість часу.