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:

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

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:

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:

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

Note: <div> and <span> have no semantics.

The <div> and <span> elements are generic containers for content and do not say anything about the content they contain.

Try to avoid using a <div> or <span> element when there’s another HTML element with semantics appropriate for the content in question. Use the most applicable HTML element whenever possible.

If you do use a <div> or <span> for content whose semantics can be represented by another HTML element, make sure to replicate those semantics, along with any associated expected interactivity.