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;
": " 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.
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 is not an attempt to list and organize 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)")
Role-specific_HTML_attribute_value
..._for_MIME_type (e.g., type="image/png", type="text/css")
..._character_related
..._character-set_related (e.g., ASCII, Unicode)
..._character-encoding_related (e.g., UTF-8, ISO-8859-1)
..._language_related (as in "lang='en'", 'lang='fr'")
..._link_related
..._link_type (as in "rel='stylesheet'", "rel='icon'")
stylesheet icon alternate author help license
next nofollow noopener noreferrer prev search tag
..._referrer_policy_related
no-referrer no-referrer-when-downgrade origin origin-when-cross-origin
same-origin strict-origin strict-origin-when-cross-origin unsafe-url
..._input_type_related
text password email number tel url search checkbox,
radio file submit reset button hidden date
datetime-local month week time color range
..._media_related
..._media_descriptor_related (as in "media='screen'" and "max-width:600px")
all screen print speech tty tv handheld projection
braille embossed aural
..._frame_related
..._frame_target_name: _blank _self _parent _top
..._iframe_related
..._iframe sandboxing policy_related
allow-forms allow-modals allow-orientation-lock allow-pointer-lock
allow-popups allow-presentation allow-same-origin allow-scripts
allow-top-navigation
..._accessibility_related
..._ARIA role_related (e.g., role="button", role="alert")
alert alertdialog button checkbox dialog gridcell link log
marquee menuitem progressbar radio scrollbar slider status
tab tabpanel timer tooltip treeitem
..._code_related
..._script-data_related: JavaScript content (as in within Script tags)
..._style-sheet-data_related: CSS content (as in within Style tags)
..._event_related (JavaScript event handlers, e.g., onmouseover, onchange)
..._cross-origin_policies_related: anonymous use-credentials
This hierarchy is not an attempt to list and organize 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.
CSS_property_value
CSS_property_basic_abstract-data-type_value
Boolean-like_CSS_ADT_value: true false none auto visible both
Numeric_CSS_ADT_value (integer/float)
..._for_measurement
..._for_length
..._for_absolute_length: cm mm Q in pc pt px
..._for_relative_length: em ex ch rem vw vh vmin vmax %
cap ic lh rlh vb vi cqw cqh cqi cqb cqmin cqmax
rcap rch rex ric
..._for_angle: deg grad rad turn
..._for_time: s ms
..._for_resolution: dpi dpcm dppx
..._for_scaling: x
..._for_color
..._for_named_color (red blue green black white transparent etc.)
..._for_RGB_color: rgb(r,g,b) rgba(r,g,b,a)
..._for_HSL_color: hsl(h,s,l) hsla(h,s,l,a)
..._for_hexadecimal_color: #RRGGBB #RGB #RRGGBBAA #RGBA
Textual_CSS_ADT_value
Pre-defined_CSS_keyword
CSS-wide_keyword: inherit initial unset revert revert-layer
Unconstrained_CSS_string (e.g., "text", 'text')
CSS_identifier
CSS_URL
Generic_CSS_keyword: inherit initial unset revert revert-layer
Custom_CSS_identifier //starting by "--" or
// assigned with properties such as grid-area
CSS_property_role-specific_value
..._box/layout/display_related
..._position_related
..._horizontal_alignment_related: left right center justify start end
..._vertical_alignment_related: top bottom middle baseline sub super
text-top text-bottom
..._physical_position_related: top right left bottom
..._logical_flow_related: block-start block-end inline-start inline-end
start end
..._size_related
..._background size_related: auto cover contain
..._padding_related
..._margin_related
..._border/outline_related
..._border-style_related: solid dashed dotted double groove ridge inset
outset none hidden
..._border-width_related: thin medium thick
..._display_related
..._display-mode_related
none block inline inline-block inline-table inline-flex
flex grid table table-row table-cell
list-item run-in contents flow-root ruby ruby-base ruby-text
..._visibility_related: visible hidden collapse
..._color_related
..._background_related
..._background-size_related //its subtypes are already listed above
..._background-repeat_related: repeat repeat-x repeat-y no-repeat space round
..._background-attachment_related: scroll fixed local
..._background-position_related: top bottom left right center
..._structured-content_and_box/layout_related
..._grid_related
..._grid_track_sizing_related: auto min-content max-content fit-content
repeat(n,value) subgrid