Organizing your page using properly marked up headings, is one of the most important things you can to do help make your content readable and accessible to all users. Proper use of headings helps search engines understand your page, ensures assistive technology can help users navigate your page properly and allows readers to scan content effectively.
How to Use Headings
Heading levels should always be applied using the format dropdown in the editor toolbar.
There are six heading levels and they should always be used in the proper order.
Heading 1 (H1) is always the page title. A webpage should never have more than one H1. Do not use an H1 within the page content.
Heading 2 (H2) should be the headings for the main sections on your page.
Heading 3 (H3) should be headings for subsections within a Heading 2 section.
Heading 4 (H4) should be headings for subsections within a Heading 3 section.
Heading 5 (H5) should be headings for subsections within a Heading 4 section.
Heading 6 (H6) should be headings for subsections within a Heading 5 section.
You should never skip heading levels on a page (e.g. h1 > h2 > h4) as this can cause confusion for your site visitors. Do not create your own headings using only visual changes, such as text sizes, bolding, text color, etc. You can however apply visual styles to properly marked-up headings.
Example of Headings
Notice that the above heading is an H3 because it is within an H2 section.
You can think about headings like bulleted or numbered lists. If content is at the same level, they are expected to contain different content. If content is nested within a list item, it is expected that content is related to the list item above it.
- Heading 1 (H1) is always the page title
- Heading 2 (H2) is a section of content on the page
- Heading 3 (H3) is a section within the H2
- Heading 4 (H4) is a section within the H3
- Heading 3 (H3) is a section within the H2
- Heading 2 (H2) is a section of content on the page
- Heading 3 (H3) is a section within the H2
- Heading 3 (H3) is a section within the H2
- Heading 2 (H2) is a section of content on the page
- Heading 2 (H2) is a section of content on the page
Headings communicate the organization of the content on the page. Users skim web content looking for the information most relevant to the task they are trying to perform. Good headings will help them find the content they need.
Headings are also essential for accessibility. Web browsers, plug-ins, and assistive technologies can use appropriately marked up headings to provide in-page navigation (see the W3 accessibility guidelines).
Finally, search engines use headings in identifying your page's content and ranking search engine results. Good use of headings will help make your content more findable by your intended audiences.
In addition to marking your headings with the appropriate structure, writing good headings will help your users. Some general guidelines:
- Keep headings short
- Use active language – consider starting each with an active verb (e.g. Apply, Find, Watch, Upload, etc.)
- Make headings consistent (e.g. all formatted as questions, all using active language)
- Do not use all caps (this is difficult to read)
- Avoid acronyms or jargon