Is my web page HTML 5?
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
toh6
div
wrappers highlighted in red
Or drag this bookmarklet to your bookmarks bar:
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 pageheader
? - 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
andsection
elements? - Is related content, e.g. a newsletter sign-up form or related products shown in
aside
elements? - Are images are in
figure
elements, withfigcaption
titles? - Is there is a
footer
element? - Are footer links are in
nav
elements?
Headings
- The
h1
toh6
prefixes makes it easy to check that the headings are in order. This is important forsearch engine optimisation
as well as accessibility. - Ideally headings should be inside rather than outside their respective
header
,article
,section
,nav
,footer
andaside
elements. - There should only be one instance of
h1
on a page. For most pages of a website this is the page title in themain
element. The homepage is different,h1
is used for the website name in the pageheader
.
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.