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

Use the title:

• To display a title above a table or form.
• To show headings in the page header.

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.

Variants

Header Level

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

Header Style

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

Responsive Behavior

Wrapping and Truncation

You can define whether the text should wrap or truncate when there is not enough space.

For example:

• 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.

Wrapped and truncated titles

Related Links