Structure

All pages should include a relevant and clear page title that describes the purpose and intent of the page. Each page should use descriptive and relevant headings to organize content & information.

Use Cases & Examples

• Webpage or blog post: This means using the proper headings and breaking up content to be digestible and make sense
• How-to or support documentation: This means labeling steps clearly, and explaining the details below

Accessibility

• This helps all users quickly identify the purpose of the page and understand context.
• When headings are clear and descriptive, users can find the information they seek more easily, and they can understand the relationships between different parts of the content more easily.
• Headings also reduce the number of keyboard strokes required to jump to different sections.
• Finally, screen reader users require meaningful headers and labels to navigate the page.

Best Practices

• Use the <title> element
• Do not repeat titles across multiple pages in a web application or website
• Make headings descriptive and useful
• Use headings consistently on similar pages or articles
• There should only be one <h1> per page
• Use title case for <h1> and all subsequent headings; email subject lines
• Headings should be used in semantic order to identify nested topics:

<h1>
    <h2>
        <h3>
        <h3>
    <h2>
        <h3>
    <h2>
        <h3>
            <h4>
        <h3>