Headings and titles – CRA user-centred design guide
+ +Headings and titles – GCWeb design system
@@ -88,61 +90,89 @@
+ On this page
- Match the page title with the title tag in the metadata
- Make the page title unique
- Keep page titles short
- Use stacked titles for a set of related pages
- Check and update inbound links when changing page titles -
- Practice writing page titles +
- Practise writing page titles
- Create a scent of information
- Use parallel structure
- Structure content using heading levels -
- Creating a table of contents +
- Create a table of contents for long content
How to implement
-Follow these rules to create useful headings, including the page title (H1) and the other headings (H2 and below) on the page.
+ +Follow these rules to create useful headings for your content, including the title (also known as an H1 on a webpage) and the other headings (known as H2, H3, H4 and so on on a web page).
+Writing good headings and titles
-Most people scan page titles and headings, looking for keywords that will confirm that they have found what they're looking for. People who use assistive technology may listen for keywords using software or may use keyboard shortcuts to access all the headings on a page.
+ +Most people scan titles and headings, looking for keywords that will confirm that they have found what they're looking for. People who use assistive technology may listen for keywords using software or may use keyboard shortcuts to navigate to the headings.
+Make them short and clear
-Make sure that the heading gives a clear idea of what follows. The heading must:
+ +Make sure the heading gives a clear idea of what follows. The heading must:
+- Be short and contain no unnecessary words -
- Not use an abbreviation unless the audience knows it better than it knows its long-form equivalent -
- Not use promotional messaging (boastful, subjective claims) because it might confuse and stop people from navigating to the page +
- Not use an abbreviation unless the audience knows the abbreviation better than the long-form equivalent +
- Not use promotional messaging (boastful, subjective claims) because it might confuse people and stop them from reading the page or document
Example: Using an abbreviation with its long-form equivalent
-Sometimes keyword research shows that some people use an abbreviation and other people use the long-form equivalent. To make sure that both types of users can find and understand the content, you can use both the abbreviation and the long-form in the heading.
+Keyword research shows that some people use an abbreviation and other people use the long-form equivalent. To make sure both types of people can find and understand the content, you can use both the abbreviation and the long-form in the heading.
For example:
- About the Canada Revenue Agency (CRA)
- Canada Emergency Response Benefit (CERB)
- Registered Education Savings Plans (RESPs)
If there is no abbreviation being commonly used already, do not introduce one.
+If there is no abbreviation being commonly used already, don't introduce one.
Front-load keywords
-Put the most relevant terms at the beginning. Users often scan down the left part of a list (search results, menu, table of contents). They are unlikely to read the rest of the text unless the first few words attract their attention.
+ +Put the most relevant terms at the beginning of a heading. People often scan down the left part of a page or document list. They are unlikely to read the rest of the text unless the first few words attract their attention.
+Do research to identify the words that your users are likely to search for and understand.
+Follow capitalization rules
-Capitalize the first letter of the first word (sentence case) of all page titles, headings, subheadings, table captions and table headers. Capitalize proper nouns in page titles, headings and subheadings.
-Do not end a heading with punctuation
-Do not use punctuation at the end of page titles, headings and subheadings. Only use question marks when asking for information in a form, wizard, survey or quiz. Avoid phrasing headings as a question because we are providing answers, not asking questions.
+ +For web pages, capitalize the first letter of the first word (sentence case) of:
+ +-
+
- Page titles +
- Headings +
- Subheadings +
- Table captions +
- Table headers +
For other words within the titles and headings, follow regular capitalization rules. For example, capitalize proper nouns when they appear in a heading.
+ +Capitalize each word in the title of guides, forms, reports and other publications.
+ +Don't end a heading with punctuation
+ +Don't use punctuation at the end of titles, headings and subheadings. Only use question marks when asking for information in a form, wizard, survey or quiz. Avoid phrasing headings as a question because we are providing answers, not asking questions.
+Example of proper capitalization and punctuation in headings includes images
-When using page titles that sound like questions, do not use any punctuation in the title. For example:
+When using page titles that sound like questions, don't use any punctuation in the title. For example:
- Who is eligible
- What is the DTC @@ -165,13 +195,18 @@
Do not end a heading with punctuation
Follow headings with text
+Usually it is best to follow headings with text and not with another heading. Use the text between a heading and a subheading to summarize or introduce what the user will find in the subsections.
+There may be cases where you would follow a heading with another heading. For example:
+- When a heading introduces a table of contents on the same page (adding an "On this page" menu, for example)
- When the purpose of the page is obvious from the page title and introductory text would provide no added value for the user
Example: Contact pages where the title is followed by another heading includes images
@@ -197,21 +232,40 @@
Follow headings with text
Selecting the best page title (H1)
-The web page title (Heading1 or H1) is the title you see at the top of the page when you're looking at it. Make sure that it accurately describes, in plain language, the type of information that follows. A descriptive page title is important because search engines often display the title without the context that the rest of the page provides. Choose a title that makes sense on its own.
+ +Choosing the best title (H1)
+ +The page title (also known as the heading level 1 or H1 on a web page) is the title you see at the top of the page. Make sure that it accurately describes, in plain language, the type of information that follows.
+ +A descriptive title is important because:
+ +-
+
- The reader needs to know if the page applies to them +
- Search engines often display the title without the context that the rest of the page provide +
Choose a title that makes sense on its own.
+Match the page title with the title tag in the metadata
-The page title appears in two places:
+ +The page title appears in two places, it is included:
+-
-
- It is the largest, boldest text at the top of the page (H1 heading) -
- It is included in the page metadata in the title tag (
<title>), which is also displayed at the very top of the browser in the tab
+ - At the top of the page in the largest, boldest text (Heading level 1 or H1) +
- In the page metadata in the title tag (
<title>), which is also displayed at the very top of the browser in the tab
Both the H1 and the title tag have important roles:
+- The title tag is used in search results and helps the user select the right page from a results list
- The H1 tells the user that they are on the right page
The H1 and the title metadata should be the same, except that "- Canada.ca" is added to the end of the title tag for all content on canada.ca.
+ +The H1 and the title metadata should be the same, except that "- Canada.ca" is added to the end of the title tag for all content on Canada.ca.
+If you use a stacked page title, be sure to include both parts of the stacked title in the title tag.
+Example of matching H1 and <title> tag
-
@@ -227,18 +281,30 @@
title tag
Make the page title unique
+Most search engines identify relevant search results based on:
+- Page title
- Headings
- Subheadings
They display the page title as a link on the results page.
-Unique page titles help search engines tell the difference between similar pages. They also help ensure that people Do not need to look at many pages with the same name to find the information they need.
-Check whether your page title is unique by using a search engine. Search for the title of the page followed by "site:" and the domain extension (for example, "food safety site:gc.ca" or "food safety site:canada.ca").
+ +Unique page titles help search engines tell the difference between similar pages. They also help ensure that people look through multiple pages with the same title to find the information they need.
+ +Check whether your title is unique by using a search engine.
+ +For documents, search for the full title of the document.
+ +For web pages within the Government of Canada, search for the title of the page followed by "site:" and common Government of Canada domain extensions (for example, "food safety site:gc.ca" or "food safety site:canada.ca").
+Examples of when the page title isn’t unique includes images
+A page title might make sense in the context of the page or on the parent page that linked to it; however, it might not make sense when seen in search results. Ensure headings are unique and provide context.
- Example 1: France @@ -270,13 +336,21 @@
Make the page title unique
Keep page titles short
-Google search results only show the first 60 to 65 characters of a title. Ensure your title is concise and front-load the keywords so the most relevant words appear in the search results. Remove any unnecessary words.
+ +Google search results show only the first 60 to 65 characters of a page title. Make sure your title is concise and front-load the keywords so the most relevant words appear in the search results. Remove any unnecessary words.
+Use stacked titles for a set of related pages
-A stacked H1 indicates that the page belongs to a larger set of pages. Do not use this pattern when it is possible to write a singular descriptive and unique page title.
+ +A stacked H1 shows that the page belongs to a larger set of pages. Don't use this pattern when you can write a singular descriptive and unique page title.
+There are two different ways to implement a stacked H1.
+Subway pattern
-This method is only used for pages using the GC subway pattern, for example, the "Get ready to apply" page in the Canada Dental Benefit program.
+ +This method is used only for pages using the GCWeb design system subway pattern, for example, the "Get ready to apply" page in the Canada Dental Benefit.
+When using the subway pattern, there are two H1s in the design. See the design options section for details on how to code this.
Subway pattern
Topic stacked H1
-This method is used when a topic or task belongs to a larger topic and it could create confusion with a similar page that belongs to another topic.
-For example an "After you file your tax return" section that is within the "Personal income tax" topic to distinguish it from an "After you file your tax return" section within the "Corporate income tax" topic.
+ +Use this method when a topic or task belongs to a larger topic and a person might confuse it with a similar page that belongs to another topic.
+ +For example, use a stacked title to show the difference between the "After you file your tax return" section within the "Personal income tax" topic and the "After you file your tax return" section within the "Corporate income tax" topic.
+In this case, the stacked title is coded as a single H1. See the design options section for details on how to code it.
+Example: Stacked title - Topic stacked H1 includes images
Topic stacked H1
Check and update inbound links when changing page titles
+If you change the title of an existing web page, make sure that you update any incoming links to the page. Submit a service request to DDPD asking the Web development team to create a referring links report. This will include a list of other CRA pages that link to your page, as well as the link text that is used. Reach out to the people responsible for those web pages and ask them to update the link text to reflect the new name of your page.
+Use the page analytics tool to see if there are any significant referring pages from outside of the CRA. Reach out to those page owners and ask them to update the link text too.
-Practice writing page titles
+ +Practise writing page titles
+The examples below show how you can apply these rules to re-write page titles to be more effective.
+Title is unique and descriptive
+Write
@@ -382,46 +468,58 @@Don't write
Organizing content using headings (H2 and below)
-The page title, headings and subheadings help people find information on the screen easily. Use headings to divide text into logical sections approximately every 200 words.
+ +The title, headings and subheadings help people find information on the screen easily. Use headings to divide text into logical sections approximately every 200 words.
+Create a scent of information
-Users hunt for information on the web. They scan the contents in search of answers or information to help them complete their task. If they can’t find what they are looking for, they look for a link that will lead them in the right direction. This is known as following the scent of information.
+ +People hunt for information rather than reading content from start to finish. They scan the contents in search of answers or information to help them complete their task. If they can’t find what they are looking for, they look for a link that will lead them in the right direction. This is known as following the scent of information.
+Titles, headings, links and the first paragraph of content are important parts of the scent of information.
-Good headings and subheadings allow users to scan the page quickly to find what they are looking for. They are also essential to making web content accessible. Screen reader users can use the headings and subheadings to navigate quickly between sections, and to better understand or summarize content.
-The first paragraph of your page also helps with the scent of information. Use the first paragraph to introduce the contents of the page in plain language. It helps people who’ve landed on the page decide whether they’ve found what they are looking for. It is also often the text that is displayed in search engine results.
+ +Good headings and subheadings allow users to scan quickly to find what they are looking for. They are also essential to making web content accessible. Screen reader users can use the headings and subheadings to navigate quickly between sections, and to better understand or summarize content.
+ +The first paragraph also helps with the scent of information. Use the first paragraph to introduce the contents in plain language. It helps people decide whether they’ve found what they’re looking for. It is also often the text that is displayed in search engine results.
+Use parallel structure
+Parallel structure means that the headings match one another grammatically and share other basic similarities.
+Example: Using parallel structure for the guidance on this page
-For example, on this page all of the main headings (H2) use a gerund (verb ending in -ing) and all of the secondary headings (H3) are written as instructions or tasks.
+For example, on this page the main headings (H2) use a gerund (verb ending in -ing) and all of the subheadings (H3) are written as instructions or tasks.
- Writing good headings and titles
- Make it short and clear +
- Make them short and clear
- Front-load keywords -
- Use sentence case -
- Do not end a heading with punctuation +
- Follow capitalization rules +
- Don't end a heading with punctuation
- Follow headings with text
- Selecting the best page title (H1) +
- Picking the best title (H1)
- Match the page title with the title metadata +
- Match the page title with the title tag in the metadata
- Make the page title unique -
- Keep it short +
- Keep page titles short
- Use stacked titles for a set of related pages
- Check and update inbound links when changing page titles -
- Practice writing page titles +
- Practise writing page titles
- Organizing content using headings (H2 and below)
- Create a scent of information
- Use parallel structure
- Structure content using heading levels -
- Creating a table of contents +
- Create a table of contents for long content
-
-
-
-
Remember to combine parallel structure with other rules outlined on this page, such as putting the most important words first.
+Example: Combining parallel structure and front-loading keywords
-
@@ -434,7 +532,7 @@
Use parallel structure
-
-
- Do not write +
- Don't write
- Importing consumer goods
- Importing food and agricultural products @@ -443,41 +541,60 @@
Use parallel structure
Structure content using heading levels
+Use the automated styles feature in your word processing software to structure headings. The styles feature clearly differentiates headings from content and helps you format headings consistently. Having clear and consistently formatted headings helps your web team produce the web pages more quickly and with fewer errors.
+For the page title:
+- Use this style: Heading 1
- Apply a Heading 1 only once per page
For the main sections:
+- Use this style: Heading 2
- Can appear many times
For subsections:
+- Use this style: Heading 3
- Can appear many times and in many main sections
For sub-subsections:
+- Use this style: Heading 4 (and so on)
- Can appear many times in many subsections
Avoid using H5 headings. Rather, consider restructuring the content.
-Creating a table of contents
+ +Create a table of contents for long content
+Add a table of contents to the page when:
+-
-
- Excessive scrolling (more than two to three scrolls) is required to view all of the content on the page -
- When the page is divided into subsections, each with its own headings +
- A person would have to excessively scroll (more than 2 or 3 scrolls) to view all of the content on the page +
- The page is divided into subsections, each with its own headings
Learn more about how to implement a table of contents on a page.
+ +Generally having more than 2 H2 headings means that the page is long enough to require a table of contents.
+ +Learn more about how to implement a table of contents on a page.
+Tip: Create a table of contents to make sure you’ve structured the headings properly
-Use the table of contents feature from your word processing software to automatically generate a table of contents based on the heading levels in your document. Then, check the table of contents to make sure you've correctly structured the page title, headings and subheadings.
-Delete the table of contents before you send the document for approval if it isn't required for the final online version.
+Use the table of contents feature from your word processing software to automatically create a table of contents based on the heading levels in your document. Then, check the table of contents to make sure you've correctly structured the page title, headings and subheadings.
+Delete the table of contents before you send the document for approval if it isn't required for the final version.
Design options
Design options
Type
- H1 - stacked -
- H1 - regular +
- H1 - regular
- H2
- H3
- H4 @@ -519,9 +636,9 @@
Design options
H1 heading - Title of parent page
+H1 heading - Title of parent page
-H1 heading
+H1 heading
H2 heading
H3 heading
H4 heading
@@ -540,12 +657,14 @@H5 heading
Stacked - Topic