Is there an easy way to determine an HTML element's content category?

Question

HTML elements belong to content cagetories. For my task at hand, I need to ensure that I'm not nesting interactive content nodes.

Currently, I can traverse the node's parents to make sure none of them are of the type <a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select>, and <textarea>. All of these elements are part of the "Interactive content" category.

Other types can also be interactive.

• <audio>, if the controls attribute is present
• <img>, if the usemap attribute is present
• <input>, if the type attribute is not in the hidden state
• <menu>, if the type attribute is in the toolbar state
• <object>, if the usemap attribute is present
• <video>, if the controls attribute is present

Additionally, any element with a tabindex attribute is considered interactive.

These rules are all part of the HTML spec and are well-documented, but kind of a pain to keep track of. Is there an easier way of checking which content categories an element belongs to?

Answer 1

No, there is nothing in the DOM for the classification of elements that way. The classifications have been made in HTML5 spec prose only. There are few old classifications that are reflected in the DOM, such as classification of form fields by their type, with the type property, and you can indirectly find some classifications according to rendering rules in the sense that different elements have different display property value in style settings. But all these modern classifications need to be implemented in your code using lists of element names. You can see this from by taking a very close look at DOM definitions in HTML5 and finding out that they don’t cover the classifications.