Examples of Inline Semantic Elements, Non-Semantic Elements, and Special Characters

This page is for testing screen reader and accessibility API support for semantics and/or style reporting on inline HTML elements and certain character entities. MDN maintains a complete listing of inline text semantics, including tags for demarcating edits. This page contains a large portion of those tags. We apply a light gray background to all tagged text, though not to the blockquote element, which should be visually set off in browsers because they tend to indent blockquote by default. Any other styling, except the font face, is supplied by the browser.

If you are going to use a screen reader for testing how the tags and characters on this page are spoken, you might test both with the screen reader's default verbosity and with verbosity set to its highest level. And for the fullest picture, navigate both at the sentence or word level and character-by-character.

B, Strong, I, Em

Elements that are marked bold or wrapped with an italics tag should have style but not convey semantics. On the other hand, elements marked with the strong tag should convey strong importance or urgency and elements wrapped with an em tag should convey stressed emphasis.

Blockquote, Cite, Q, S, U, Mark, Del, Ins, and ARIA 1.3 Annotations

A blockquote is supposed to contain an extended quotation, like this q element that is followed by a cite element, all within a blockquote:

The aim of science is to seek the simplest explanations of complex facts. We are apt to fall into the error of thinking that the facts are simple because simplicity is the goal of our quest. The guiding motto in the life of every natural philosopher should be, Seek simplicity and distrust it.
The Concept of Nature – Alfred North Whitehead (1919)

You might also see the s tag, which may render with a line through it, possibly to indicate that the text is no longer relevent but which does not indicate the same thing that the del element does — that text has been removed in an edit. The counterpart of del is the ins element, which indicates insertion of new text content. Other forms of text annotation are the mark element, which indicates text highlighted for notation or reference because the text has some importance. And the u element, which indicates a non-textual annotation, such as a spelling error.

In ARIA 1.3, the mark, del, and ins tags will be getting annotation roles that should be surfaced in assistive technologies. Here are these tags, with their role attributes, and a couple span tags for roles that don't have an HTML tag analog.The ins tag represents inserted content, the del tag represents a deletion. If some content is to be deleted and then replaced by inserted content, it can all be wrapped within a tag with a role of suggestion. The mark tag denotes elements containing text that is marked/highlighted for reference purposes. And you can mark up a reaction to some content on the page via role of comment.

The ARIA 1.3 annotation roles also include mechanisms for referencing annotated content using aria-details=[ids of annotated elements] so that, for example, a comment could reference a deletion/insertion suggested edit. The MDN page linked above has many examples. But as of July 2022 there is little support for the semantics being exposed in browsers (Firefox by default and Chrome behind a flag) and no screen readers are supporting speech with this markup.

Sub, Sup, Var, Code, Kbd, Samp, and various Trademark-related symbols

Time, Abbr, Span

Commonly Used Special Characters