Headers - Overview

Understanding proper headers and how they work is critical to creating and maintaining effective websites

What Are Proper Headers?

On websites, more is required than just plain text that has been:

screen capture of WYSIWYG header styles dropdown menu

Proper headers are essential for:
- Accessibility
- Search Results
- User Experience and Scannability
Proper headers must be:
- Present
- Properly-ordered
- Well-written
On websites, headers are an indexing system - both visually and in the code.
If proper headers are not present, they cannot function as an index. If headers are not ordered properly, the indexing system is broken.
Proper headers should be used to create hierarchical organization on the page – meaning your headers tell users and search engines about the importance of information on a given page – and how all that information relates.
- To create a hierarchical index:
  - Headers must be in proper order
  - There can only be one H1 header per page
  - H1 header always comes from the headline field in the header section
  - Proper headers should be chosen based on their proper order in the index - not be used for the way they look (i.e., aesthetics, styles).
    - If you need to change the look of a header you can use CSS to change the header's appearance without changing the proper order.
Headers function as "location beacons" or "anchors" to specific content for search results.
Headers should be written strategically - meaning the text in the header uses the same key words your users are likely to type into a search field to find that information.

Why Are Proper Headers So Important?

Without proper headers, screen reader users must listen to a webpage word-for-word to know what content is available.
Well-written and properly-ordered headers create an indexing system that allows screen reader users to navigate a webpage like an interactive table of contents.
A user can listen to the proper headers like chapters in a book and decide where to go next.

Well-written and properly-ordered headers are a major determinant in the quality of your site's search results and SEO (search engine optimization).
Well-written and properly-ordered headers are like "location beacons" or "anchors" to specific content that tell search engines (e.g., Google, Yahoo) what information is most important on your site and where to find it.
Without proper headers, the quality of search results can be significantly diminished as search engines are forced to search for key words in paragraph text instead of proper headers.

People do not read webpages - they scan them.
When headers are present and well-written, they tell visual users what a given section is about, which allows them to quickly scan a page and locate the content they are looking for.
Without proper headers, users are forced to read the page, which increases the likelihood some users will leave the page before they find the information.

Please see:

cms.ku.edu/headers

cms.ku.edu/video-series

There can only be one H1 header per page

H1 header always comes from the headline field in the header section

Header classes should be used instead of plain text in most instances
Only one H1 per page - your page header is your H1
Header classes should not be selected for aesthetics/styles
No empty headers - caused when trying to add white space without CSS
Header classes must be in proper order:
1. Reflects hierarchical indexing = importance of information on the page and how information relates

Book title
1. Chapter
  1. Section in chapter
    1. Sub-section in section of chapter

Book title (H1)
1. Chapter (H2)
  1. Section in chapter (H3)
    1. Sub-section in section of chapter (H4)