What are Headers?
Headers are a group of tags, designated h1 through h6, that allow you to structure your text while also providing visual distinction between sections. The text editor window allows you to apply these easily using a dropdown menu. On the source code side, these are set up using HTML tags.
When writing a long document, you want to break up your article using sections. Each section should have a header serving as an introduction to that section of text.
There should only be one h1 title on a page. On most pages, this is taken up by the title of the page. If you are using a page with the slide layout at the top, you might not see an h1 there. In that case, it may be appropriate to use an h1 element.
DO use heading tiers to outline your document for easier navigation and accessibility.
Structuring Content
In order to promote readability and comprehension, you want to nest your headers in order. Think of it like a traditional outline. Your headers form an outline for your content.
| Outline View | Header View |
| I. A. 1. 2. 3. B. 1. 2. C. |
h1 h2 h3 h3 h3 h2 h3 h3 h2 |
This is super important for three reasons:
- If you were to read nothing else of your article, your header elements should tell the general story of your document.
- Screen readers have a "scanning" mode that reads only text set to certain header designations. This helps visually impaired visitors understand the content of the page without having to listen to the whole page being read out.
- Google and other search engines use your header tags to know not only what the topic of your page is, but what you are saying about that topic.
If you were to use these tiers of headers out of order, say h2 followed by an h4, then back to h3, you are going to mess up the outline of your content and therefore it's overall quality as an accessible and well-crafted document.
DO NOT use headers specifically for the way they make your text look.
Headers Are Not for Styling Text
Headers come with styling that makes them visually distinct from the rest of the text on the page. This helps ensure that the reader knows what they are looking at. Furthermore, these elements are styled so that h1 is the largest, with each header becoming smaller as you go through the list. This creates visual distinction for the nested element of how headers work.
While it may be tempting to use headers for an easy way to style spans of text to set them apart, this is not the way to do so. It will mess up your page accessibility and SEO score. If you really want to style your text in a very specific way, you can set your text to Full HTML and edit the source code to get the specific visual impact you want using in-line CSS. Header tags need to be reserved for actual section titles.