Intelligence Community Design System

Use semantic HTML elements.

Semantic elements, such as<form> and<table> , clearly define their content. Non-semantic elements, such as<div> and<span> , don't tell us about the meaning of their content and are often overused.

Using correct semantic HTML elements makes web content more accessible.

Learn more about HTML elements , particularly<nav> , <section> and<role> . They're mentioned in Document structure and Semantic layout .

When semantic elements aren't used, the page has no structure or definition available to assistive technologies.

Without structure or definition, to assistive technologies it's like viewing all the words on a page together in a single paragraph with the same styling, creating a wall of text.

With semantic elements, assistive technologies can navigate over a page using these semantic elements. For example, screen readers can jump through headings to find the section they want to read.