Highlight heading levels

Headings in HTML are important for many reasons. For SEO, accessibility and overall information structure.

The hierarchy is very important as well. First you must have the h1. And if you need another heading the following must be h2 and so on.

This is an example structure of heading levels.

h1 - Main title  
  h2 - Section title A.
  h2 - Section title B. 
    h3 - Subtitle for Section title B. 
      h4 - Subtitle for the previous h3. 
    h3 - Subtitle for Section title B
  h2 Section title C. 
  h2 Section title D.

How you style the headings are of course up to you. There's nothing to say that the h4 can't be the biggest heading. Or the h1 the smallest. Or that different h2 headings can have different design.

And that is why the following CSS can be used to highlight in your development code what level every heading has.

h1:before, h2:before, h3:before, h4:before, h5:before, h6:before {
  color: red;
  opacity: 1;
  background-color: white;
  z-index: 1;
  position: relative;
  top: -2px;
  left: -2px;
  border: 1px solid red;
  font-size: small;
  padding: 0 1px;
  line-height: 1;
  margin-right: 0;
}
h1:before { content: 'H1'; }
h2:before { content: 'H2'; }
h3:before { content: 'H3'; }
h4:before { content: 'H4'; }
h5:before { content: 'H5'; }
h6:before { content: 'H6'; }

The idea is to add an element before every heading and spell out the heading level to make it visible on the page without checking the source code or dev-tools.

Hope you find this useful.

Until next time!