An HTML5 highlighter.
A CSS file which highlights the HTML5 semantic elements in your web page. See it in action.
Add the CSS file to your website and link to it in your HTML <HEAD> element as you would any other. For best results, link to h5h after all other stylesheet links or inline styling.
-
h5h-n.css - normalising version (recommended)
<link rel="stylesheet" href="css/h5h-n.css" />
-
h5h.css - bare-bones version
<link rel="stylesheet" href="css/h5h.css" />
For convenience, the normalising version of h5h includes Nicolas Gallagher's excellent Normalize.css which normalises all previously applied styles to give you a simple, un-styled view of your HTML5 semantic elements. If you prefer to manage previously applied styling yourself, use the bare-bones version.
A good way to use h5h is to keep a link to it in your HTML at all times, but commented out. Un-comment the link when you want to check your HTML5 semantics.
It's also possible to apply h5h to a live web page, using your browser and one of the many browser extensions that allow tampering with CSS.
For example, using Chris Pederick's excellent Web Developer extension, under "CSS", click "Disable All Styles", then click "Edit CSS" and then in of the tabs in the "Edit CSS" frame which appears at the bottom of the page, paste in the contents of the normalising version of h5h.
This is how the HTML5 Doctor home page looks when styled with h5h:
| Element | Highlighted? |
|---|---|
<article> |
yes |
<aside> |
yes |
<details> |
no |
<figcaption> |
no |
<figure> |
no |
<footer> |
yes |
<header> |
yes |
<main> |
yes |
<mark> |
no |
<nav> |
yes |
<section> |
yes |
<summary> |
no |
<time> |
no |
Appropriate support for the remaining elements will be added in future versions. (Hint: pull requests are welcome.) 😉
In addition, h5h highlights the <h1> to <h6> elements as an aid to judging how your page stands up to the theory vs. the reality of HTML5 outlining.
h5h also restricts the size of <p> and <img> elements to prevent them over-interfering with the semantic view.
Highlighter by Creative Stall from the Noun Project.