Headers and Sub-Headers


Introduction

Headers and sub-headers (a.k.a., headlines and sub-headlines, headings and sub-headings) are a critical element of website design, organization and writing that is too often overlooked. Users should be able to find what they are looking for on your website by reading your headers and sub-headers only.

The terms Headers and Sub-headers describe any text that signifies the beginning of a section and precedes additional copy/sections that provides further context and details. In the KU CMS, you will see them described as headers and header classes in the WYSIWYG. When using KU CMS sections, you will see header fields labeled Headline and Sub-headline.

Correct use of headers and sub-headers is important for:

  • User experience
    • Ability to effectively scan pages
    • Convey organization and hierarchy of information on the page
  • Search engine optimization (SEO)
  • Accessibility

Page Titles vs. Header 1

In KU CMS - SUNFLOWER, you must add both a page title and a Header 1 class header(H1) to each page. There should only ever be one H1 on any page.

As a general rule, the page title should be the same as the Header 1 (H1). However, there are times when after careful consideration your page title and H1 may need to be different.

Examples of times when a page title and H1 might differ:

  • Page title: About
    H1: About the KU CMS
  • Page title: Research
    H1: Our Research

Header Classes Are Not for Aesthetics

Header classes should never be used to achieve aesthetic goals like bolding or font size. Header classes should be deployed carefully and strategically for page organization and searchability. If you need to change the appearance of a header class, use CSS to modify the styles while preserving the structural value of the header class. 

See "KU Custom Classes to Mimic Header Styles" below for information about custom KU classes that can be used to re-style headers.

Using the Correct Header Tag

Headers that use header classes tell users, search engines and screen readers the hierarchy of information on the page, as well as how the various sections relate.

Just like headers in a common word document, header classes create an index within the page that helps users find the information they’re seeking. Page titles and H1s are the top-level of importance and all sections on the page should relate. H2s are the second most important information on the page and so on.

Unnecessary Header Classes

Too many header classes on a page is difficult to scan and read. Avoid using header classes unnecessarily to denote a minor sections when simple bold or italic text for emphasis will suffice.

Screen Readers and Header Order

Clear and well-written headers are critical when a user is listening to your pages with a screen reader (e.g., JAWS, VoiceOver, etc.). Take the time to imagine how your web pages would sound if they were read aloud.

Also, keep in mind that screen readers allow users to tab through a webpage from header to header. Headers must be ordered logically with only one H1 per page and the rest of the headers ordered logically to meet accessibility requirements and provide a quality user experience. For example, you must have an H2 on the page before you should use an H3.

Searchability + Search Engine Optimization

Like screen readers, search engines in browsers also look at the hierarchy of information on your pages based on the header classes. That information is used to create your search results.

Select your header classes and write your headers with organic searching in mind. If a user is seeking your information, what are they likely to type into a search engine (e.g., Google, Yahoo, Bing). It is especially important that make sure all your page titles and H1 are optimized for searchability.

Writing Effective Headers

  • Headers should be simple and concise – use as few words as possible
  • Use plain language
  • Avoid jargon and acronyms
  • Write headers and sub-headers so they are easily scanned with the most salient words first in the header – think about the search terms users would choose when looking for that info

Front-Loading Search Terms

One writing strategy that impacts the effectiveness and searchability of your headers is the location of search words. Always put the most important words first in your headers and sub-headers so they are the first or second word in the phrase.

Example: Looking Ahead at Required Courses

Improved with Front Loaded Key Terms: Required Courses for the B.A.

Micro-Content

Page titles, headings and sub-headings are examples of “micro-content.” In short, for websites, micro-content is content that allows users to scan a page quickly and understand what information is available without reading further for additional context.

Viewers make decisions based on the quality of a site’s micro-content. Ask yourself “Can viewers find what they’re looking for using only the headings and sub-headings?”

Empty Headers

KU CMS sites cannot contain any empty headers, meaning header class headers without content or with a non-breaking space (e.g., <h2>&nbsp;</h2>).

This often results from using the "Return/Enter" key (i.e., carriage return) in the design view to add white space instead of using CSS.

Empty headers are an accessibility issue because screen reader users have the ability to use headers as a way to navigate pages. When one is empty, they have no way of knowing why they are hearing an empty header.

If you want to add additional white space, use CSS to do so:

  • See “Using Built-In Bootstrap Classes to Add White Space” below for one method already built-into the KU CMS.
  • Or, contact KU IT Web Services at webservices@ku.edu for assistance.

Using Built-In Bootstrap Classes to Add White Space

KU CMS Sunflower uses a library called Bootstrap for a lot of CSS and Javascript. You can use the built-in Bootstrap classes to increase the white space between elements.

Instructions for Adding Bootstrap Margin Classes:

  1. Switch the ‘Text format’ below your Content field from “Restricted HTML” to “Full HTML.”
  2. Then add the desired white space by adding one of the Bootstrap margin-bottom or margin-top classes below to any tag (e.g., <p>, <h2>, <h3>, etc.)

Margin-bottom Classes

  • class=“mb-1” - adds of .25rem margin
  • class=“mb-2” - adds of .5rem margin
  • class=“mb-3” - adds of 1rem margin
  • class=“mb-4” - adds of 1.5rem margin
  • class=“mb-5” - adds of 3rem margin

Margin-top Classes

  • class=“mt-1” - adds of .25rem margin
  • class=“mt-2” - adds of .5rem margin
  • class=“mt-3” - adds of 1rem margin
  • class=“mt-4” - adds of 1.5rem margin
  • class=“mt-5” - adds of 3rem margin

Margin-left Classes

  • class=“ml-1” - adds of .25rem margin
  • class=“ml-2” - adds of .5rem margin
  • class=“ml-3” - adds of 1rem margin
  • class=“ml-4” - adds of 1.5rem margin
  • class=“ml-5” - adds of 3rem margin

KU Custom Classes to Mimic Header Styles

As stated above, it is important not to use the header classes (e.g., H1, H2, H3…) for aesthetics.

If you want to change the font-size of a header class (e.g., H1, H2, H3…) or make a simple paragraph header look like one of the header classes, KU IT has created a set of custom CSS classes that you can use to achieve your style goals. You must be in the "Source" view and switch the field from "Restricted HTML" to "Full HTML" for custom classes to work.

The following CSS classes can be applied to any of the header tags (e.g., H1, H2, H3…) or to paragraph tags <p> and div tags <div>. Exception - on Body 22, you must use <div> instead of <p>.

The following are all H3 headers that have a CSS class applied to the H3 header tag (e.g., <h3 class="h2">Your Header</h3>).

Add CSS class=h1

Add CSS class=h2

Add CSS class=h3

Add CSS class=h4

Add CSS class=h5

Add CSS class=h6

Do Not Add Bold to Header Classes

Header Classes are already bold. When you apply additional bold to those classes, they are too bold and no longer consistent with the branded KU Design System.

Additional bolding often occurs because content from a Drupal 7 site is copied into a Sunflower site with bold already applied. 

Accordions Titles Should Be H3s

Except in rare instances, accordion titles should be H3 header class headers.

For pages with extensive information inside of accordions, it is important for screen reader users can use the accordion titles to navigate the page like other headers on the page. If the accordion titles are not header class headers, a screen reader user would have to listen to everything in the section rather than tab through the options before choosing to read what’s in the accordion.

To make this change, you just need to change a checkbox in the “Style Options” tab for each of your accordion sections from DIV to H3.

Support