The Apocalyptic HTML Arsenal
Close
    • 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:

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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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