A few years ago I went through the HTML5 (then draft) spec and counted the uses of the id attribute. I found 11 (actually I found 12, but 1 was subsequently removed), only one of which was for use in coupling DOM elements to CSS. As well as Labels and Aria, there's coupling form controls to their forms, fragment identifiers in URLs, connecting table cells to their headers, and so on.
Classes have indeed fewer uses. But even so, besides CSS coupling, they are used in JavaScript via GetElementsByClassName() and querySelectorAll(). They're also used in microformats.
You've probably noticed that I refer to coupling to CSS. That's because I dispute the idea that HTML and CSS are tightly coupled. They're coupled entirely through Selectors (bar some special case behaviours in the overflow and background properties). But most relevant here is the use of id and classes in Selectors. And this is the point - if you look at recent Selectors specs, e.g. the Level 4 spec, they're not called "CSS Selectors", they're just "Selectors".
Selectors are designed to be the binding between DOM elements (for both HTML and XML documents) and other languages including both JavaScript and CSS. The Selectors spec even includes the snapshot profile which is specifically for non CSS uses. Only that non-CSS use contains the :has() pseudo-class.
So it is my contention that HTML and CSS declaration blocks are separate. Selectors provides the binding between the semantics world of HTML and the styling world of CSS, helping enforce the separation of concerns that inspired the invention of CSS, replacing the styling elements and attributes that were creeping into HTML. Selectors use id and classes, but so do other aspects of the web ecosystem. CSS uses Selectors but so does JavaScript.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
A few years ago I went through the HTML5 (then draft) spec and counted the uses of the id attribute. I found 11 (actually I found 12, but 1 was subsequently removed), only one of which was for use in coupling DOM elements to CSS. As well as Labels and Aria, there's coupling form controls to their forms, fragment identifiers in URLs, connecting table cells to their headers, and so on.
Classes have indeed fewer uses. But even so, besides CSS coupling, they are used in JavaScript via
GetElementsByClassName()andquerySelectorAll(). They're also used in microformats.You've probably noticed that I refer to coupling to CSS. That's because I dispute the idea that HTML and CSS are tightly coupled. They're coupled entirely through Selectors (bar some special case behaviours in the overflow and background properties). But most relevant here is the use of id and classes in Selectors. And this is the point - if you look at recent Selectors specs, e.g. the Level 4 spec, they're not called "CSS Selectors", they're just "Selectors".
Selectors are designed to be the binding between DOM elements (for both HTML and XML documents) and other languages including both JavaScript and CSS. The Selectors spec even includes the snapshot profile which is specifically for non CSS uses. Only that non-CSS use contains the
:has()pseudo-class.So it is my contention that HTML and CSS declaration blocks are separate. Selectors provides the binding between the semantics world of HTML and the styling world of CSS, helping enforce the separation of concerns that inspired the invention of CSS, replacing the styling elements and attributes that were creeping into HTML. Selectors use id and classes, but so do other aspects of the web ecosystem. CSS uses Selectors but so does JavaScript.