Headings

What Are Headings?

Headings are a must for good web and document design. They provide an outline for your content, making information easier to skim through for both sighted users and screen reader users.

But what actually are headings? Think about how you write outlines for documents - first, you choose the main points of your topic. Subtopics of each main topic are indented, and they go back out when you move on to another main point. An example of such a list would be:

USU Events

  • Weeks of Welcome
    • Monday
      • Snacktivity
      • Puzzles in the New Books Lounge
      • Festival on the Quad
    • Tuesday
      • Snacktivity
      • Res Life Community Welcome Meetings
      • Campus Recreation - Tasty Tuesday
      • College of Humanities and Social Sciences Light on the Hill
      • Esports Valorant Tournament
    • Wednesday
      • Day on the Quad
  • Athletic Events
    • Monday
      • Football
      • Soccer
    • Tuesday
      • Men’s Basketball
      • Women’s Basketball
    • Wednesday
      • Men’s Tennis

Headings provide a visible structure for the flow of ideas throughout your webpage or document. The smaller the number of the heading, the higher “priority” or more general that topic is.

For example, if this list of USU Events was a Wikipedia article and I wanted to write a paragraph for each event, then I would make each of those bullet points a heading. The document structure would then look something like this, with the heading level increasing as topics get more specific (like listing the names of specific events), and decreasing when we return to a more general topic, such as “Athletic Events”:

H1: USU Events

H2: Weeks of Welcome

H3: Monday

H4: Snacktivity

H4: Puzzles in the New Books Lounge

…

H3: Tuesday

H4: Snacktivity

…

H2: Athletic Events

... and so on.

With this kind of structure, I can see that the overarching topic is “USU Events”, with subtopics of “Weeks of Welcome” and “Athletic Event”, which each have their own increasingly specific subsections.

Using Headings Properly

On websites, there are typically only six levels of headings (H1 to H6). Documents can sometimes have nine levels, although this depends on the design program you are using. Next, we’ll share some principles for how to accurately use headings as you write web pages and documents. 

Only Use One H1

On web pages, first-level headings (H1) should function as the title of the page. As such, there should only be one H1 on each page.

Heading Order

Headings must follow a specific hierarchy to be logical. If you were to put random heading levels throughout your document, users would quickly get confused about what information is most important.

You should not skip any heading levels while writing your content (going down). However, you may skip as many levels as needed if you are done with a section. In other words, you must not write a general section with an H2 and then begin a more specific section beginning with an H4. You should instead begin the next, more detailed section with an H3.

However, once you reach the end of a specific H4 section, you may begin a new, separate, more general section by jumping back to an H2. WebAIM has a good explanation of this concept.

Use Headings Like Labels for Content

There are a few things that fall under this category: make sure headings are descriptive of what’s to come, keep them short and sweet, and style them appropriately. 

Make Them Descriptive

Headings are a title for whatever content follows. Just like how you would want a soda can titled “Sprite” to contain Sprite, you want the heading on your website to clearly indicate what content is to come next.

Make sure to keep the title detailed. You wouldn’t expect your regular Sprite to contain Cranberry Sprite, just like you wouldn’t expect a section titled “Dogs” to only talk about chihuahuas. If a section of the page covers one specific topic, ensure the heading reflects that specificity.

Keep Them Short

Headings are used as landmark points on pages. We want them to be detailed but also concise. A good rule of thumb is to never use full sentences as headings.

Style Them Appropriately

Make sure your headings look distinct from other body text. Headings should stick out and have their own distinct styles so the structure of the text is easy to follow. Make sure your heading levels have consistent styles (i.e. heading level 2’s all have the same style, and heading level 3’s all have the same style). If chapters in a book were written in a size similar to the rest of the text in the book, it would be impossible to tell where sections begin and end.

Conversely, don’t use heading tags to style non-heading content. You can always bold or italicize your content to set it apart without doing it in a way that will confuse or misrepresent the structure of your content.