Skip to content

Semantic HTML

Semantic HTML tags describe the meaning and role of their content and improve accessibility for users of screen readers.

It is not about learning a new set of HTML elements, but rather about a developer’s mindset and approach to choosing the most appropriate tags for the content.

Examples of semantic tags include:

  • <h1> (contains the top-level page heading)
  • <main> (identifies the main content area of the page)
  • <nav> (contains links used to navigate the site)
  • <form> (contains a collection of inputs for gathering data)

Examples of generic tags:

  • <span>
  • <div>