Headings & titles: Guide users with scannable content

A consistent approach for page titles and subheads creates a cohesive experience across your site.

« SEE ALL BEST PRACTICE GUIDES


Page titles and subheadings

Page titles

A page’s title appears at the top of the page, in site menus, in Google and other search results, and in the browser tab. Titles should accurately and concisely convey a page’s contents. Strive for a balance between meaningful, keyword-rich terms and brevity.

  • Use title case; uppercase the first letter of every word except articles (the, an, a) and prepositions (at, of, on, in, etc.)
  • Avoid acronyms and abbreviations; as with any other first mention, spell the words out, followed by the acronym in parentheses
  • Use ampersands (&) instead of the word “and” to help keep titles short

Example page titles:

  • Maps & Directions
  • Commencement Checklist
  • In Vitro Fertilization (IVF)
  • Our Team
  • News & Updates

Subheadings (heading 2 and heading 3)

Subheadings help visitors scan a page for the information they need. By organizing content, they also make pages more visually appealing and inviting to read. They also make content easier to navigate with a screenreader – and therefore more accessible!

Headings should be applied hierarchically, like an outline. The page title is automatically the heading 1 (H1), so your subheadings will start with heading 2 (H2). If the content under an H2 needs to be further sub-divided, use heading 3 (H3), and so on. Then go back to H2 when you start a new topic.

For example, the headings on this page are:

  1. H1 (page title): Headings & titles: Guide users with scannable content
    1. H2: Page titles and subheadings
      1. H3: Page titles
      2. H3: Subheadings (heading 2 and heading 3)
    2. H2: Page names in the site menus

Add headings by selecting your site’s predefined heading styles, rather than manually bolding, underlining, changing the text size or color, or placing text within cards, billboards or other elements. In WordPress, this means using the heading block. Using preset styles ensures headings are styled consistently across your site, read correctly by web browsers and screen readers, and updated correctly when the overall theme is updated.

  • Make headings descriptive and grammatically consistent with one another
  • Use lowercase, except for the first letter of the first word and proper nouns
  • No ampersands
  • Use acronyms only if the full reference has already been spelled out on the page
  • Don’t make a heading into a link; instead, use a standalone link or button

Example subheads:

  • Parking and public transit
  • Academic programs and resources
  • Community engagement

Page names in the site menus

Page names are listed in the site menus, which have limited space. In the WashU Web Theme, you can create a custom menu if you need to truncate a page’s title.

  • Keep names short and descriptive
  • Use consistent voice, verb tense and grammatical construction
  • Use title case; uppercase the first letter of every word except articles (the, an, a) and prepositions (at, of, on, in, etc.)
  • Use ampersands (&) instead of the word “and”

Example page names:

  • Our Initiatives
  • Learning Opportunities
  • Your Visit
  • About Us
  • Contact Us