Heading elements

Heading elements are one of the best tools to facilitate all of the patterns outlined on the page about writing for the web.

Screen reader users exhibit the same behavior by using headers to provide information about page content and organization. Headers allow users to quickly identify the “chunk” they need to accomplish their tasks. Using headers to organize your pages is necessary for quality search engine results, good usability, and required accessibility compliance.

Heading levels

Heading elements on web pages use numbered "levels" from one to six: H1, H2, H3, H4, H5, and H6.

For our campus web template, the H1 element is reserved for the main title of the page. It should not be used in the main body of a page.

Many word processing applications (like Google Docs and Microsoft Word) behave differently. They often have a "title" element and heading elements one through five instead of six heading elements.

Heading order

The title of a page is an H1 element.

The first heading element that should be used on a page is an H2; the word "Headings" at the top of this page is an example. If there are sub-sections of content, those should be started with an H3 (this very section uses multiple H3 elements under the H2).

Heading elements used out of order are an accessibility problem.

Bold text ≠ heading

Regular paragraph text that is bolded isn’t the same thing as a heading. This kind of formatting should be turned into an actual heading element.

Visual style

Heading elements use a different font and are a different size than normal paragraph text. This helps them "chunk" content for users.

Heading elements should never be used as a "design" element.