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

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>. 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