Semantic HTML

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.

Non-Semantic Tags

Tags such as a <div> or <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

Semantic tags, such as <header> or <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.