When I teach HTML, one of the things that students often struggle with is matching opening and closing tags, particularly because there are so many exceptions and weird rules. Plus when you’re first learning or when code is poorly formatted it can be difficult to match up tags within a page worth of code. To help everyone get quick on the draw I’ve created the Post-Apocalyptic HTML Shooting Gallery.
In the first level zombies appear with an opening tag on them. Type in the closing tag to take them out. But don’t take too long, if you do they’ll pull a gun and shoot you!
In level 2 things pick up the pace with zombies appearing faster and shooting quicker.
Level 3 has you matching either the closing tag or the opening tag, so be sure to drop the slash when you don’t need it.
Level 4 expands the zombie repertoire with more opening and closing tags to match
Level 5 ups the ante with by pulling in self closing tags (also known as void tags) where you just need to put in a slash (/) to drop those zombie bad boys (and girls).
Level 6 lets you practice nesting by adding two opening tags you need to properly nest.
In Level 7 you’ll nest by adding either the the two opening tags or the two closing tags.
And in the final level (Level 8) you’ll have to properly nest even when a self closing tag is thrown in.
Oh and all levels are cumulative so you’ll have to be on your guard to match any thing that’s come before.