A fully playable Hangman game, built entirely in HTML and CSS. Six letters. Twenty-six keys. Six wrong guesses before it's over. You know how this works—but do you know the word?
This work uses custom HTML and CSS formatting. For the intended experience, please enable Creator's Style (or ensure workskins are turned on in your AO3 preferences). The letter tiles, word display, and hangman figure are all part of the work itself.
This work is interactive — it's not a fic you read passively, it's a game you play. It's built entirely out of HTML disclosure elements, with no JavaScript whatsoever. That means:
• It works in any browser, on desktop or mobile
• Your progress isn't saved — refreshing the page resets everything
• Click a letter to guess it. Correct guesses reveal their position in the word. Wrong guesses add a body part to the figure.
• Once a letter is clicked it can't be unclicked, so choose carefully
• Six wrong guesses and it's game overThe word is Fatui-related. That's your only hint.
Good luck.
(See the end of the work for more notes.)
| +---+ |
| | | |
| | O |
| | /|\ |
| | / \ |
| | |
| ------- |
C_H_I_L_D_E_
Wrong: A B F G J K M N O P Q R S T U V W X Y Z
★ YOU WIN! The word was CHILDE. ★
✕ GAME OVER. The word was CHILDE. ✕
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
This word was requested by a reader! If you have a word, phrase, or line you'd like to see as a Hangman game, leave it in the comments! Fandom terms, character names, iconic quotes, etc — anything goes, as long as I can make it work.
If you're curious how this works: HTML has a native element called details, which toggles open and closed when you click it. That's the only "interactivity" in this entire game. The trick is CSS :has(), a selector that lets a parent element react to the state of its children. So when you click a letter, its details opens, and CSS detects .hg:has(.gl-k[open]) and uses that to reveal the letter in the word display, update the wrong guesses list, draw the next part of the hangman figure, and check for a win or loss.
The figure itself is built from span elements set to visibility:hidden by default. Each wrong guess reveals the next body part. The "can't click a used letter" effect works by hiding the details element once it's open (but keeping it in the DOM so its state is preserved), and showing a plain greyed-out span in its place. The game-over lock is a transparent absolutely-positioned div that covers the keyboard the moment the win or lose condition is met.
I'll be posting a new Hangman game weekly OR biweekly — after the first few, the template is solid enough that a new game only takes around 15 minutes to create.
---
If this moved you, even a little, please consider leaving a kudos or some feedback. I’ve poured a lot of time, love, and late-night tinkering into this. It's part of a new fixation, and I would love to hear everyone's thoughts.
Lately, I’ve realized: I have free will. Which means I’ve been joyfully and chaotically experimenting with HTML formatting and custom workskins.
Please stay tuned for the next HTML piece! I will post/update something in this series weekly OR biweekly; if you want to stay updated on this HTML series, please consider subscribing or bookmarking.
You can find me on Bluesky ( @the_wild_poet25 ) and on Twitter (the_tamed_poet) if you want to connect. I'm also on Discord too!
The comment section also works—feel free to leave a comment! :)
ForkNKnives, Az3ki, mastersp4rk, Average_reader6999, That_0ne_Weird_A1ien, pinklesbianyurijesuselysia, Fault_Never_In_Our_Stars, lordenymon, AZbuLg, SalsaBabosa, Lariel, HobbitInJeans, AutisticFrog09, lovedbyajester, giyeah, Willows_Wispss, Why_are_you_asking, MovivoOO, 71013711, siennamoureux, Smillie, queer_drunk_dwarf, fightingwithmyshadow, sungie_soongie_sweetie, pixelatedtears, ragjleu, directiorican, GumbaBunny, n3ptune31, nekotaliaa, Neverevennoticed, evrlarcq, Issa_bot, oceanicegg, elnayava, 0_Head_Archivist_0, Heleonora, foRon, barbatostoes, Nande_chan, DarkLuminosity, Voidal_Abyss, Ghosts_Long_Past, 48bees, ByyTheCryer, asteraceaefaerie, AnonWrites, NeoThread, disasteria, K1ller_HarleQuinn, and 9 more users as well as 6 guests left kudos on this work!