Emphasized Text (, , , , , )

When To Use

Use  and  to set importance to text. This text is often rendered as bold text. ¹
Use  and  to change articulation or tonality of the text. This text is often rendered as italic text. ¹
Use  to
- supplement "pasted" text (like a quote, or code snippet) to highlight parts that are important in the context that surrounds this "pasted" text. ⁸
- emphasize information that is pertinent to the user‘s ongoing activity, such as words that correspond with a search query. ⁷
Use , according to the specification, for side comments like disclaimers, caveats, copyrights and so on. At the time of writing the tag is not exposed to the accessibility tree. Therefore the current use is only for styling purposes, in which case you may be better of using CSS in order to differentiate between semantics and styling. ¹⁰

Rules

In theory, the and tags are semantically meant for emphasizing text, whereas the and tags lack that semantic meaning. ¹
Although in theory, screen readers could pronounce and tags in a distinct voice or style, this is infrequently observed in practice (the same is applicable for and tags). ¹
This is why it is not that critical which tag you use.
While some sources recommend not using and all together ², other sources recommend the following ¹:
- Utilize  and  tags when emphasizing text that is not only visually significant but also carries semantic importance. Like for:
 - Use tags for warning labels or other content that requires a high level of seriousness or urgency.
 - Use or tags to emphasize a few crucial concepts or significant vocabulary items (if emphasized text is used in nearly every sentence, consider using tags instead, as illustrated in the examples below).
- Use  and  in these examples:
 - Use tags to assist users of a visual browser in scanning for essential concepts within sentences.
 - Use tags for academic conventions such as book and movie titles, foreign words, and variables in math.
 - Use  or  for design-related purposes.
It is possible to substitute both  and  tags with other HTML elements such as divs, which can have their styles set through CSS. The decision to do so depends on the preferred coding style. ²
Rather than relying solely on design elements, it is often better to use wording to highlight important concepts. This can be achieved by repeating or rephrasing important information or by explicitly using words like "important". The reason for this is that design elements may not be picked up by assistive technologies, potentially resulting in a loss of information. ²
You should also make sure to use the most fitting semantic element. Other options could also be: <cite> or <dfn>.
The  element serves a different purpose than the and elements. While and are used to emphasize text by making it bold, the element is used to visually highlight important text within the original content. For instance, in a document describing exam content, an excerpt from a textbook that originally used to emphasize a warning could be marked with the element to indicate its relevance to the exam. ⁸
To increase the accessibility of the  element you can add a announcements for assistive technologies to the element if it increases the usability in your specific use-case. To do that add visibly hidden content via pseudo elements as Adrian Roselli suggests and as shown in the code below: ⁹

mark::before, mark::after {
    clip-path: inset(100%);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}

mark::before {
    content: " [highlight start] ";
}

mark::after {
    content: " [highlight end] ";
}

Sources

PennState Accessibility: Bold and Italic Formatting in HTML
Siteimporve: Accessibility: The use of emphasis in text
MDN: : The Strong Importance element by Mozilla contributors is licensed under CC-BY-SA 2.5
MDN: : The Emphasis element by Mozilla contributors is licensed under CC-BY-SA 2.5
MDN: : The Bring Attention To element by Mozilla contributors is licensed under CC-BY-SA 2.5
MDN: : The Idiomatic Text element by Mozilla contributors is licensed under CC-BY-SA 2.5
MDN: : The Mark Text element by Mozilla contributors is licensed under CC-BY-SA 2.5
HTML Spec: Living Standard, 4.5 Text-level semantics, mark is licensed under Creative Commons Attribution 4.0 International License
HTML Spec: 4.5.4 The small element is licensed under Creative Commons Attribution 4.0 International License

Created at: 10.03.2023, Last updated at: 24.06.2023

Emphasized Text (<strong>, <em>, <b>, <i>, <mark>, <small>)

When To Use

Rules

Sources