The title is a simple, large-sized text containing additional semantic information about the header level for accessibility purposes.
Title levels 1-6
When to Use
Don’t use the title:
- If text is inside a text block. Use normal text instead.
- If text is inside a form element. Use the label instead.
Six semantic header levels are available, ranging from H1 (highest) to H6 (lowest). The higher the level and the larger the font size, the more important the title is.
Even if titles presented on the page in a mixed order for visual appeal, assigning them to the correct header level ensures that the semantic meaning of the title is described correctly for screen reader users.
Title variants for different header levels
The style of each header level depends on the theme being used and the specific use case. As a result, different styles may be used for titles with the same header level.
Header levels with different header styles
Title as a Link
A title can also be a link.
Title on different title level as a link – live example
Wrapping and Truncation
You can define whether the text should wrap or truncate when there is not enough space.
- If the title is placed outside components like a toolbar, shell bar, or dialog (dialog header), use wrapping.
- If the component is designed to save vertical space, and only allows one line of the text with a limited width (like the title of a toolbar), use truncation.