Grouping elements have an intermediate role in the document,
they generally belong to one ancestor Section,
and structure one or more Text-level decendants.
If one views the DOM as a semi-structured hierarchical data-structure,
Grouping Elements wraps descendants into a slightly more formal
algebraic data-type and indicate data-structuredness changes
NB. All of those roles can be equivalently achieved with elements from other groups,
and none of those roles are prescribed by the specification rigidly,
but it is a useful summary for the usage of each element of this group.
Each get a role-matching simple default styling,
e.g. ordered lists get a numbering marker prior each item,
preformat blocks are shown monospace preserving white-spaces, etc.
Deprecated attributes: type and
compact, in favor of equivalent style.
dd Description Item
Must appear under dl,
or alternatively under div
provided in turn appearing under dl.
May appear as a direct-subsequent of another dd,
but in any case must appear as a subsequent of some dt.
dl Description List
Use-Cases
Formatting this article,
name-value pairs, generally any N-to-N mapping,
structuring a FAQ,
glossaries / terminologies / dictionaries.
Must appear under dl,
or alternatively under div
provided in turn appearing under dl.
May appear before another direct-subsequent dt,
but in any case must appear before some subsequent dd.
div Content Division
The legitimate uses of this element are: to use as a sample block for demos,
placeholding, to partition dl entries,
excptional cases when no other element provide fitting semantics.
Otherwise it has no intrinsic semantics, making it a generally bad choice
for accessibility / search-engine ranking. Prefer alternatives.
blockquote Block Quotation
An example quote in a blockquote element.
Fit for prose too long for the other quoting element,
q - which is inline,
unlike this element, being display: block.
The element can host prose directly, or a set of paragraph, etc.
To cite a reference URL, one option is to use the cite
attribute (supposed to be shown by the user-agent but support is lacking as of ),
another is nesting a cite. The prose is specifically
allowed to be paraphrasing, or omitting parts from the reference, which should be
indicated via standard punctuation, for instance, (...).
reference
pre Pre-format Block
Contained text displayed as white-space: pre
(new lines preserved) in font-family: monospace.
Useful to display raw text, markdown, and similar text prior to being formatted.
Useful to host text transformed via JS (e.g. Mermaid graphs).
Useful for code snippets as well.
p Paragraph Block
Use to section parts of text as separated paragraphs
in display: block,
unlike direct Text Elements -
most prose is wrapped in
p, sequentially.
Phrasing content, may only contain other phrasing content.
Another non-phrasing block automatically closes the current paragraph,
the closing-tag is thus optional.
hr Horizontal Separator
Void element.
All attributes (besides global) deprecated.
Displays a horizontal ruler.
figure Figure with Optional Caption
Container for para-textual content referenced
as a single unit otherwise see fig 1.
figcaption provides its accessibility label.
Typically will host an embedded element such as picture,
video; or a svg / math
namespace diagram, or a table.
figcaption Figure Caption
First or last child of parent figure,
providing its accessibility label.
When the figure is a table,
the outer figcaption is
used instead of the inner caption.