John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown SEO.

Website Facebook Twitter LinkedIn Instagram YouTube

Semantic HTML is the basis of a well structured website.

With the proliferation of visual web page building tools, it can be easy to use headings for presentation insured of structure.

There are pragmatic reasons to focus on creating websites and web pages that are both semantic and HTML valid according standards of the World Wide Web Consortium (W3C).

We’ll also look at how proper HTML hierarchy helps accessibility and user experience.

HTML Hierarchy of Page Structure

According to WCAG 2.1, Section 4.1.1 Level A, HTML markup elements should be nested according to their specifications. This means that heading tags h1, h2, h3, h4, h5, and h6 are nested appropriately in a web page.

H1 heading tag

H1 tags are used as the main headline, and should only appear once in the page (for valid HTML).

For purposes of SEO, Google is extremely lenient with the use of h1 heading tags, as page building software and “drag-and-drop” programs are commonly used to display heading tags for presentation instead of semantic hierarchy.

In screenreading browsers, the h1 tag establishes the concept of an outline, with hierarchy further established by the nested h2 through h6 tags. Paragraph tags (p), ordered lists (ol), unordered lists (ul), blockquotes, and other HTML elements nest under each of the heading tags.

According to the Mozilla Developer Network (MDN) notes, users that navigate using a screenreader often jump from heading to heading to get the meaning of a page. This makes it important to not skip headings in their natural hierarchy.

H2 heading tag

H2 tags are most commonly used to mark the beginning of sections in a web page. On our website, and the sites we develop for clients, the h2 tags are the most commonly used heading tag, indicating the beginning a a new section or idea within a web page.

H3 heading tag

H3 tags nest under h2 tags to begin subsections of a primary section.

H4, H5, H6 heading tags

H4 through h6 tags are used to nest as subsections under main sections and larger subsections. These headlines indicate smaller components of a web page section.

Code Example of Heading Tag Hierarchy

The following is a code sample of proper HTML structure within the body of a web page.

<h1>Main Headline</h1> <h2>Section One</h2> <h3>Smaller Idea in Section One</h3> <h2>Section Two</h2> <h3>Subsection of Section Two</h3> <h4>Subsection of h3</h4> <h2>Section Three</h2> <h3>Subsection</h3> <h4>Smaller Section</h4> <h5>Deeper Section</h5> <h6>Smallest Section</h6> <h2>Summary</h2>

Semantics vs Presentation

The most common error in HTML hierarchy is using headlines for design presentation rather than hierarchal meaning.

Web browsers will still render a page, and search engines usually have no issues When the hierarchy is out of order. However, this is not ideal. Technically, when HTML hierarchy is misordered, the HTML will not be 100% valid according to W3C standards. While many pages do not validate perfectly in the 2020s due to embedded widgets and the modularity of web design, web developers should strive to use W3C standards whenever possible.

Valid, efficient code is thought to be easier for Googlebot to crawl and parse for indexing. Valid pages coded with W3C standards are also generally easier for screenreaders to navigate.

Accessibility, Screenreaders and HTML Hierarchy

Screen reading browsers exist for people who are legally blind or visually impaired to use the web. These special browsers read out the page to users. Two of the screen readers that are commonly used are JAWS (Job Access with Speech) and NVDA (NonVisual Desktop Access).

Some web developers and website owners erroneously believe that web accessibility and screenreaders are an infinitesimal part of the market. The reality is that over 8.1 million people in the United States alone have a visual disability, about 3.3% of the population.

It is estimated there are about 4.4 million people using screen readers in the United States. At least 1.38% of all internet users in the US are using screen readers.

Other Reasons People May Not Use Proper HTML Hierarchy

Running in SEO circles, I observe some of the theories about ranking higher that are circulated through videos and forums. One such theory states that if you use keywords in certain proportions in h2, h3, h4, h5, and h6 tags, it may have a positive effect on your SEO.

This seems a bit simplistic, and likely unsustainable, as Google makes adjustments to it’s ranking algorithm thousands of times each year.

However, I can see people taking this advice and adding random heading tags in order to “game the system” and attempt to rank higher. My advice is to focus on creating content or site functionality that allows people to accomplish their goals, or find the information they came to obtain, in a pleasant experience.

Creating Better Web Experiences

Using HTML in a logical hierarchy is good for users, easier on visually-impaired users, and reduces friction for Googlebot to crawl and render pages so they can get indexed. Useful sites like the WAVE Web Accessibility Evaluation Tool by WebAIM make it relatively simple to diagnose errors and warnings with proper HTML nesting, as well as other accessibility issues.

If you’re concerned that your website is missing the mark with HTML coding standards, or if you have a SEO issue you need diagnosed, feel free to reach out. The team at Lockedown SEO is here to help.

Tags: Accessibilty, Content Creation, HTML Originally Published: June 17th, 2022

Join the Comments

John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown SEO.