the categorizations as represented as indented lists:
each indentation represents a subtype relation;
type names that are on the same line (→ separated by " ") or that are
at the same level of indentation are siblings in the subtype hierarchy;
parenthesis are around type definitions;
"//" prefixes a line-comment about a type
("//see above" reminds that a type and its subtypes have already
been introduced, so these sutypes are not repeated);
Categorization types begin by an uppercase letter (or "..._"), unlike leaf types;
leaf types are in blue and hyperlinked to a Google page of MDN definition for them;
": " prefixes leaf types that are on the right of – on the same line –
as a categorization type;
"..." prefixes a type name to avoid repeating the name of
of its supertype at the beginning of this type name;
bold characters are used for highlighting some important categories;
contraction/expansion symbols are at the end of lines or type names that
can be clicked on to contract/expand the list of their related subtypes.
0. HTML Elements
A big part of this categorization comes directly from the
W3C categorization of HTML elements.
In this indented list, types are added to represent the intersections of
the W3C types, thus enabling to see what these intersections are.
Embedded_element (one that loads an external resource)
Always-interactive_embedded_element //see above
Possibly-interactive_embedded_element //see above
Non-interactive_embedded_element: canvas math picture svg
Non-embedded_phrasing_element
Interactive_non-embedded_phrasing_element
Always-interactive_non-embedded_form-associated_phrasing_element //see above
Possibly-interactive_non-embedded_phrasing_element //see above
Non-interactive_non-embedded_phrasing_element
Non-interactive_non-embedded_possibly-phrasing_element
area del ins link map meta //+ autonomous custom text elements
Non-interactive_non-embedded_always-phrasing_element
Non-interactive_non-embedded_always-phrasing_metadata_element: template
Non-interactive_non-embedded_always-phrasing_non-metadata_element
Non-interactive_non-embedded_always-phrasing_non-metadata_form_input_element
datalist meter output progress
Non-interactive_non-embedded_always-phrasing_non-metadata_non-form_element
Script-related_text_element: noscript script
Text_element
Semantic-less_grouping_text_element: span data mark ruby slot
Slight-semantic-giving_text_element
abbr em strong samp q code var dfn cite time
Presentation-focused_text_element: b i sub sup s u small br wbr
Bidirectional-indicator_related_text_element: bdi bdo
Form-associated_element
Form-associated_non-flow_element: optgroup datalist option
Form-associated_flow_element
Interactive_form-associated_flow_element
Always-interactive_non-embedded_form-associated_flow_element //see above
object input //object is embedded, input is not, both are interactive
Non-interactive_non-phrasing_form_input_flow_element //see above
Non-interactive_non-embedded_always-phrasing_non-metadata_form_input_element
Disclosure-widget_or_dialog-related_element: details summary dialog menu
Script-related_element: script noscript template slot
shadow//obsolete in favor of Web Components
1. HTML Attributes
1.1. HTML-attribute Names
Additional legend for this categorization:
it is with respect to the relation (from a document element to the attribute value)
that each attribute represents;
each type name is postfixed by '@' followed by the type (or types separated by '/')
of HTML element(s) that can have such an attribute;
"@G" means that the attribute is "global", i.e., any HTML element can have this attribute;
before the '@', there may also be '/' to separate name of types with the same element;
'*' (just before '@') is a regular expression symbol referring to
name endings such that, given the name beginning (the one before the '*'),
existing name are referred to.
This hierarchy lists and organizes some but not all HTML-attribute values.
Its intent is to give an idea of what kinds of values there are.
For each attribute, the list of possible values must be found via official documentations,
such as documentations from the W3C
or those from MDN.
HTML_attribute_value
HTML_basic_abstract-data-type_value
String
Unconstrained_string (freeform text, e.g., alt, title)
Enumerated_HTML_ADT_value (predefined, as in "crossorigin='anonymous'")
Boolean-like_HTML_ADT_value
true false yes no on off all none auto default
//or via an attribute presence/absence, as with checkedor disabled
List-representing_abstract-data-type_value (comma/space-separated predefined values,
as in "rel='stylesheet alternate'", "sizes='16x16 32x32'")
Name
ID (e.g., id)
Form_control_name (e.g., name for an Input_element)
URI (HTTP URI, FTP URI, e.g., href, src, action)
..._for_measurement
..._for_length (e.g., width, height)
px em rem % vw vh cm mm in pt pc ex ch
..._for_percentage (%)
..._for_time
..._for_time instant (specific moment, e.g., datetime)
..._for_time_period (e.g., max, min, step) //YYYY-MM-DD YYYY-MM-DDTHH:MM:SSZ
..._for_time duration (e.g., animation-duration, transition-delay): s ms
..._for_resolution (e.g., image-resolution): dpi dpcm dppx
..._for_frequency (e.g., animation-timing-function): Hz kHz
..._for_angle (e.g., rotate, skew): deg rad grad turn
..._for_color
..._via_color_name (e.g., red, blue)
..._via_RGB_triplet (e.g., "#RRGGBB", "rgb(r,g,b)")
This hierarchy lists and organizes some but not all CSS-property values.
Its intent is to give an idea of what kinds of values there are.
For each property, the list of possible values must be found via official documentations,
such as documentations
from the W3C or those
from MDN.