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 an optional div#page tag that beholds the complete page. Inside the div#page section I mostly use three sections:

header
main
footer

<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Meta-Title</title>
<meta name=”description” content=”meta-description.”>
<link rel=”stylesheet” href=”css/styles.css”>
</head>
<body>
<div id=”page”>
<header></header>
<main></main>
<footer></footer>
</div>
</body>
</html>

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.

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.

<main>

<section class=”intro”>
<h1>Lorem ipsum dolor est</h1>
<p class=”teaser”>Lorem ipsum dolor est …</p>
</section>

<section class=”keyvisual”>
<figure><img src=”images/keyvisual.jpg” alt=””></figure>
<div class=”container”>
<h3>Subheadline</h3>
<h2>Headline</h2>
<a href=”#” class=”button”>more info</a>
</div>
</section>

<section class=”teaser products”>
<h2>Our latest products</h2>
<p class=”teaser”>Lorem ipsum dolor est …</p>
</section>

</main>

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.

Source

Best Productivity Tools for Developers

How I Structure HTML for Better SEO Results

One big issue: “DIVitis”

This is a mess.

The main idea

My semantic HTML boilerplate

Header

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

The actual page content

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

Footer

Conclusion

Let’s talk about your project.

info@alitheexpert.com

How I Structure HTML for Better SEO Results

One big issue: “DIVitis”

This is a mess.

The main idea

My semantic HTML boilerplate

Header

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

The actual page content

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

Footer

Conclusion

Let’s talk about your project.

info@alitheexpert.com

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

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