Ali The Expert


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.

SEO Better Results

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.



✔️ nav.main

Here is a list of some semantic tags.

My semantic HTML boilerplate


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 class=”meta>


              <li><a href=”#>Partners</a></li>

              <li><a href=”#>Product finder</a></li>

              <li><a href=”#>Change language</a></li>



      <nav class=”main>

            <h3><a href=”#>Logo></a></h3>


                   <li><a href=”#>Products</a></li>

                   <li><a href=”#>Services</a></li>

                   <li><a href=”#>Company</a></li>

                   <li><a href=”#>Contact</a></li>




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

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


       <section class=”intro“>

             <h1>Lorem ipsum dolor est</h1>

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



       <section class=”keyvisual>

             <figure><img src=”images/keyvisual.jpgalt=””></figure>

            <div class=”container>



                 <a href=”#class=”button>more info</a>



      <section class=”teaser products>

            <h2>Our latest products</h2>

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


       <section class=”>





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

In my example there are two sections:

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. 


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.