This group merges Living Standard §4.5 and §4.7,
(or on MDN Inline Text Semantics and Demarcating Edits).
Respectively they count 29 and 2 elements, and are close both semantically and stylistically,
so here they are merged to reduce to amount of groups.
Members have the commonality of being Phrasing content,
by default display: inline.
They tend to contain prose versus prior elements containing metadata or sub-trees.
As such it can be approx. viewed as The group of leaves from the DOM tree shown visually
(albeit transitively so, since they may also contain elements from this group,
for instance a dfn containing an abbr).
They are good targets for high-impact, low-complexity styling,
the layout being less of a concern.
Since this is the largest group, and element differences are subtle,
an indicative, informal sub-split is used to organize this group:
Intonational
Prose with altered intonation.
Technical
Markup around machine interaction.
Referential
Relation names and/or referents.
Typographical
Typographic change with semantics.
Do the subtle difference in semantics matter?
It can appear that the phrasing tags make very little difference,
especially if CSS is used to alter default styles,
and when the elements provide no interactivity or special mechanisms.
However, consider that assistive technologies may use the elements
in changing tone for text-to-speech, crawlers may use the tags
to get a better understanding of the page content, etc.
span Content Span
The canonical/prototypical element of this group.
Generic inline text content span.
Typically, using this element makes sense by enriching
it with user-specific attributes, like a custom class.
Otherwise, it is practically equivalent to a direct text entity in the XML sense.
b Bring Attention To
Used to be the Boldface element,
but semantic HTML5 retro-fitted it as
marking a text-span to Bring Attention To.
For headings, favor h1-6.
For highlights, favor mark.
For important spans, favor strong.
For emphasis, favor em.
i Idiomatic
Used to be the Italic element,
but semantic HTML5 retro-fitted it as
marking an Idiomatic text span.
For quotations, favor blockquote
or q.
For citations, favor cite.
For emphasis, favor em.
u Unarticulated Annotation
Used to be the Underline element,
but semantic HTML5 retro-fitted it as
marking an Unarticulated Annotation.
s Strikethrough
Sample Strikethrough text.
For text spans that have been deleted/redacted,
favor del.
mark Highlighted
Sample Highlighted text.
Closely related to strong,
which wraps text of importance,
compared to highlighting which shows relevance.
em Emphasis
Sample Emphasized text.
It can be nested: deeper emphasis levels indicate more emphasis, semantically
(visually, the element is regardless typically displayed in font-style: italic).
strong High Importance
Sample High importance text.
By default this renders text in font-weight: bold.
Semantically, a dual complement to small.
small Low Importance
Sample Low importance text.
By default this renders text in a smaller font-size,
hence the actual inline element will have a
smaller computed line-height,
and height.
Semantically, a dual complement to strong.
time Time
A time element with an ISO 8601 timestamp
and containing the natural language
version:
(Dates in natural language best practices).
The time element cannot have a pubdate attribute.
It was part of early drafts, but it got removed.
It can specify ranges as well:
kbd Keyboard
Used to display an input from a text entry device.
Sample:
code Code
Marks an extract (e.g. a single line) from a larger source code.
To represent multiple lines of code,
can be wrapped in a pre block.
Displayed in monospaced font.
The os.scandir function is used
in the wrapper os.walk(top) -> (curr, dirs, files).
var Variable
Marks a variable name in a mathematics or programming context.
Multiplying R(θ)
by p gives the rotated position.
samp Sample
Marks an extract from a larger machine output,
a computer program.
Displayed in monospaced font.
The help of global reg-expr print will indicate: Usage: grep [OPTION]... PATTERNS [FILE]...
data Data
Marks a machine-parsable value in human representation,
where the value provides the
machine version.
For example: Current price is sixty dollars.
By default, the machine value is not displayed.
del Deleted Text
Attribute metadata through cite and datetime.
Paired with ins, shows a "diff" in the text.
<del>old sentence</del> <br />
<ins datetime="2024-10-10">
new sentence with correction</ins>
Defines an abbreviation or an acronym. Dotted underline.
The global title shows
the long-form of the abbreviation, usually on hover.
HTML
is the mark-up language of web pages.
dfn Definition
Used to mark the defined term
within the definition being its closest section ancestor, or paragraph, or
dt/dd pairing
A possible convention to help referencing is attributing
id=def-term to the
dfn of the term.
Can be found when declaring an abbr.
By default, the content is shown
font-style: oblique.
a Anchor
Shows a clickable inline text.
Similar to the
link and
area elements.
See Links for more information.
q Inline-Quote
Shown in quotation marks: An example quote..
May cite a reference URL, like its
Grouping Block cousin, blockquote.
Shown font-style: oblique.
Unlike prior versions of the standard, this element is now allowed within
blockquote directly.
Example citation.
br Line Break
Void Element.
Indicates a line-break/carriage-return in the text.
Using two will create a 1lh gap,
but this should be specified via equivalent styling.
wbr Line Break Opportunity
Void Element.
Indicates a position within text where the browser
may insert a line-break/carriage-return to break the text line.
rt Ruby Text
Content of the annotation.
The term ruby is for the typesetting unit of measurement,
smallest size text can be printed on newsprint while remaining legible.
rp Ruby Fallback Parenthesis
Provides fallback parenthesis when ruby annotations are not supported.
ruby Ruby Annotation
漢 字
East Asian typography pronunciation, translation, or transliteration info.
Parent element for both rt and rp.
bdi Bidirectional Isolate
الرجل القوي إيان
Treat directionality of text in isolation from its surrounding text.
bdo Bidirectional Text Override
אה, אני אוהב להיות ליד חוף הים
Override current directionality of text.
sup Superscript
Marks a superscript text span.
For Scientific notations, Footnotes.
See related sub.