Semantic HTML is the use of HTML tags that represent the content so that browsers can appropriately parse a site’s content. This is beneficial as it ensures that content can be described accurately for those that rely on accessibility features.
Tags such as a
<span> represent non-semantic HTML: these tags do not convey any information about their content. These tags are multipurpose containers that can support a variety of content. The use of these tags obscures the contents of a page and does not capitalize on the inbuilt attributes available in the use of the appropriate semantic tags.
Semantic tags, such as
<figure>, are designated for a specific purpose, which is communicated by the tag name. In addition to providing better clarity to the organization and content of a page, semantic tags enable additional features for accessibility. For example, using the
<button> tag for controlling any embedded media also allows for navigation, and use of the button via keyboard.
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.