Semantics and markup

Use HTML markup to programmatically define the context, structure and meaning of web content so that it can be presented to people in different ways and works with assistive technologies.

Meeting the Web Accessibility Standard

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

What are semantics?

Semantics generally refers to the meaning of words and phrases. In a web context, semantics refers to the meaning — that is, the role or purpose — of a piece of web content. For instance, some web content might:

• serve as a heading to introduce the content that follows it
• serve as the footer for the page, with links to copyright and privacy statements
• represent a citation, glossary or address
• be part of a paragraph, list, or table
• be interactive, like a link, button, menu or text input
• have extra special importance.

Such semantics are often — but not always — indicated visually to sighted users. For example:

• text is larger and bolder to show that it’s a heading
• a link within a passage of text is underlined
• the page’s main content has visual characteristics that clearly distinguish it from the page’s main header and footer content.

Content can also be purely for visual decoration, in which case it doesn't have any relevant meaning or semantics.

Semantic HTML markup

Semantic HTML markup tells the browser and other software what each bit of web content is or does in the page, as opposed to how it looks. This is critical because people engage with content through different senses. For instance, while most sighted users rely on the content’s visual presentation to understand it, many vision impaired users will use a screen reader that presents the content aurally. On the other hand, someone who is deaf and blind is likely to read and interact with the content by touch, using a Braille display.

When content has the appropriate semantic HTML markup, that content’s role or purpose can be programmatically determined and communicated to people through the assistive technologies they’re using.

For more on how semantic markup works with browsers and assistive technologies to make content accessible, see the Knowledge Area: Browsers, code and assistive technologies.

For more detailed information on semantics, why they’re important and how to use semantic HTML, see:

• What On Earth Is Semantic Markup? (And Why Should You Learn To Write It) — HTML.com
• Semantics provide meaning — Accessibility Developer Guide
• Semantics in HTML — MDN Web Docs
• Semantics — HTML Living Standard.

Use the correct semantic element

Most HTML elements are semantic and say something specific about the context and type of content they contain.

So, consider each piece of content’s role or meaning in the page and use the element that expresses that in your HTML markup. There are many HTML elements for both text and non-text content, some with distinct meanings that you might not have realised were available.

For detailed information on what HTML elements are available and their semantics, see:

• HTML elements reference — MDN Web Docs
• The elements of HTML — HTML Living Standard.

For additional guidance on HTML markup for specific types of text content, see Markup for specific words and text — Web Content Type: Text content.