The HTML 5 Report

Is my web page HTML 5?

Run the test

HTML Hints browser extension

See how your favourite web pages are made

Get the toolbar button that shows:

  • HTML 5 content sections highlighted in green
  • Headings prefixed with h1 to h6
  • div wrappers highlighted in red

Install from the Chrome store

Or drag this bookmarklet to your bookmarks bar:

🄷🅃🄼🄻 Hints

Top tips for using HTML Hints

You can preview how HTML Hints works on this page just by clicking on the bookmarklet button above.

If you use Chrome and don't have your bookmarks bar showing then the extension is your best option. Alternatively you can press CTRL+SHIFT+B to reveal the bookmarks bar and then you can drag the bookmarklet to it.

If you are not using Chrome then you can just use the bookmarklet. Drag it to your bookmarks bar.

Once installed you can click the button to toggle highlighting. You can then visually check how good the HTML is on any page.

If you get in the habit of using the toolbar button on pages that you like the look of you can learn lots about whether web pages merely look pretty or if they are well-crafted with the right HTML elements.

Green highlighting

  • Is there a header?
  • Are navigation links in nav elements?
  • Is there is a nav element inside the page header?
  • Is the main content in a main element?
  • Does the page have breadcrumbs and are they in a nav element?
  • Is the main content organised in article and section elements?
  • Is related content, e.g. a newsletter sign-up form or related products shown in aside elements?
  • Are images are in figure elements, with figcaption titles?
  • Is there is a footer element?
  • Are footer links are in nav elements?

Headings

  • The h1 to h6 prefixes makes it easy to check that the headings are in order. This is important for search engine optimisation as well as accessibility.
  • Ideally headings should be inside rather than outside their respective header, article, section, nav, footer and aside elements.
  • There should only be one instance of h1 on a page. For most pages of a website this is the page title in the main element. The homepage is different, h1 is used for the website name in the page header.

Red highlighting

  • Is the page made entirely from div elements with no new HTML 5 elements?
  • Can some of the div elements be changed to accessible HTML 5 elements?
  • Can the remaining div elements be removed, with CSS Grid layout used instead?
  • Can span elements be removed to be replaced with CSS pseudo-elements?
Complementary document outline extension

The HTML 5 Outliner extension is an excellent companion for HTML Hints. It shows how those using assistive technology can navigate the page.

HTML 5 Outliner - Chrome store

By combining this extension with HTML Hints you can see what needs to be done to make your web pages neat, tidy, accessible and search-engine-optimised. Usually this involves moving a few headings around and changing them, e.g. from h1 to h2.

Please rate and review HTML Hints!

If you have benefited from HTML Hints then your feedback would be most appreciated.

You can rate and review the extension on the Chrome Web Store. All suggestions are welcome.