Page Headings

Information about Page Headings

Headings help users understand and navigate a page by visually and structurally organizing its content. They also allow assistive technology users to quickly find relevant content.

Considerations for Coding Page Headings

• Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation.
• Organizing web pages by headings helps users get a sense of the page’s organization and structure. Visually, headings are typically presented as larger and more distinct than surrounding text.
• Screen reader users can navigate a page according to its headings, listen to a list of all headings, and skip to a desired heading to begin reading at that point.
• Screen reader users can use headings to skip the repeated blocks of content like headers, menus, and sidebars, for example.

Page Heading Best Practices

• It is a best practice to plan out a heading structure before composing a page. Doing so will help you both select appropriate heading levels and keep your thoughts organized overall.
• Organizing web pages by headings helps users get a sense of the page’s organization and structure. Visually, headings are typically presented as larger and more distinct than surrounding text.
• All pages should at least have a <h1> level heading giving the title or purpose of the page.
• Headings are ranked <h1> through <h6>. The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>).

Headings on this Page

• H1 - The page title
  • H2 - Information about Page Headings
    • H3 - Considerations for Coding Page Headings
    • H3 - Page Heading Best Practices
  • H2 Headings on this Page