What are headings and how do I use them?
Apr 30, 2021Headings are an essential part of accessibility, Search Engine Optimization, and user experience. But, wait, what are headings?
Headings create the content hierarchy of a page and, more specifically, are often used to separate sections of content.
What is an H1 (Heading 1)?
For this example, the page Register for Classes uses the keyword phrase “Register for Classes” as the H1. An H1, also Heading 1, is the most important keyword phrase for this page. You can also think of an H1 as a book title.
Some things to keep in mind for H1s:
- The H1 should act as a summary for the important content of the page
- Pages should only have one H1 in order to effectively tell search engines what content lives on that specific page
Now that you have identified your H1, it’s time to think about additional headings to complement the page.
What is an H2 (Heading 2)?
An H2, also Heading 2, would be the next heading to use. Referring back to the Register for Classes example, the H2 is How to Register for Classes. Note, the umbrella term “Register for Classes” lives above “How to Register for Class.”
This creates the content hierarchy that communicates to search engines and screen readers how this information is structured. If headings are not configured properly this could result in the page not being properly indexed by search engines and accessibility issues for screen readers.
What is an H3 (Heading 3)?
You probably have a pretty good idea what an H3, Heading 3, might be now having read a little bit about headings. But, just in case, an H3 is another way we can break up the content on a page under an H2. So, referring to our Register for Classes page, the H3’s appear under the H2 “How to Register for Classes”. The first H3 is labeled, “Log in to UCDAccess (student portal)”.
This heading is an H3 because it is organized under the H2 “How to Register for Class,” as this is the first step to register for a class. The second H3 is the second step in the checklist, “Find Your Enrollment Date.” Again, this information falls underneath the H2 and acts as a way of providing more specificity to the user.
What is an H4, H5, & and H6 (Headings, 4, 5, & 6)?
Similar to a paperback novel, H4-H6's could be topics or sections of a chapter, (the chapter likely being the H2).These headings, more similar to an H3, are used to provide more specificity to the user. In the Register for Classes example, the H4’s are located under the section “When to Register for Classes."
The H4's on this page are labeled, “Graduate Student,” “Undergraduate Students,” “Non-Degree Students,” and “Open Enrollment.”
These labels indicate when a student is eligible to register for classes and provide more specificity to the section “When to Register for Classes.”
Headings & Search Engine Optimization (SEO)
As mentioned earlier, headings are a very important part of SEO. If you are not familiar with SEO, this refers to optimizing your content so that search engines are able to successfully index your page allowing users to then find that page from their search. If the hierarchy, specifically headings, are not properly structured this means a user might not be able to find the information they are looking for. So, to help ensure your audience finds the content they need, stick to the steps above when determining your headings and organizing your content.
Headings & Accessibility
A page should always have an H1 for both accessibility and SEO with the exception being pages that redirect and do not have content. In many ways, accessibility and SEO overlap and this is one of those cases where sticking to SEO best practices also adheres to accessibility standards. You also want to ensure you stick to the H1-H6 hierarchy when building pages.
Real Life Example
I like to think of this process similar to a shopping list. Thinking of it this way, my H1 would be “Shopping List,” my H2 would be a collection of items including “Vegetables, Deli, and drinks.” Obviously, this does look like a pretty sparse list for a grocery run. But, this is where the H3’s can add additional context. So, sticking with our shopping list, our H3’s would be every item that would fall under an H2. This would mean our H3’s would be “Tomatoes, hamburger patties, and some sparkling water.” If we needed to add more specificity, we would just use H4’s. An H4 in this example could be brands of the H3 like “Roma, Beyond Meat, and Le Croix.”
Granted, this is not the only way to organize a shopping list. The H2’s, H3’s, and H4’s could be different depending on your need. But, the same is true with offices, departments, schools, colleges, etc.