Одне з найбільш частіших питань у процесі знайомства з новими стандартами – в чому різниця між атрибутами 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
… і в поєднанні:
/* елементи з important і centered одночасно */ .important.centered {border: solid black 1px;}Зверніть увагу, що між класами в CSS-правилі немає пробілу.
- Різна вага в CSS
-
У кожного правила в CSS є «вага», за якою визначається порядок їх застосувань. У id ця вага більше. Тому якщо в елемента задано і id, і class:
<h2 id="about" class="important"> ...</h2>
… то з двох правил
#about .important
… виграє перше, колір заголовка буде зеленим. (Ваги правил – це окрема пісня, про неї буде стаття в свій час.)
- Пошук в скрипті
- Елемент з «id» можна легко знайти в скрипті за допомогою функції
document.getElementById(). Для класів такої функції немає.
***
Це переклад статті. Оригінал тут