Good Website Inspector

making the web better


Rule: Use headline tags

Use headline tags <h1> - <h6> for headlines and sub headlines.

In (X)HTML the site should use <h1> only once and as site title and every article headline should become a <h2> and each sub headline should become a headline starting from <h3> till <h6> depends on the nesting deepth.

In HTML5 Headlines embedded in <article> container can use <h1> and all other sub headlines should use higher tags depending on the nesting deepth. In HTML5 you should group connected headlines with the new <hgroup> tag to reduce the nesting deepth.

Avoid non semantic nesting

Avoid nested usage of headlines with gaps. Headlines should used in the right semantic order from <h1> as highest and most important headline type till <h6> as lowest headline type. All Headlines should not have gaps.

Rule: Avoid <img> tags within headline tags

Avoid using <img> tags within headline tags <h1> - <h6> because they are less readable and scorable by search engines.

To use images within headlines for smoother and uniquer fonts, the images should be replace inner headline content via CSS and background images.

Common HTML constructs are:

<h2><span>My important headline</span></h2>

Possible headline tags are:

h1, h2, h3, h4, h5, h6

Rule: Use semantic HTML tags

A good website should use semantic HTML Tags. Semantic HTML tags are very descriptive. A paragraph must be embedded into a <p> tag which stands for paragraph.

The semantic tags are widly extended in HTML5 and a web developer can produce new frontendcode only with few or none of non descriptive and non semantic html tags like <div> or <span>

Why should a website use semantic HTML code?

One big answer: Google and other search engines loves them because they have less work to interprete the content of a website to seperate the important content. Search engines honor a good semantic website with a better ranking in search results.

Required semantic HTML tags



h1, p


strong, em, blockquote, q, ul, ol, dl, dt, abbr, address, dfn, h2, h3, h4, h5, h6



h1, p, header, footer, section, article, nav


strong, em, blockquote, q, ul, ol, dl, dt, abbr, address, dfn, h2, h3, h4, h5, h6, aside, audio, video, canvas, command, details, embed, figure, figcaption, hgroup, mark, output, summary, time, wbr

In HTML5 there wree new input types introduced and their usage is highly recommended:

color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week

Der Good Website Inspector wurde von Hubert Burda Media entwickelt.
Autor: Stefan Seifarth, Media Innovation Lab GmbH, Hubert Burda Media, Impressum & Datenschutz