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 accessibilty, guiding people such as screen readers through your page's 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). Pages should have one H1. 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. Pages should only have one H1.
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 "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.
Headings make content more accessible
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 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. For example
There should only be one H1 per page.
H3s should only live under H2s, and H4s under H3s, and so on.
Don't skip headings or arrange them randomly, or content will be disorganized for users and search engines.
Search engines also use this hierarchical order to understand the relationship of content on the page, which is helpful for delivering answers to search queries.
Screen readers actually read heading levels aloud. Imagine how puzzling that experience would be if headings didn’t follow in logical, numerical order.
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.
Write better headings
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.