Title Hierarchy Guidance

Foundations / Best Practices / UI Elements / Title Hierarchy Guidance

Intro

When designing and building web apps, organizing and managing headings is very important. A clear and consistent heading hierarchy, expressed visually through title styles and structurally through semantic heading levels, helps users scan and understand pages quickly while also supporting efficient navigation for assistive technologies. By establishing clear guidelines for using title styles alongside appropriate semantic heading levels, teams can create layouts that are intuitive, adaptable to different interactions and states, and easy to navigate.

These guidelines focus on content structure and heading hierarchy, not on implementation specifics. They cover the visual use of title styles and the semantic heading levels that determine how titles are announced by screen readers.

This illustrates the hierarchical arrangement of heading levels and the styling of titles on the object page as an example.

Usage

Consider the following best practices for usage:

Assign semantic tags. Use semantic tags based on the content’s importance and structure.
Adapt visual styles. Allow visual styling to change based on branding and design needs while maintaining semantic integrity, making sure the app remains accessible.
Follow accessibility guidelines. Use ARIA levels consistently to help screen readers understand the hierarchy of content.
Use heading sizes appropriately. Align heading size choices with their defined usage purposes (for example, use Header 6 for small, nested group headers).
Sequential order. Follow sequential heading orders without skipping levels to ensure content structure remains clear.

Don't

Avoid the following improper usage practices:

Don’t confuse visual and semantic hierarchy. Avoid letting visual styling dictate the semantic structure of headings, as they serve different purposes.
Don’t promote small headings outside their context. Keep smaller headings (for example, Header 6) within their intended contexts and don’t elevate them above parent sections.
Don’t duplicate top-level headers. Use only one <h1> tag per page to provide the highest emphasis and maintain clear top-level representation.
Don’t overuse larger header sizes. Apply Header 1 and Header 2 sparingly, as they are meant for large headers and should be used with consideration for overall page design principles.
Don’t use inconsistent ARIA levels. Ensure ARIA levels match the semantic HTML tags used, without causing confusion for screen readers.

Layout and Structure – General Guidance

This outlines the structure of the components, specifying areas, sections with typography, iconography in context, and other details.

Ensuring Logical Flow

Hierarchy update: When you add more content, adjust the headings to maintain a clear order, ensuring that the visible headings reflect the importance of the content.

Consistency in updates: Ensure that changes align with the original heading order and integrate smoothly into the user's experience.

Visual Style and Semantic Hierarchy

It's important to understand the difference between the visual appearance of titles and their role in organizing content. Tags help establish content order for accessibility and screen readers, while titles can be styled differently to fit branding and design preferences. Separating these aspects allows developers to use tags based on content importance, while design adapts to achieve their goals. This ensures that apps remain easy to use and visually appealing, following good design principles while maintaining flexibility.

Additional Examples: