Headings
Text elements used in hierarchical order (e.g., H1, H2, H3) to define the structure of a page and break up content into readable sections. Search engines use headings to understand your page structure and content topics. Well-structured headings with relevant keywords can improve your search rankings and help search engines index your content.
Example
Duis amet amet sit lectus nulla porttitor.
When to use
Use headings to break up long content into digestible sections, making it easier for users to scan and find what they’re looking for.
Guidelines
- Always start with H1 for your main page title (only one H1 per page)
- Use H2 for major sections, H3 for subsections, and so on in logical order
- Don’t skip heading levels (don’t jump from H2 to H4)
- Make headings descriptive and meaningful
- Use headings for structure, not just styling
Accessibility
Screen readers rely on heading structure to help visually impaired users navigate content on a page. Users can jump between headings to quickly find relevant sections, making the use of proper hierarchical order (e.g., H1, H2, H3) essential for web accessibility.
Component note
Headings are left aligned except in the following cases:
- Centered CTA
- Longform Hero Area
- Simple Hero Area
Component Cheat Sheet
[Heading]
Heading Text: