How I Structure HTML for better SEO Results

How I Structure HTML for Better SEO ResultsThis article shows how I optimize websites using semantic HTML tags to prepare the content for better machine readability.Today search engine optimization is one big lever to get visibility on the web. But a l…

How I Structure HTML for Better SEO Results

This article shows how I optimize websites using semantic HTML tags to prepare the content for better machine readability.

Today search engine optimization is one big lever to get visibility on the web. But a lot of websites don’t use semantic HTML 5 tags to optimize machine readability for bots.

One reason why HTML semantics are often so bad: There are more and more non-programming programmers, who use copy&paste and templates to create websites. These templates are often poorly built in terms of semantics.

A great benefit of semantic code is that machines and humans can better read it.

One big issue: “DIVitis”

If the markup of a website mainly is structured by a lot of nested divs, and the divs are there only for layout reasons, its called a DIVitis. Look at the screenshot down. It is taken from a template of Divi, a template system for WordPress.

This is a mess.

Screenshot of a classic: DIVits at it’s best

The main idea

Every time you write class names for divs that contain a tag name, you should replace the div with the corresponding semantic tag and simplify the class name.

Example:

❌div.nav-main

✔️ nav.main

Here is a list of some semantic tags.

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

My semantic HTML boilerplate

In my opinion, most websites can be built with the following boilerplate.

Please ignore the head section, this article is all about the body section. The shown head section is mentioned only for the sake of completeness.

In my code example the body has a main tag that beholds the complete page. Inside the main section if mostly use three sections:

  • header
  • div#content
  • footer

Please read in addition my article on how I organize my CSS. In combination with this article you get a better idea on how I write semantic code to improve readability for machines and humans at the same time.

How I Organize My CSS for Websites Without a Framework

Header

The header section is mostly used to display the brand / logo / company name and all major navigations.

Inside the header I often use two nav elements as direct children:

  • nav.meta
  • nav.main

It makes a semantic difference to use nav elements for navigation instead of using div.nav-meta and div.nav-main. Don’t do it.

Inside the nav elements I always put uls. Inside the nav.main I often insert the company logo as an h3 element.

Benefit: To address the main navigation in CSS I write the following code. You can easly read the hierachy.

header nav.main { ... }
header nav.main ul{ ... }
header nav.main ul li a{ ... }

The actual page content

In the content area I use section tags to structure all contents in logical groups. Every content section gets a class name which is just readable.

section.intro{ ... }
section.intro h1 { ... }
section.keyvisual{ ... }
section.keyvisual div.container h2 { ... }

I use divs in the content area exclusively as containers that have a layout function.

In my example the section keyvisual has a container for headlines that is positioned absolute inside the keyvisual.

Footer

In the footer area I also use section tags to logical separate the content.

In my example there are two sections:

  • section.brand
  • section.legal

In the brand section I often add the logo, address and contact data.

The legal section is of a navigation type, so I use a nav tag.

Conclusion

I know today’s modern devices and browsers can handle bad code. But if you want to work more sustainable and if you want to improve the readability of your HTML code for machines and humans, revise it and optimize your semantics.

Thanks for reading.
I look forward to your feedback. 😍

Please comment, bookmark or follow me to support my channel.

If you have a specific topic in mind, you would want me to write about, let me know on twitter: https://www.twitter.com/@stephan_romhart


How I Structure HTML for better SEO Results was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.


Print Share Comment Cite Upload Translate
APA
Stephan Romhart | Sciencx (2024-03-29T13:11:34+00:00) » How I Structure HTML for better SEO Results. Retrieved from https://www.scien.cx/2021/11/07/how-i-structure-html-for-better-seo-results/.
MLA
" » How I Structure HTML for better SEO Results." Stephan Romhart | Sciencx - Sunday November 7, 2021, https://www.scien.cx/2021/11/07/how-i-structure-html-for-better-seo-results/
HARVARD
Stephan Romhart | Sciencx Sunday November 7, 2021 » How I Structure HTML for better SEO Results., viewed 2024-03-29T13:11:34+00:00,<https://www.scien.cx/2021/11/07/how-i-structure-html-for-better-seo-results/>
VANCOUVER
Stephan Romhart | Sciencx - » How I Structure HTML for better SEO Results. [Internet]. [Accessed 2024-03-29T13:11:34+00:00]. Available from: https://www.scien.cx/2021/11/07/how-i-structure-html-for-better-seo-results/
CHICAGO
" » How I Structure HTML for better SEO Results." Stephan Romhart | Sciencx - Accessed 2024-03-29T13:11:34+00:00. https://www.scien.cx/2021/11/07/how-i-structure-html-for-better-seo-results/
IEEE
" » How I Structure HTML for better SEO Results." Stephan Romhart | Sciencx [Online]. Available: https://www.scien.cx/2021/11/07/how-i-structure-html-for-better-seo-results/. [Accessed: 2024-03-29T13:11:34+00:00]
rf:citation
» How I Structure HTML for better SEO Results | Stephan Romhart | Sciencx | https://www.scien.cx/2021/11/07/how-i-structure-html-for-better-seo-results/ | 2024-03-29T13:11:34+00:00
https://github.com/addpipe/simple-recorderjs-demo