Semantic headers

Importance of semantic headers

Semantic headers are important for browsing pages with a screen reader.

Using semantic headers

Using semantic headers simply means using the h1 to h6 tags.

Avoiding minicking headers

The header above looks like a header, but it is not a semantic header. As a result, it is not picked up by screen readers.

Semantic lists

This is a semantic HTML list of the steps to use semantic HTML:

  1. Use button tags for buttons
  2. Use header tags for headers
  3. Use list tags for lists

The wrong way to do this:

1. Use div tags and styling to mimick buttons

2. Use div tags and styling to mimick headers

3. Use div tags and styling to mimick lists