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

Headers

• Headers are used to provide organizational hierarchy on the page.
• Header classes are used rather that using bolded text.
• Headers are written concisely using key words to ensure best search results.
• Underlined, Italic or all caps headers within sections are not allowed.

Proper Order/Nesting

• Headers must be used in order: H1, H2, H3, H4, H5, H6.
  • (e.g., H3 cannot occur before an H2; H4 is properly nested under an H3).
• There can only be one H1 header on any page.

Headers are Present and Optimized for Search

• Headers are used to provide organizational hierarchy.
• Headers are written concisely using key words to ensure best search results.
• Search engines look at the hierarchy of information on pages based on the header classes.
• Header text is used to create search results.
  • Select header classes and write headers with 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)? 

Headers Are Not Selected for Aesthetics

Proper headers (i.e., H1, H2, H3, etc.) should not be chosen for their aesthetics (i.e., style, appearance).

If you would like to change the appearance of a header class, use CSS to modify the way it appears. 

See "Using CSS to Change Header Appearance" below for information about how to do it.

Empty Headers

KU CMS sites cannot contain any empty headers. Empty headers are headers without content meaning the code behind the page contains a non-breaking space (e.g., <h2>&nbsp;</h2>).

The can happen when using the "Return/Enter" key (i.e., carriage return)  to add white space. If you want extra space on a page use CSS.

Empty headers are an accessibility issue because screen reader users use headers to navigate pages. When a header is empty it can be confusing.

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

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

Do Not Add Bold to Headers

Headers are already bold. When you apply additional bolding, 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

Accordion titles should be set as H3 headers, except in rare instances.

The default style option is H3.  The checkbox in the “Style Options” tab for each accordion sections should be set as H3, not DIV.

EXPLANATION: Screen reader users use the accordion H3 titles to navigate the page. If the accordion titles are not set as headers, a screen reader user would have to listen to everything in the section rather than being able to tab through the options before choosing what to read.

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 be one H1 on a 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

Writing Effective Headers

• Headers should be simple and concise. Use as few words as possible.
• Headers should be written for optimized search results:
  • Use the keywords that users are likely to search for (e.g., Google, Yahoo).
• Write headers and sub-headers so they are easily scanned with the most important words first
• Use plain language
• Avoid jargon and acronyms
• Full sentences (e.g., taglines) should not be used as headers in most cases.
• Do not use taglines for headers except on marketing-style pages and only if the tagline is part of a section designed to deliver users to the content.
  • If a tagline is used as a header it is likely to deliver poor search results.

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.

Header Case Consistency

• We strongly recommend the use of title case for all headers.  It increases scannability and ease of use.
• Title case capitalizes the first letter of all words except prepositions, articles and conjunctions.
• All caps, underlines and italics should not be used for headers.
  • NOTE: All caps styling is part of the design in some KU Sunflower sections.
• Header case should be consistent on a page — and if possible across the site.

Title Case

Capitalize:

• Nouns
• Pronouns
• Verbs
• Adjectives
• Adverbs

Do not capitalize:

• Prepositions (e.g., in, at, to, of, on, etc.)
• Articles (e.g., an, a, the, etc.)
• Conjunctions (e.g., for, nor, but, or, yet, so, etc.)

Benefits of Title Case for Headers

• Using title case helps to set the header text apart and make it easily scannable.
• Using title case immediately signals to users that the text is a header providing context for the the copy that follows.
• Using sentence case for headers may cause the user to have to work to determine if the text is emphasized text, a pull quote, or a header.

Using sentence case in page titles, headers and main menu link titles:

• May not be as noticeable at a glance
• May appear unintentional
• Support: Typography for Glanceable Reading: Bigger is Better (Nielsen/Norman Group)

Examples:

• Sentence case: Our research
• Title case: Our Research
• Sentence case: Who we are
• Title case: Who We Are

IMPORTANT: The key is to have a consistent presentation of case/capitalization across your site. So, whatever case style you choose, it should be consistent sitewide.

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.

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?”

Using CSS to Control Whitespace

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 or decrease the whitespace between elements.

Instructions for Adding Padding Classes:

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

Instructions for Adding Margin Classes:

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

Using CSS to Change Header Appearance

It is important not to choose 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"

Support

• Microcontent: A Few Small Words Have a Mega Impact on Business (Nielsen Norman Group)
• Company Name First in Microcontent? Sometimes? (Nielsen Norman Group)
• Plain Language is for Everyone, Even Experts (Nielsen Norman Group)
• Writing Digital Copy for Specialists vs. General Audiences (Nielsen Norman Group)
• Video: The Biggest Mistake in Writing for the Web (Nielsen/Norman Group)
• Be Succinct! (Writing for the Web) (Nielsen/Norman Group)
• Applying Writing Guidelines to Web Pages (Nielsen/Norman Group)
• Writing Style for Print vs. Web (Nielsen/Norman Group)
• Concise, SCANNABLE, and Objective: How to Write for the Web (Nielsen/Norman Group)
• Writing for the Web (Usability.gov)