Use Headings Correctly
Headings make content more scannable, but they must be used correctly to avoid accessibility issues.
Headings help break up dense blocks of text and provide structure to your page. However, if you don’t use them correctly, they can make it difficult for users to scan content and find what they are looking for. Misused headings also cause confusion about the hierarchy of your content for all site visitors, including those using assistive technologies.
Never Skip Headings
Headings should be used in descending order. The title of a page is always an H1, and then you have the option to use H2-H4 in the body of the page. You should not skip heading levels or use them out of order.
Examples of correct heading order
Good example #1
(H1) Page title (/H1)
(H2)Section heading (/H2)
(H3)Sub-section heading(/H3)
(H3)Sub-section heading(/H3)
(H2)Section heading (/H2)
Good example #2
(H1) Page title (/H1)
(H2)Section heading (/H2)
(H3)Sub-section heading(/H3)
(H4)Sub-section heading(/H4)
(H2)Section heading (/H2)
Good example #3
(H1)Page title (/H1)
(H2)Section heading (/H2)
(H2)Section heading (/H2)
Examples of incorrect heading order
Bad example #1
(H1) Page title (/H1)
(H2)Section heading (/H2)
(H4)Sub-section heading(/H4
Bad example #2
(H1) Page title (/H1)
(H3) Section heading (/H3)
(H3) Section heading (/H3)
Don't Add Links to Headings
Never put a hyperlink in heading text. Instead, add a call-to-action button or link at the end of the section.
An example of good linking
Head & Neck Cancer Program
In collaboration with otolaryngology, this is a multidisciplinary program including radiation oncology, medical oncologists, neuro radiologists, pathologists, and speech pathologists.
An example of bad linking
In collaboration with otolaryngology, this is a multidisciplinary program including radiation oncology, medical oncologists, neuro radiologists, pathologists, and speech pathologists.
Last updated