The Apocalyptic HTML Arsenal
The Apocalyptic HTML Arsenal: An Undead Institute HTML Reference Dictionary
Content Warning (for Silliness)
Four Word
Zombies weapons un-kill things?
Get a Free Zombie HTML Cheat Sheet
Elements and Global Attributes Alphabetical by Name
Alphabetical by Tag Name
Alphabetical by Global Attribute
Abbreviation
Accesskey Attribute
Address
Anchor
Area
Article
Aside
Audio
Autocapitalization Attribute
Base URL
Bidirectional Isolate Element
Bidirectional Text Override
Block Quote
Body
Break
Button—Generic
Button—Reset
Button—Submit
Canvas
Citation
Class Attribute
Contenteditable Attribute
Data
Datalist
Dataset Attributes
Definition
Delete
Deprecated/Obsolete/Zombie Elements
Description Details
Description List
Description Term
Details
Dialog Box
Direction Attribute
Division
Doctype
Draggable Attribute
Embed
Emphasis/Italics
Fieldset
Figure
Figure Caption
Footer
Form
Head
Header
Heading
Heading Group
Hidden Attribute
Horizontal Rule
HTML Comment
HTML Element
HTML Symbols and Entities
Identity Attribute
Image
Inline Frame
Inputmode Attribute
Input—Button
Input—Checkbox
Input—Color
Input—Date
Input—E-mail
Input—File
Input—Hidden
Input—Image
Input—Local Time
Input—Month
Input—Number
Input—Password
Input—Radio
Input—Range
Input—Reset
Input—Search
Input—Submit Button
Input—Telephone Number
Input—Text
Input—Time
Input—URL
Input—Week
Insert
Is Attribute
Item ID Attribute
Item Property Attribute
Item Reference Attribute
Item Scope Attribute
Item Type Attribute
Keyboard Input
Label
Language Attribute
Legend
Link
List item
Main
Map
Mark/Highlight
Math
Meta Information
Meter
Navigation
No Script
Object
Object Parameter
Option Group
Option
Ordered List
Output
Paragraph
Part Attribute
Picture
Preformatted
Progress
Quotation
Ruby Annotation
Ruby Fallback Parenthesis
Ruby Text
Sample Output
Scalable Vector Graphics
Script
Section
Select
Slot
Slot Attribute
Small
Source
Span
Spellcheck Attribute
Strikethrough
Strong/Bold
Style
Style Attribute
Subscript
Summary
Superscript
Tabindex Attribute
Table
Table Body
Table Caption
Table Column
Table Column Group
Table Column/Row Header
Table Data/Table Cell
Table Footer
Table Head
Table Row
Template
Text Area
Time
Timed Text Track
Title
Title Attribute
Underline
Unordered List
Variable
Video
Word Break

A

  • Abbreviation
  • Accesskey Attribute
  • Address
  • Anchor
  • Area
  • Article
  • Aside
  • Audio
  • Autocapitalization Attribute

Abbreviation

Opening Tag: <abbr>

Closing Tag: </abbr>

Flow Type: inline

Description: Marks up abbreviations such as Zom. for Zombiecalifragilisticexpialidociousor or Z.O.M.-B. (Zombies Ostriches Monkeys—Braaains!). Zombies don’t know what acronyms are.

Important Attributes:

title: Used to show what the abbreviation stands for when you hover over it with the mouse. Does not work on touch screens, and since the abbr element does not change the formatting, it may be hard for a user to know when the tag has been used. That said, it’s still helpful to include it.

Related Tags: Definition

Example:

Code snippet

The <abbr title="Zombies Ostriches Monkeys—Braaains!">Z.O.M.-B.</abbr>s are attacking...again.

Accesskey Attribute

Attribute: accesskey

Description: Sets a hot key for quick access to the field/link/focusable content. It’s kind of like strapping your favorite zombie-smashing weapon to your thigh—easy access to a specific field.

Attribute Values:

*keyboard key*
A keyboard key, typically a letter, that is combined with a modifier key (such as CTRL or ALT) to form a shortcut key code to bring focus to the interactive element. The exact key combination depends on your browser and platform.

Example:

Code snippet

<label>Zombie Name: <input accesskey="z" type="text"></label>

Address

Opening Tag: <address>

Closing Tag: </address>

Flow Type: block

Description: Displays name and contact information for a person, people, organization, or remaining human colony. It doesn’t need to be a physical address but can include email, URL, phone number, polar coordinates, treasure map–style pacing directions, or proximity to known apocalyptic catastrophe.

Example:

Code snippet

<address>At the crater that used to be New Jersey, make a left and head southwest until you reach that only remaining tree within a hundred miles. Take twelve paces north and fifteen paces east, and you’ll be standing on the underground refuge known as Zombie Haven.</address>

Anchor

Opening Tag: <a>

Closing Tag: </a>

Flow Type: inline

Description: Links one HTML page to another like the carrier pigeons that have replaced long-distance communications between human strongholds.

Important Attributes:

href: The location/URL to link to.

Example:

Code snippet

<a href="https://undyinglove.org">the best zombie dating site</a>

Area

Opening Tag: <area>

Closing Tag: </area>

Flow Type: block

Description: Used with the map element, it defines the exact clickable area of an image—kind of like choosing the detonation zone around a zombie nest. 

Important Attributes:

shape: The shape of the clickable area: rect for rectangle or poly for polygon. coords: The coordinates that specify where the clickable area is on the image. href: Where the clickable region takes you. alt: The alternative text for the clickable area.

Related Tags: Map

Example:

Code snippet

<img src=“https://undead.institute/html/zombie.png" usemap=“#zombie”><map name=“zombie”><area alt="Right Eye" title="Right Eye" href="https://undead.institute" coords="111,67,61,118" shape="rect"><area alt="Left Eye" title="Left Eye" href="https://undead.institute" coords="128,66,184,118" shape="rect"></map>

Article

Opening Tag: <article>

Closing Tag: </article>

Flow Type: block

Description: Denotes content that could stand on its own, such as a blog post or a zombie with both legs.

Example:

Code snippet

<article><h2>The Posture and Standing Preferences of Two-Legged Zombies</h2><p>Though zombies with two legs are becoming increasingly rare, many of them head for the dance floor to do their signature dance move: the Zombie Shuffle-Shuffle…</p></article>

Aside

Opening Tag: <aside>

Closing Tag: </aside>

Flow Type: block

Description: Holds content that is related to the page but is tangential, such as a sidebar. It’s much like the relationship between Human Resistance Army and the UCC (United Clown Corp). Both fight zombies, but the UCC specializes in face paint, big shoes, and clown websites.

Example:

Code snippet

<main>**info about the Human Resistance Army’s recent deployment**</main><aside>**info about the UCC’s recent move to fight zombies at circuses, rodeos, and birthday parties**</aside>

Audio

Opening Tag: <audio>

Closing Tag: </audio>

Flow Type: block

Description: Adds audio to a web page and lets zombie moans be heard even in places where they haven’t arrived yet. Works with the source tag.

Important Attributes:

controls: You must add this attribute or nothing will display on the screen (unless you build JavaScript controls).

Related Tags: Source

Example:

Code snippet

<audio controls><source src="https://undead.institute/files/html/braaains.ogg" type="audio/ogg"><source src="https://undead.institute/files/html/braaains.m4a" type="audio/mp4"><source src="https://undead.institute/files/html/braaains.mp3" type="audio/mpeg"><a href="https://undead.institute/files/html/braaains.mp3">Listen to the zombies</a></audio>

Autocapitalization Attribute

Attribute: autocapitalize

Description: Denotes how content is capitalized as it’s entered by the user. This may help Professor Blusterhiny’s transcriptionist, as most zombie moans seem to need auto capitalization.

Note:

This attribute won’t work for a physical keyboard. It’s for use with mobile/touch-based keyboards.

Attribute Values:

off or none
No capitalization.
on or sentence
Capitalizes the first letter of each sentence.
words
Capitalizes the first letter of each word
characters
Capitalizes all letters.

Example:

Code snippet

<h3>Transcribe the zombie's statements below</h3><div contenteditable="true" autocapitalize="on">When you enter text, it will auto capitalize sentences. Auto capitalize is on.</div><div contenteditable="true" autocapitalize="words">When You Enter Text, It Capitalizes Each Word.</div><div contenteditable="true" autocapitalize="characters">WHEN YOU ENTER TEXT, IT YELLS AT YOU…ERRR…CAPITALIZES ALL LETTERS.</div>

Community Questions