Badge Image (click to enlarge) |
Direct Image URL (copy this) |
Best For |
|---|---|---|
Classic blue “Valid HTML5” (most common) |
https://www.w3.org/Icons/valid-html5 |
Standard choice |
Blue version with outline |
https://www.w3.org/Icons/valid-html5-blue |
Slightly larger text |
Small modern badge (64×23 px) |
https://www.w3.org/html/logo/badge/html5-badge-h-semanics.png |
Compact |
Even smaller (64×23 px, different style) |
https://www.w3.org/html/logo/badge/html5-badge-h-semanics-graphics.png |
Tiny spaces |
Tall badge (88×62 px) |
https://www.w3.org/html/logo/badge/html5-badge-h-css3-semantics.png |
When you also want to hint at CSS3 |
Green “HTML5 Powered” shield |
https://www.w3.org/html/logo/badge/html5-badge-h-aria.png |
Alternative look |
Very small 32×32 icon
|
https://www.w3.org/Icons/valid-html5-32.png |
Footer corners |
16×16 tiny icon |
https://www.w3.org/Icons/valid-html5-16.png |
Micro use |
> <img src="https://www.w3.org/Icons/valid-html5" width="88" height="31" alt="Valid HTML5"> </a> </p> <!-- 2. Small modern badge --> <p style="text-align:center; margin:20px 0;"> <a href="https://validator.w3.org/nu/?uri=referer" target="_blank" rel="noopener"> <img src="https://www.w3.org/html/logo/badge/html5-badge-h-semanics.png" width="64" height="23" alt="Valid HTML5"> </a> </p> <!-- 3. Tiny 32×32 version --> <p style="text-align:center; margin:20px 0;"> <a href="https://validator.w3.org/nu/?uri=referer" target="_blank" rel="noopener">
Pick whichever style matches your page design — they all do exactly the same job.
Just copy, paste, and you’re done!