Introduction

When using a webpage, the power of headings to the untrained eye is under appreciated. Headings are essential tools to ensure the usability, specifically the ease of navigation and are the first port of call for a user when deciding what content is most relevant to them. In this blog post, we will look at the use of semantic structure in the creation of headings, something that goes a long way in the creation of a successful website.

Let’s start with some basic definitions:

A heading is a summarising word or phrase that describes the content that follows it.

A semantic is something that is non-comparable, and in relation to web design, code intended to represent structure and meaning.

Headings

A webpage is an accumulation of code that is linked together to allow a user to navigate around the different content of a website. Within code there are semantics (absolute elements). Headings can fall into this category.

The easiest way to understand semantic headings is to think of it as if a webpage had a table of contents. Heading 1 or <h1> describes your page as a whole; heading 2 or <h2> is the section title and is where you write your content; heading 3 or <h3> is a sub-section below heading 2. This structure and ranking continue until heading 6 or <h6>.

There can be multiple headings under the same rank as you can see in the example below. Headings that have an equal amount or higher rank start a new section, headings with a lower rank start new subsections but remain part of the higher ranked section.

For example:

<h1> Services

       <h2> Digital Marketing

               <h3> Email

               <h3> Marketing Automation

               <h3> Pay per Click (PPC)

               <h3> Social Media Marketing

                      <h4> Instagram

                      <h4> Facebook

                      <h4> LinkedIn

                      <h4> Twitter

               <h3> Search Engine Optimisation (SEO)

        <h2> Video & Photography

               <h3> Storyboarding

               <h3> Full Corporate Videos

               <h3> Video Promotion

Why is it important?

Other than improving your websites aesthetic, semantic headings help improve a website Search Engine Optimisation (SEO). Search engine algorithms use headings to help distinguish the most relevant content according to a user’s initial keyword search. Semantic structure optimises your website usability through the ease of finding appropriate content and as a result, users spend longer on your page, reducing the bounce rate whilst boosting your SEO rankings.