An HTML choice story is a set of scenes connected by links. Each scene gives the reader information and a decision. The link moves them to the scene that shows the consequence. You can build a complete small story in one file and open it in a browser.
Start with the included The Last Tape HTML starter. It is a short, spooky example with several routes and endings. Download the file, open it in a browser, then open another copy in a plain-text or code editor to make it yours.
Our Broadcasts From The Void offers a terminal-style route into horror. The starter is a separate teaching example.
Write the story map first
Use the golden-path writing guide to plan one satisfying complete route before adding alternatives. Write scene names on cards and draw the links.
For The Last Tape, the main route is start → listen → door → leave. In a closed radio shop, the reader hears a warning and decides how to respond. Another route pockets the tape before reaching the same door; that earlier action changes the ending.
Keep a scene list beside the file. It stops a renamed destination becoming a door into nothing.
Find the three parts of each scene
In the starter, each scene lives inside a section. Its ID is the address other choices use. A heading names the scene. Paragraphs supply the story. Links supply the choices.
This small example shows the shape:
<section class="scene" id="start" aria-labelledby="start-title">
<h2 id="start-title" tabindex="-1">The closed shop</h2>
<p>The cassette deck clicks after the shop has closed.</p>
<p><a href="#listen" data-choice data-heard-warning="true">Listen for the message</a></p>
<p><a href="#eject" data-choice data-took-tape="true">Eject and pocket the tape</a></p>
</section>The first choice needs a section with the ID “listen”. The second needs “eject”. Use unique IDs without spaces. Keep each heading's label matched to its section.
Change words before changing behaviour
Make a working copy. Replace a scene's heading and prose, save it and refresh the browser. Then change a choice's wording while leaving its destination alone.
The data-choice attribute marks a story link for the script. The other data attributes record the warning or the taken tape. Keep those attributes while editing the wording.
Once those changes work, add a new scene by copying an existing section. Give it a new ID and heading ID, then point a choice towards it.
The starter includes a small script that shows the selected scene and moves focus to its heading. Browser Back returns to earlier choices. Without the script, the full text and ordinary links remain readable.
You can write a complete short story without changing that script.
Make the choices honest
A useful choice describes an action or intention. “Check the handwriting” gives the reader something to pursue. “Option two” hides the decision.
Match the result to the promise. If the reader deliberately leaves an object alone, do not immediately describe them opening it unless the story explains the loss of control. Consequences can surprise while still acknowledging what was chosen.
The starter also keeps two small state flags: whether the warning was heard and whether the tape was taken. Those flags let the shared door scene lead to an ending that remembers the route. Begin by editing the prose; change the state rules only after you can explain them.
Test every route
Keep a simple checklist with scene ID, incoming link, outgoing links and ending status. Follow each link and use Back. Reload a scene directly using its hash address. Test keyboard navigation and a narrow phone screen.
Ask another reader what they expected from each choice. If the wording promised something different, revise the words or the destination.
Remove sample author notes you do not want visitors to see, replace the title and description, and test the final file again.
Put it online
The file can be served by a static website host. For your own site, give the story a stable address and link to it from a page readers already use. Keep a backup of the editable source.
When sharing a download, explain that readers can save the file for editing. When sharing the playable version, give them the direct page link.
Finish a short story with working doors and deliberate endings. You can add the labyrinth after you know where the first corridor goes.
