Headings are an essential element of any webpage. They are used to organise content, break up large blocks of text, and make it easier for readers to navigate and understand the content on the page. Headings range from H1 to H6, with H1 being the most important and H6 being the least important.
The importance of headings lies in their ability to provide context and structure to the content on a page. Without headings, content can appear overwhelming and confusing to users, making it difficult to understand and engage with.
Headings have significant impacts on the accessibility, usability, and SEO of your webpage, so need to be given the attention they deserve!
Whether you’re dragging and dropping in Squarespace, Wix or WordPress or hand-coding your web masterpiece, you need to have well-structured headings on your site. They are essential in communicating what your web page is about.
Setting the scene with HTML Semantics
Even if you’re not touching the code of a website, you should still have a basic understanding of how parts of it work. Heading structure is a prime example of this.
Semantics is the study of language. More specifically, it is the branch of linguistics and logic concerned with meaning within language. When we use a WYSIWYG (What You See is What You Get) editor in a product like Squarespace or Shopify, it’s actually turning your text into HTML code. That HTML code is made up of elements to differentiate between different types of content. In the context of websites, there are parts of the code that have meaning. This is what is known as semantic code.
As a quick example, this piece of text:
Here is a test heading
Here are some test words with some bold text
is actually:
<p>Here are some test words with some <strong>bold text</strong></p>
While this resource is only concerned with headings, it’s a good idea to know that there are a lot of semantic elements that make up your web pages. As an example, if you’re quoting somebody, then you should use the <blockquote> element. A regular paragraph of text should go in a <p> element. You wouldn’t put a copyright notice in a blockquote tag, because it would not be semantically correct. Some other examples of semantic elements include <section>, <article>, <nav> and <footer>.
If you want to get more into the nitty gritty of HTML, feel free to take a look at our HTML explainer or our HTML & CSS course. For examples of a lot of other semantic HTML elements, then check out the Mozilla Developer Network HTML element reference.
Why heading structure is important when authoring web pages
Code semantics are important when building a website, although, for the purposes of today, we’re just focusing on headings. Utilising correct heading structure relies on well-structured code as well as a technically literate content team to understand where and when to use the correct heading.
The hierarchy of heading structure
The hierarchy of heading structure is an essential element in web design that provides a clear and logical way of organizing content. It helps users to understand the relationships between different sections of the page and navigate the content easily. The heading structure is typically displayed using HTML tags, such as H1, H2, H3, H4, H5, and H6, which denote the different levels of headings.
The H1 (level 1 heading) is to say what the page is about. Depending on the theme or template you’re using, most website software will create an H1 from whatever you have said the main topic of the page is.
You then use H2-H6 tags to further define the structure of your web page.
This makes the page easy to scan for:
- People looking at the page
- People listening to the page via a screen reader
- A web crawler
The impact of heading structure on User Experience
User experience is all about making it easy for users to navigate and engage with your website. Properly structured headings can greatly improve the user experience by making it easier for users to find the information they’re looking for.
Headings are a great way to let the reader know about the upcoming content on the page and correct heading structure makes your website content much easier to visually scan. It creates organisation and helps to break up long swathes of text.
Have you ever tried to read 2000 words that are not broken up as subheadings? When I’m not working with Meeum clients, I lecture at university. When it comes to assessments, I can’t tell you how hard it is reading through thousands of words that are deprived of subheadings. Not only is the User Experience abysmal, but it also means I can’t scan a document quickly to get the gist of it, or easily return to a section if I so desire.
Use this page as a case-in-point. Without it being broken up with subheadings, it would be far more difficult to read. It’s not just about using headings though, it’s about using the right headings.
How heading structure impacts accessibility
Accessibility is about ensuring that everyone, regardless of their abilities or disabilities, can access and use your website. For people with visual impairments, proper heading structure is crucial. Screen readers rely heavily on headings to navigate and read content on a webpage. Properly structured headings make it easy for screen readers to understand the organisation of the content and allow your readers to navigate through the page efficiently.
Anyone using assistive technologies like a screen reader can still interact with your website if the headings are correctly set. Screen readers offer shortcuts for their users to be able to navigate through pages via the headings – this means that someone using a screen reader has the ability to quickly scan a webpage, just like someone who is reading it.
Additionally, headings help readers with cognitive disabilities, such as dyslexia, to better understand and engage with content. By breaking up large blocks of text with headings, it makes it easier for these readers to engage with and process information.
This video from Level Access demonstrates the importance of heading structure for accessibility.
How heading structure can help improve your SEO ranking
Heading structure is also an essential part of your On-Page SEO strategy. While it may not be a specific ranking factor (as far as we know), it IS an indirect ranking factor.
For many of the same reasons as its importance to accessibility, semantic heading structure helps Google and other search engines understand the context of the content you’re writing, as well as the hierarchy of the page. This is important for search engines, so they know to send readers your way who are searching for that same content.
We do use headings when it comes to search… we use them to better understand the content on the pages.
John Mueller – Search Advocate at Google
As we’ve also discussed at length in our SEO book, User Experience and Search Engine Optimisation are closely linked. If your readers are having a great experience and staying on your site, then it’s likely this will flow through to your SEO as well.
Semantic heading structure
Just like the website elements I mentioned above have semantic meaning, so do the ones we use for headings. When you’re in your website editor, you have the option of choosing what level of heading to use. It’s important to choose the correct one.
Headings Hierarchy
Major headings go inside H1 tags.
The H in H1 stands for heading. Headings are semantic by hierarchy.
The next level of heading after H1 is H2, then H3 etc.
Their sole purpose is to designate a hierarchy of headline importance, so human readers, automated search engines and screen readers can look at a document and easily determine its information structure.
Heading hierarchy can be a difficult concept to wrap your head around. Think of heading elements like subheadings in an assignment, or when you’re writing a report using a word processor.
Heading levels
There should only be one H1 on a page. All other H’s should be hierarchically relevant to the content around them. You’re creating structure so the page is easy to scan, whether a person or a machine is reading it.
The H1 is what the whole page is about. If your webpage content was about your favourite parts of Europe, then your H1 might be My Favourite Places in Europe.
Under that main heading, you would then have a series of Heading 2’s (H2) that could be France, Spain and Italy.
Under each H2 could have some H3’s, which might be cities within those countries, so the final output would be something like:
Heading level 1: My Favourite Place in Europe
Heading level 2: France
Heading level 3: Paris
Paragraph text: Paris is lovely and has wonderful architecture.
Heading level 3: Lyon
Paragraph text: Lyon is the third-largest city in France.
Heading level 2: Spain
Heading level 3: Madrid
Paragraph text: Madrid is the capital of Spain
Heading level 3: Barcelona
Paragraph text: My recollections of Barcelona are hazy.
Heading level 2: Italy
Heading level 3: Rome
Paragraph text: Rome is an amazing place ot visit – definitely check out the Colosseum.
Heading level 3: Venice
Paragraph text: Venice has lots of canals.
You can see a similar example I’ve created over on CodePen.
How to choose the correct heading type in your Content Management System
Choosing the correct heading type in any Content Management System (CMS) or blogging platform should be relatively simple, and most offer a pretty similar experience. I’ve done some quick screengrabs to illustrate how to update the text to be the correct heading level in WordPress as well as Squarespace. This could be if you’re writing new content or editing existing content that may not have the correct structure.
Updating headings in WordPress
WordPress is our web platform of choice, although the text editor can be a little clunky at times. To create headings, simply highlight the text, select “transform to heading” and then click the desired heading level.
Updating headings in Squarespace
Squarespace has arguably a more user-friendly interface for this. By simply selecting the text you have the option to choose what heading type to go with.
The process in other web platforms, such as Wix, Weebly and Shopify are very similar to those examples.
Help create a better internet by improving your heading structure
Whether you are creating a website using a WYSIWYG editor or coding by hand, having well-structured headings is crucial for making the web a better place. Remember to use the correct hierarchy of heading structure, create semantically correct code, and always try to make the web as accessible as possible and open to everyone.
Now a digital veteran, Sam Hemphill initially trained as a drummer and high school teacher and spent 10 years as a touring musician and tour manager.
During that time, he...