Skip to main content Skip to secondary navigation

Titles and Headings

Main content start

Titles and Headings are some of the most critical content on your website. They are content landmarks that readers use to navigate your page.

Why use headings?

Chances are, someone is reading your site to try to find a particular bit of information, not learn everything about your organization. Using headings to divide sections of your pages will make it infinitely easier for readers to find the information they are looking for on your site. Anytime you have more than a couple of paragraphs in a row, you have built what we call a "Wall of Text" and are creating an impediment for your readers.

What is a heading?

Headings are HTML tags that are used to indicate sections of a page. The names of each heading indicates its level in a hierarchy.

By default, Drupal uses a Heading 1 for page titles. When writing page copy, use Heading 2 for the largest sections of the page. Use Heading 3 for subsections that belong under the "parent" heading, and Heading 4 should be used for sub-subsections.  In other words, choose one of these header options based how the sections rank in hierarchy rather than on what it looks like (size or color).

Example Heading 2

Example Heading 3

EXAMPLE HEADING 4

In HTML headings are written like this:

<h2>Example Heading 2</h2>
<h3>Example Heading 3</h3>
<h4>Example Heading 4</h4>

Writing good page titles and headings

Keep it short: skip unneeded words

Avoid unnecessary words in your page titles and headings. People will scan these quickly, so you want them to be able to get the main point without thinking very hard. Some examples of phrases to avoid are: "How do I..." or "Read how to..."

Here's a hypothetical example: "What can I do after an BA in English? Lots!" is long and overcomplicated. Another option might be "Career Options for English Grads." In my alternate, I got the critical information to the front of the title.

But not too short: include keywords

Make sure to include key words or phrases. Include enough information that people will understand the context of this page, even if they landed on it cold from a google search.

So, rather than just "Directions" you might consider something a little richer, like "Directions to the Haas Center." Notice that I didn't write "Haas Center Directions" because the most critical part of this page title is in fact "Directions."

Keep it simple: avoid jargon

It's always best to avoid jargon as much as possible in page titles and headings. However, Stanford is a bit of a special case because we often create pages about technical information pertaining to research. If that is the case for you, then consider your audience and provide the words you think they are most likely going to recognize.

However, if you're writing for a less technical audience, translate technical or jargon terms into common words and phrases. For example, rather than titling a page "UAR Advisors Appointments," you could write "Undergrad Advisor Appointments." That way a new student unfamiliar with UAR would still recognize the page as what they were seeking.

Make all page titles unique

There are multiple reasons to keep your page titles unique.

  • Drupal uses page titles as a quick way for the site owner to find content. Duplicates will make it difficult to manage your site.
  • Your readers won't know what the difference is between the two pages and confusion will ensue. Keep things clear for them.

If you have duplicate page titles, focus on determining what the core difference is between the two pages and incorporating that difference into the page titles. In cases like annual events, consider including the year in the page title.

To sentence case or Title Case? That is the question

Sentence case and title case refer to the capitalization of specific words in a phrase or sentence. Most book titles have title case, like "Crime and Punishment," meaning that multiple words in the phrase are capitalized. In sentence case, only the first word and proper nouns are capitalized, such as, "Today the sun is shining." Pretty simple.

Many style guides now recommend that headings be written in sentence case because they are much more readable. Check out these two examples and see what you think:

Which of These Sentences is Easier to Read?

Which of these sentences is easier to read?

What's more important than which option you choose is that you stay consistent. Humans are amazing pattern recognizers, so when you switch between title and sentence case for page titles or for subheadings, people will get a feeling that something "just isn't right" about your site. That's right, I just gave you permission to be Heading OCD. Go for it!

Avoid additional styles in headings

For the most part, it's best to avoid adding additional styles to your headings like bold and italic. These can make your site look messy and emphasize some headings over others, which nullifies the goal of using headings to break up content into relatively equally important pieces in your hierarchy.