All Achievements
Below is a list of all possible achievements.
Classy
HTML
class attributes make up more than 10% of the page's size
HTML
class attributes make up more than 25% of the page's size
HTML
class attributes make up more than one third of the page's size
HTML
class attributes make up more than 50% of the page's size
Hyperlink 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
Div Soup
More than 25% of the HTML elements in the page are
<div> elements
More than 50% of the HTML elements in the page are
<div> elements
More than 75% of the HTML elements in the page are
<div> elements
More than 90% of the HTML elements in the page are
<div> elements
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
The Web Is For Documents
No
<script> tags or on attributes appear in the page
No JavaScript, CSS, or images appear in the page
Page is entirely plaintext - no CSS, JavaScript, or HTML elements
Todo
Page contains the phrase
TODO
Page contains the phrase
TODO at least 3 times
Page contains the phrase
TODO a dozen or more times
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>)
Semantics
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>
Semistatic Types
At least one text input (or textarea) has
spellcheck="true"
Page uses a
<datalist> element
Tree 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 less
Seared 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
Favicon Fanatic
The head has more than 3
<link rel="icon"> elements
Bullet Hell
Page uses unicode bullet points (• ◆ ★) to create a list instead of using
<ul>
Form Fanatic
Page has a
<form> containing 5 or more different input types
Quirky
Page renders in quirks mode
Seo Sleazeball
Page includes Open Graph, Twitter Card, and description
<meta> tags
Cross Platform
Page contains browser-specific CSS, e.g.,
-webkit-, -moz-, -o-, -ms-
Empty Calories
Page contains 10 or more empty
<div> or <span> elements
Test In Prod
Page contains
console.log statements
Embed
Page embeds external content via
<object>, <embed>, or <iframe>
Bigheaded
Page
<head> contains 25 or more elements
Oops All Frameworks
Page uses React, Vue, and Angular simultaneously
Blind Person Hater
Majority of images lack
alt attributes and/or no ARIA attributes appear on the page
Zalgo
Page contains Zalgo text (corrupted Unicode with combining characters)
Hydra
Page contains multiple
<h1> elements
Self Love
Page contains an
<a href="#"> element
The Good Old Days
Page is authored in HTML 3.2
Vintage
Page uses a nested table layout
Data Driven
More than 8 elements on the page have
data- attributes
Youtube Junkie
Page embeds 3 or more YouTube videos
Important Person
The phrase
!important appears 10 or more times on the page
We Do Things A Little Different
Nest a
<div> inside a <span>
Regressive Enhancement
Page includes a
<noscript> element with barely anything in it
Millionth Visitor
Page uses a
<blink> or <marquee> element
Htmx
Page contains a reference to HTMX
Tower Of Babel
Page contains at least 2
lang attributes with different values
Lorem Ipsum
Pagina locutionem "lorem ipsum" continet
Phd Purist
Use the
<math> element for something nontrivial
Class Warfare
Page includes an element with more than 50 classes
Bob Ross
Page includes a
<canvas> or <picture> element
Commentator In Chief
Page contains more than 10
<!-- comments -->
Preemptive Strike
Page includes a
<link rel="preload">, <link rel="dns-prefetch">, or <link rel="preconnect">
Bootstrap
Page contains links to Bootstrap CSS or JS
Locality Of Appearance
Page has more CSS in
style attributes than class attributes
Too Meta
Page
<head> includes 8+ <meta> elements
Impa
Page uses the Shadow DOM
Soap Box
Page contains an HTML
<!-- comment --> with more than 100 words
Small Data
Page uses
JSON-LD or Microdata
Ascii Art
Page contains an ASCII art HTML
<!-- comment -->
Progressive
Page contains both a
<progress> and <meter> element
Dynamic Content
Page uses an
<output> element
Ok Boomer
Page uses a deprecated HTML element
Dictionary Enthusiast
Page uses definition elements (
<dfn> or <dl> with <dt> and <dd>)
Anarchic Style Sheets
Page has 3 or more
<style> elements scattered within the <body>
Backwards Compatibility
Page contains an
<!--[if IE]>...<![endif]--> comment
Slot Machine
Page uses three
<slot> elements in a row in a <template>
Framework Phobia
Page contains a custom HTML element and does not use a JS framework