Is my web page HTML 5?

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?

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.