See how your favourite web pages are made
Get the toolbar button that shows:
- HTML 5 content sections highlighted in green
- Headings prefixed with
divwrappers highlighted in red
Install from the Chrome store
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
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.
- Is there a
- Are navigation links in
- Is there is a
navelement inside the page
- Is the main content in a
- Does the page have breadcrumbs and are they in a
- Is the main content organised in
- Is related content, e.g. a newsletter sign-up form or related products shown in
- Are images are in
- Is there is a
- Are footer links are in
h6prefixes makes it easy to check that the headings are in order. This is important for
search engine optimisationas well as accessibility.
- Ideally headings should be inside rather than outside their respective
- There should only be one instance of
h1on a page. For most pages of a website this is the page title in the
mainelement. The homepage is different,
h1is used for the website name in the page
- Is the page made entirely from
divelements with no new HTML 5 elements?
- Can some of the
divelements be changed to accessible HTML 5 elements?
- Can the remaining
divelements be removed, with CSS Grid layout used instead?
spanelements be removed to be replaced with CSS pseudo-elements?
Complementary document outline extension
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
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.