Heading: h4

Heading

A heading creates page and section titles to provide informational hierarchy to a page.

Headings form a hierarchy

Heading hierarchy should be considered when using standard styling on a page:

Avoid skipping heading levels when structuring your document, as it confuses screen readers. The heading hierarchy helps convey the structure of the document to assistive technologies which in turn can generate navigational aids to users based on the heading structure.

For example, after your page’s <h1> the next heading level should be an <h2>. And then after using an <h2> in your code, the next heading used should be either <h2> or <h3> depending on whether the content for which the heading is being applied has a sibling or child relationship in terms of context.

One <h1> only, please!

While HTML5 considers the use of multiple <h1> tags in the same document to be valid, we limit ourselves to a single <h1> as that has proven more accessible to users of assistive technologies.

When design requires a different style

Refer to the Helper classes section for details on how to apply the styles of a particular heading level to other headings or text that is not being used as a heading but needs to style like one. CAUTION: If your text is being used as a heading you must code it as a semantic heading.