May 30, 2023

HTML Headings Hierarchy: Using Proper Semantic Order

Table of Contents

HTML (HyperText Markup Language) is a foundational element of virtually all websites. As well as providing structure to a webpage, it also plays a crucial role in helping search engines understand your content. One such aspect of HTML structure involves the use of heading tags.

Understanding the semantic structure of HTML tags, especially for subheadings, is critical in creating clear, accessible, and SEO-friendly web content.

Oftentimes I see clients using subheading to style their web content, as their theme will have different CSS values for each subheading option. This is an incorrect use. You do not want to use subheading only to style your text.

Heading tags, from <h1> to <h6>, are used to define the structure and hierarchy of a webpage’s content. Understanding how to use these tags in the correct order, known as semantic order, is important both for accessibility and for technical SEO.

Technical SEO graphic

What is technical SEO?

Technical SEO refers to the process of optimizing your website for the crawling and indexing phase. It’s called “technical” because it has nothing to do with the actual content of the website or with website promotion. The main goal of technical SEO is to optimize the infrastructure of a website.

Let’s dig into how you can utilize these subheadings in the proper semantic order, in order to add technical SEO value to your website.

What is Semantic Order in HTML?

Semantic order refers to the way in which HTML elements are organized to convey meaning and hierarchy. By structuring your content using appropriate HTML elements, you help search engines and accessibility tools understand the flow of your content.

HTML Headings Hierarchy

HTML provides six levels of headings, <h1> through <h6>. The <h1> tag is meant to represent the most important heading, and the other tags should be used in descending order of importance.

Let’s take a look at a correct use of heading hierarchy:

<h1>Main Heading</h1>

<h2>Subheading</h2>

<h3>Sub-Subheading</h3>

<h2>Another Subheading</h2>

<h3>Another Sub-Subheading</h3>

<h4>Even More Specific Subheading</h4>

<h1>Another Main Heading</h1>

The correct use of heading tags should be in a descending order, starting from <h1> and going down to <h6>. As seen in the above example, it’s perfectly okay to have multiple <h1> tags, as long as each represents a distinct section of your content.

Incorrect Use of HTML Headings

If heading tags are used out of order, it can confuse search engines and accessibility tools. For example:

<h1>Main Heading</h1>

<h4>Subheading</h4>

<h2>Another Subheading</h2>

<h3>Another Main Heading</h3>

In the above example, the subheadings are not in correct order. The first subheading jumps from <h1> to <h4>, skipping <h2> and <h3>. Similarly, the second main heading should be <h1>, not <h3>. It disrupts the logical hierarchy of the content, and it’s not a good practice.

It’s About More Than SEO

Using HTML headings in the proper semantic order isn’t just about search engine optimization – it’s also a crucial aspect of web accessibility. By using headings correctly, you’ll ensure that your content is structured logically and is easy to navigate, not just for search engines but also for all users.

Remember, a correctly structured HTML document improves the user experience and accessibility while potentially boosting your search engine visibility.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

map-markerchevron-down linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram