Headings

Headings provide structure to a page. A person using a screen reader can navigate a page quickly with headings on the page if the headings are semantic. Semantic headings include real heading tags such as h1, h2.

Semantic heading

The heading below is a real heading and uses an <h3> tag. If you are on a Mac, turn on VoiceOver with Cmd + F5 and then press Ctrl + Opt + Cmd + h to jump to a heading.

Live editor

Result

A real heading

Exercise: Unsemantic heading

The heading below is a fake heading made to look like a heading with an unsemantic <div>. Change the <div> below to use an <h3> tag. Now verify your semantic heading using the Verify button as well as with VoiceOver.

Live editor

Result

A fake heading