All Achievements
Below is a list of all possible achievements.
Anarchic Style Sheets
Page has 3 or more
<style> elements scattered within the <body>Ascii Art
Page contains an ASCII art HTML
<!-- comment -->Backwards Compatibility
Page contains an
<!--[if IE]>...<![endif]--> commentBigheaded
Page
<head> contains 25 or more elementsBlind Person Hater
Majority of images lack
alt attributes and/or no ARIA attributes appear on the pageBob Ross
Page includes a
<canvas> or <picture> elementBootstrap
Page contains links to Bootstrap CSS or JS
Bullet Hell
Page uses unicode bullet points (• ◆ ★) to create a list instead of using
<ul>Class Warfare
Page includes an element with more than 50 classes
Classy
HTML
class attributes make up more than 10% of the page's sizeHTML
class attributes make up more than 25% of the page's sizeHTML
class attributes make up more than 33% of the page's sizeHTML
class attributes make up more than 50% of the page's sizeCommentator In Chief
Page contains more than 10
<!-- comments -->Cross Platform
Page contains browser-specific CSS, e.g.,
-webkit-, -moz-, -o-, -ms-Data Driven
More than 8 elements on the page have
data- attributesDictionary Enthusiast
Page uses definition elements (
<dfn> or <dl> with <dt> and <dd>)Div Soup
More than 25% of the HTML elements in the page are
<div> elementsMore than 50% of the HTML elements in the page are
<div> elementsMore than 75% of the HTML elements in the page are
<div> elementsMore than 90% of the HTML elements in the page are
<div> elementsDynamic Content
Page uses an
<output> elementEmpty Calories
Page contains 10 or more empty
<div> or <span> elementsFavicon Fanatic
The head has more than 3
<link rel="icon"> elementsSeared Retinas
The primary background color is light when the user prefers dark mode
The primary background color is light when the user prefers dark mode and dark when the user prefers light mode
Form Fanatic
Page has a
<form> containing 5 or more different input typesFramework Phobia
Page contains a custom HTML element and does not use a JS framework
Htmx
Page contains a reference to HTMX
Hydra
Page contains multiple
<h1> elementsHyperlink Collector
Page contains links to at least 5 different external domains
Page contains links to at least 10 different external domains
Page contains links to at least 25 different external domains
Page contains links to at least 50 different external domains
Impa
Page uses the Shadow DOM
Important Person
The phrase
!important appears 10 or more times on the pageLocality Of Appearance
Page has more CSS in
style attributes than class attributesLorem Ipsum
Pagina locutionem "lorem ipsum" continet
Master Of Elements
Page uses at least 17 different HTML elements
Page uses at least 60 different HTML elements
Page uses at least 118 different HTML elements
Page uses every HTML element, even the deprecated ones
Millionth Visitor
Page uses a
<blink> or <marquee> elementOk Boomer
Page uses a deprecated HTML element
Oops All Frameworks
Page uses React, Vue, and Angular simultaneously
Phd Purist
Use the
<math> element for something nontrivialPreemptive Strike
Page includes a
<link rel="preload">, <link rel="dns-prefetch">, or <link rel="preconnect">Progressive
Page contains both a
<progress> and <meter> elementQuirky
Page renders in quirks mode
Regressive Enhancement
Page includes a
<noscript> element with barely anything in itThe Web Is For Documents
No
<script> tags or on attributes appear in the pageNo JavaScript, CSS, or images appear in the page
Page is entirely plaintext - no CSS, JavaScript, or HTML elements
Self Love
Page contains an
<a href="#"> elementSemantics
Page uses each of the following elements:
<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>Fulfill the criteria for Semantic Snob and also do not use a single
<div> or <span>Seo Sleazeball
Page includes Open Graph, Twitter Card, and description
<meta> tagsSlot Machine
Page uses three
<slot> elements in a row in a <template>Small Data
Page uses JSON-LD or Microdata
Soap Box
Page contains an HTML
<!-- comment --> with more than 100 wordsTest In Prod
Page contains
console.log statementsTodo
Page contains the phrase
TODOPage contains the phrase
TODO at least 3 timesPage contains the phrase
TODO a dozen or more timesToo Meta
Page
<head> includes 8+ <meta> elementsTower Of Babel
Page contains at least 2
lang attributes with different valuesTree Shenanigans
The page body contains a descendant chain of at least 8 elements where each parent has only one child
Average depth of all elements inside
<body> is 3 or lessSemistatic Types
At least one text input (or textarea) has
spellcheck="true"Page uses a
<datalist> elementVintage
Page uses a nested table layout
Void Elements
All void elements include a trailing slash (
<img />)Some void elements include a trailing slash (
<img />) and some do not (<img>)No void elements include a trailing slash (
<img>)We Do Things A Little Different
Nest a
<div> inside a <span>The Good Old Days
Page is authored in HTML 3.2
Embed
Page embeds external content via
<object>, <embed>, or <iframe>Youtube Junkie
Page embeds 3 or more YouTube videos
Zalgo
Page contains Zalgo text (corrupted Unicode with combining characters)