Markup for specific words and text

Use the correct HTML to express the semantics of words or text with a distinct role or purpose.

To learn about semantics and why semantic markup is important, see the Knowledge Area: Semantics and markup.

Meeting the Web Accessibility Standard

Where the meaning, role or purpose of some text is visually indicated, putting that text in an HTML element that expresses the same semantics helps meet WCAG Success Criterion 1.3.1 Information and Relationships (Level A).

Semantic HTML for text with specific meaning

HTML includes a wide range of elements for different types of content, for example:

The guidance on this page relates to elements that identify the semantics of words, phrases or other passages of text that have a specific purpose or meaningful relationship to the content around them.

For the complete list of text-level semantic elements, what they mean and how to use them, see Inline text semantics — HTML elements reference — MDN Web Docs.

For the official specification of these elements, see Text-level semantics — HTML: The living standard.

Note: Browsers apply their own default CSS styles to text based on its HTML markup. However, those styles can always be changed by the page author.

Common text-level semantic elements

Here are elements that indicate a specific meaning, structure or relationship for some common types of words or text.

<b> — text highlighted to stand out but with no extra importance

Use the <b> element to bring attention to words or phrases that do not have any special importance, but that are useful to be pointed out for practical purposes, such as key words in a summary. The <b> element does not add any extra importance or emphasis, or imply an alternate voice or mood.

By default, browsers display text marked up with <b> in bold type, but the page author can change this style.

Do not confuse <b> with the <strong> element.

More information:

<br> — a line break

Use the <br> element to create a line break in the text such as in a poem or an address where the line break is important and meaningful.

Do not use <br> to create space after paragraphs, headings or other content.

More information:

<cite> — the title of a work

Use the <cite> element for the title — not the author or creator — of a work that is mentioned, cited or referenced in the text (for example, a book, article, report, song, film, painting, social media post, show or exhibition).

More information:

<code> — computer code

Use the <code> element for inline fragments of computer code, markup, file names, and the like. With multiple lines of code, wrap the <code> element in a <pre> element.

By default, browsers display text marked up with <code> in a monospace font, but the page author can change this.

More information:

<del> — deleted text

Use the <del> element to markup content that’s been removed or deleted from the page. Only use <del> within paragraphs and other block-level elements. For instance, do not let the <del> element wrap multiple paragraphs, list items.

By default, browsers put a line through text marked up with <del>, but the page author can change this style.

The <del> is often used alongside the <ins> element.

Some screen readers will announce the presence of the <del> element. See Screen reader support for text-level elements below for details.

More information:

<dfn> — a term with a definition

Use the <dfn> element to indicate a term that is defined in the accompanying text.

More information:

<em> — stress emphasis that provides additional meaning

Use the <em> element to add stress emphasis to a word or phrase in order to slightly change the meaning of the sentence it is in. Often, depending on which word or phrase has stress emphasis, a sentence can have a slightly different meaning.

By default, browsers display text marked up with <em> in italic type, a style that is typically used to indicate stress emphasis. The page author can change this style.

Do not confuse with the <i> element. And do not use <em> just to make text italic. Instead, ask yourself if the text needs to be italic, and why, and if there’s a semantically appropriate element for that.

More information:

<i> — a different mood or voice

Use the <i> element to convey things like idiomatic phrases from another language, transliterations, technical terms, ship names and thoughts that are set apart from the context in the surrounding text.

By default, browsers display text marked up with <i> in italic type, but the page author can change this style.

Do not confuse with the <em> element.

More information:

<ins> — inserted text

Use the <ins> element to markup content that’s been added or inserted into the page. Only use <ins> within paragraphs and other block-level elements. For instance, do not let the <ins> element wrap multiple paragraphs or list items.

By default, browsers underline text marked up with <ins>, but the page author can change this style.

The <ins> is often used alongside the <del> element.

Some screen readers will announce the presence of the <ins> element. See Screen reader support for text-level elements below for details.

More information:

<kbd> — user input

Use the <kbd> element to represent text that describes user input from a keyboard. You can also use it to represent a voice command or user input from any other device.

More information:

<mark> — text highlighted for reference purposes

Use the <mark> element for a word or passage of text that is being highlighted, either because it’s being referred to elsewhere in the text, or because of its relevance to the user’s activity. For example, words in a web page that match a search string might be programmatically highlighted using the <mark> element.

By default, browsers usually highlight text marked up with <mark> in yellow, but the page author can change this style.

More information:

<q> — a quotation from another source

Use the <q> element for a short inline quotation from another source.

Web browsers will typically add appropriate quotation marks for the quote’s declared language, but the page author can set the style for these.

More information:

<s> — content that is no longer accurate or relevant

Use the <s> element to represent text that is no longer correct, accurate or relevant.

