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.
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.