Headings & subheadings

Strong section headers boost readability and accessibility.

Mass.gov features both customizable and pre-configured headings to help readers and search engines find important information. These heading formats complement each other to give users flexibility in presenting unique content but also to ensure consistency and structure across the site.

Headings and subheadings also play a big role in guiding users of assistive devices, such as screen readers, through content.

How to choose headings

The text or format for certain Mass.gov fields is pre-determined. While users author page titles, for example, those titles automatically are formatted with an H1 tag (or Heading 1). This is the largest text on the page, and tells visitors and search engines what the page is about.

Page titles automatically are formatted as Heading 1.

Users have plenty of flexibility beyond these titles and a handful of other pre-formatted headings.

The rich text toolbar (also known as a rich text field) is found across many Mass.gov content types, including in the Organization page's "We who serve" field and the "Overview" field on Information Details. It is designed to help users format content.

This includes adding block quotes, inserting hyperlinks, embedding images or tables, and putting words in italics or bold. This is also the space where users can customize headings and subheadings to provide structure and context.

Although users can choose what their headings and subheadings say, it’s important to create them consistently using the Format tool found in the rich text toolbar.

Choose heading style via the Format button on rich text toolbar.

When users click the Format button, they’re presented with a dropdown menu of heading styles ranging from “Normal” to “Heading 6.”

Heading formats are listed in a dropdown menu.

Accessibility awareness

Using the Format tool is the standard way of creating headings on Mass.gov, instead of using bold or manually changing text size to emphasize a section or subsection of information.

Using the the built-in heading formats is the best practice because it signals to search engines and screen readers how information is connected and adheres to a standard look and feel.

It’s recommended users choose heading or subheading formats according to a numbered, hierarchical order. Users shouldn’t skip numbers or arrange them randomly, or content will look unorganized and may confuse visitors, especially those with screen readers.

Screen readers actually read heading levels aloud. Imagine how puzzling that experience would be if headings didn’t follow in logical, numerical order.

Orderly headings

The highest level section header used in the rich text editor is Heading 2.

Text formatted in the H2 format can be thought of as book chapters that describe the main topics covered in a section. From there, content is subdivided using Heading 3, and so on.

Heading 2, Heading 3 and bold displayed on page.

Overall, there are six heading formats, however users should rarely go beyond H3. More likely, bullet or numbered lists are best for organizing information once it gets down to that level.

Users who want to make a bigger distinction in size between a heading and subheading can jump down 2 numbers. Ex. Use H2 for the heading and H4 for the subheading.

More tips

Beyond sticking to the standard heading formats, users are encouraged to make headings descriptive and grammatically consistent with one another. Including keywords--the terms constituents use--can help content show up higher in search results.

  • Use sentence case (only capitalize the first letter of the first word and proper nouns)

  • Using bold or italics or even a different font size should be reserved for when there’s a need to really highlight a word or phrase.

  • Don’t hyperlink headings

  • Keep headings between 2-5 words in length