By default, browsers put a line through text marked up with <s>, but the page author can change this style.

Some screen readers will announce the presence of the <s> element. See Screen reader support for text-level elements below for details.

More information:

<small> — small print or a side comment

Use the <small> element in short runs of text representing ‘small print’, such as copyright and legal text, or side comments.

By default, browsers display text marked up with <small> in smaller type, but the page author can change this style.

More information:

<strong> — important, serious or urgent content

Use the <strong> element to convey content with strong importance, seriousness or urgency.

By default, browsers display text marked up with <strong> in bold type, but the page author can change this style.

Do not confuse with the <b> element. And do not use <strong> just to make text bold. Instead, ask yourself if the text needs to be bold, and why, and if there’s a semantically appropriate element for that.

More information:

<sub> — a subscript

Use the <sub> element to represent a typographical subscript with a specific meaning.

By default, browsers display text marked up with <sub> half a character below the normal line, usually in a smaller font, but the page author can change this style.

Do not use the <sub> element to visually position text simply for stylistic reasons.

More information:

<sup> — a superscript

Use the <sup> element to represent a typographical superscript with a specific meaning.

By default, browsers display text marked up with <sup> half a character above the normal line, and usually in a smaller font, but the page author can change this style.

Do not use the <sup> element to visually position text simply for stylistic reasons.

More information:

<time> — a date or a time

Use the <time> element to represent a specific period in time. Using the <time> element makes it easier for software to index date or time data.

More information:

<u> — unarticulated rendered annotation

Use the <u> element to annotate spelling errors in text, proper names in Chinese text, or any other situation where a rendered text annotation may be beneficial.

By default, browsers render the <a> element (links) and the <u> element with an underline. Avoid using the <u> element where it could be confused with a link.

The <u> element should not be used for purely decorative purposes (i.e., adding an underline to text). Purely decorative changes to text should be achieved through the CSS text-decoration property.

The <u> element was called the ‘underline’ element in older versions of HTML, but its semantic meaning and purpose have been redefined in modern HTML.

Consider using alternative text-level elements before using the <u> element — as described in Other elements to consider using — MDN Web Docs.

More information:

<var> — a variable

Use the <var> element to represent a variable — that is, a character or symbol representing a changeable quantity or value — whether that’s in a mathematical expression, a programming context, or just some sentence.

By default, browsers display text marked up with <var> in italic type, a style that is typically used with variables. The page author can change this style.

More information:

Text-level semantics and assistive technologies

Using the correct HTML elements to mark up text with special semantics enables assistive technologies (AT) to:

For example, there could be a browser plugin that makes content stand out visually to help people with an intellectual impairment or low vision more easily identify elements that represent a date or time (<time>).

Screen reader support for text-level elements

Screen readers generally do not convey the semantics of text-level elements to users. Some of this has to do with the fact that conveying such information can add noise that interferes with the user listening to and trying to understanding the content.

This lack of screen reader support also has to do with text-level elements not always having specific roles for browsers to expose in the accessibility tree. For example, while browsers assign a <button> element a role of button in the accessibility tree, text-level elements historically have had no such associated roles. However, this is changing.

The specification that defines the available roles for HTML elements, Accessible Rich Internet Applications (WAI-ARIA), has been updated to include roles for some of the common text-level semantic elements. For example:

At the same time, just because a particular element has a default ARIA role, it’s not guaranteed that browsers will expose that role for the element in the accessibility tree, or that screen readers will convey the information to users, even if the element is exposed with the correct role.

Still, given that these text-level elements now have default roles, browsers and assistive technologies are better placed to convey the elements’ semantics to users in the case that it makes sense to do so or that users want to know about them. For this reason, it’s good to continue applying the correct text-level semantic elements to content.

For details on the state of screen reader support for these elements as of September 2023, see Screen Readers support for text level HTML semantics — TPGi.

To check if an HTML element has a default role associated with it, see the table, Rules of ARIA attribute usage by HTML element — ARIA in HTML — W3C.

Note: Accessible Rich Internet Applications (WAI-ARIA), or just ARIA, is a W3C technology for programmatically adding semantic information about content — such as its name, role, state or other properties. ARIA is intended to be used when the host markup language — for example, HTML — does not include elements or attributes with the semantics needed to represent the content.

When ARIA is used correctly, it enables assistive technologies (AT), especially screen readers, to relay the necessary semantic information about the content to the user.

As a rule, do not use ARIA if a native HTML element or attribute with the needed semantics or features already exists.

For more information, see:

Testing that text with special semantics is marked up correctly

Inspect the HTML source code of the web page and search for the code you want to check. Make sure that the correct HTML elements have been used to convey any semantic meaning intended by the text content, especially if that meaning is also conveyed through the text’s visual formatting.