Design options

The Title component includes six preformatted header sizes.

• The sizes range from H1 to H6 and follow a large-to-small hierarchy, i.e., H1, H2, H3, H4, *H5, and *H6 — where the most important (and largest) heading is an H1 and the least important (and smallest) one is H6

• Each header size looks different and has a specific purpose on a web page.
  For example a header can serve as:
  • The main title on a page (H1)
  • A subtitle (H2) to the main title (H1) on your page
  • A way to break up large sections of body text into subsections (H3)

*Note: H5 and H6 should be avoided as much as possible. Although they are available in AEM, content generally does not require that many levels.

Guidelines

The Title component is versatile and simple to use:

• Text in the title component should be short, to the point and descriptive
• Always use sentence case in titles, unless there are proper nouns or names in it
  • If you're unsure which words to capitalize consult the Concordia Style Guide
• In general, always nest headings on each web page according to their hierarchy.

Here's how the various header sizes compare, contrast and should be used:

• Use on right-sidebar template content pages and also for exceptionally long titles
• Only to be used at the top of the page as the main title
• Do not use more than one H1 header on a page

• Use on full-width or full-window template content pages
• Only to be used at the top of the page as the main title 
• Do not use more than one H1 on a page

• Used on full-window, full-width and right-sidebar template content pages
• Can be used multiple times on a page to separate and identify large sections of content that have equal importance
• Not to be used in the right-hand column of the right-sidebar template
• Can be used directly under an H1 as a subtitle

• Used on full-window, full-width and right-sidebar template content pages
• Can be used multiple times on a page to separate and identify large sections of content that have equal importance
• Not to be used in the right-hand column of the right-sidebar template
• Can be used directly under an H1 as a subtitle
  

• DO NOT USE!
  • Looks exactly like the H4 header
  • Use H2 Burgundy instead

• Commonly used in the right-sidebar template content page
• Also often used for headings in the grey footer
• Can be used multiple times on a page to separate and identify subsections of content that have equal importance

• Used for a sidebar title in the right-sidebar template
• Can be used multiple times on a page

• DO NOT USE!
  • H5 is the same size as x-large text used in the body of the content page and may cause confusion

• DO NOT USE!
• H6 is about the same size as small text used in the body of content pages and may cause confusion
• In addition, the much smaller size means the text may not be accessible to everyone as required by law

Accessibility

Best practices for accessibility

Assistive technologies use headings to communicate the page structure to the user, so the H1 to H6 hierarchy should always be respected. That means nesting headings by their importance (or rank) from highest to lowest:

• The most important heading has the rank H1. Visually, it is the biggest in size
• H6 is the least important and lowest ranking heading. It is also the smallest in size

In general, you should always follow this pattern of nesting:

• The H1 main title is the first thing you should see on a page
• Next, H2 headings are added to indicate the start of a new section of content
• Then, headings lower than H2 (e.g., H3) can be inserted to indicate the start of a new subsection within the larger section

To avoid confusion do not skip heading ranks. For example:

• Ensure that an H2 header is always followed by an H3 header — not an H4
• An exception is when you want to finish a subsection (H3) and begin a new section (H2) below it

Why headings are important

Headings are a reflection of how the content on a page is organized.

• Headings that are clearly visible and nested properly make a page easier for users to navigate and understand
• Proper headings also make a web page more "findable" by search engines because they tell them what key words are important

Examples & use cases

Typical header styles in a right-sidebar template

In this example:

• The main H2 section is further broken down into two subsections, as indicated by the two H3 headers
• H4 is used for the right-sidebar title 

Typical header styles in a full-width template

In this second example:

• The first H2 is directly under the H1 and is used as a subtitle
• The second H2 indicates that a new section of content follows immediately below
  • This section is further broken down into two H3 subsections
•  The third H2 signifies the start of a new section, because there's nothing more to add to the subsections above

Heading H2

X-large text style. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
• Aliquam tincidunt mauris eu risus.
• Vestibulum auctor dapibus neque.
• Nunc dignissim risus id metus.

Heading H2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading H2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Helpful tips & "gotchas"

• The H2 Burgundy is available in the Title component only
• The WYSIWYG component has only the (basic) black headings
• The Augmented H2 styles are only available on program description pages, e.g., https://www.concordia.ca/academics/undergraduate/biology.html
  

Training

The Title component is covered in the Advanced training course.