It is often recommended to split content on a page into smaller, more digestible chunks. Having a clear hierarchy of sections and subsections will make a page more navigable.

A hierarchy of headers is already built into HTML code. The most prominent header is enclosed in <h1> tags. The second-most prominent header is enclosed in <h2> tags. HTML has six levels of header hierarchy from <h1> to <h6>.

It is recommended that your page structure does not need more than two to three levels of hierarchy. A ‘deeper’ hierarchy can become confusing and overwhelming for users. Oftentimes such a hierarchy can be avoided by splitting content into separate, more specific pages.e

The header hierarchy system is reset with each section of your site; it does not apply to your entire page. When using themes created by University Communications, this generally means that the hierarchy resets with each text module.

If you are familiar with HTML and coding, it may sound incorrect to have multiple <h1>s from an accessibility perspective. In the past it was proper to only have one <h1> per page — usually the page title.

HTML5 introduced the <section> element. According to HTML5 specifications, hierarchy can be reset within each <section>. This allowance makes modular and accessible page design possible.

Sometimes a page doesn’t need a strong header hierarchy. Rather, specific sections just need a subtitle. In these scenarios, simply bolding a subtitle is recommended rather than using an HTML header tag.