So many HTML books are boring, dry, and great for the insomniac. Plus you barely get to kill zombies! Not so here. You’ll take zombies out left and right as you learn how HTML works and put it into  action. There’s also code practice, fun, and analogies that help the concepts stick.

A Beginner's Guide to Learning HTML5

Preface

You’ve seen zombies on TV and the Internet before, but I bet you also saw people hitting them with baseball bats or using shotguns. I’m here to tell you, the only real way to kill zombies is with websites. Crazy, you wonder? Yes. Crazy true.

HTML: A Zombified Definition

How to Identify Zombie Code

Just as the human-resistance fighters have an arbitrary leadership hierarchy based on former jobs, military service, and the whims of a broken populace, so does HTML.

Zombie Headings Will Roll

Beyond the paragraph and heading, one of the most common structures you'll see is the list. There are two main types of lists, ordered and unordered.

Listing the Undead

The final type of HTML list is called the description list. (Prior to HTML5, it was called the definition list. The tags themselves didn't change; HTML5 just took a broader view of the same data structure.)

Descriptively Defining the Undead List

How many arms does the zombie have? How yellow are its teeth? Was it an initial infectant, or was it bitten? How stunningly was it dressed when it became a zombie? Knowing this information could save your life in a zombie encounter.

Deadly Attributes

The average person clicks on 32,745 links per day. I made that statistic up, but I'm sure I’m close. When you click on a link within a web page, it takes you to another web page or file. The , or anchor tag (which is often referred to as the link tag, even though there’s an actual  tag—we’ll look at this later) performs this task with the help of the href attribute.

Connecting Zombies

Zombies are like us. Sometimes they just want to imprison the spirit of a cat and post it online for their friends to see. Both you and zombies can do this with the  tag. The image tag is a self-closing or void tag, meaning it has no closing tag.

A Picture Is Worth a Thousand Moans

With the advent of HTML5, we no longer need an external program to play audio/visual files in the browser. All we need is the audio and video tags.

Audio/Visual Domination

When a browser displays (or renders) a page, it uses what's called a page flow or document flow to lay out the HTML on the page. Generally this is very simple: one item after another, one shuffled step after another on the way to the end. Any tags that are next to each other ( siblings ) will be displayed one after the other. Any tags ( children ) that are within other tags ( parents ) will be displayed within that tag.

Shuffling Your Way through a Document

Just as you'd have several experienced military officers leading the human resistance, there are several block-level tags that help lead a page:

Structural Zombies

Now that you have an idea of how to markup/use tags on the content of a page, we need to discuss four important tags that can help you build an actual web page: , , , and .

Going Beyond Content

Braaains shouldn't go anywhere besides in a human head (unless you're a zombie, and then there's another place you'd like them to go). Similarly, there are special tags that should only go within the head tag:

Use Your Head

Sometimes zombies just want to discuss braaains, but any mention of the word will make all the other zombies agitated and hungry, so we need to use code or a symbol for “braaains." We haven't solved that zombie problem yet, but we can solve a similar HTML problem.

Symbolizing Braaains

Sometimes a baseball bat just isn’t enough. Sometimes you need to take a whole table to the zombie’s face.

Taking a Table to the Face

Sometimes you’ll want a cell to span across more than one column. This could be to give a heading to the table as a whole or to spread a heading across more than one column. To do this, use the colspan attribute with the number of columns you want the cell to span.

Merge and Flow with the Horde

Reading about this will mean jack-diddly when you're face to face with a halitosis-laden horde of hungry zombies. So while you're waiting to be eaten, it's a good time to practice your HTML.

Assembling the Undead Monster

Congratulations, you’ve passed the first skill needed in your quest to be the ultimate zombie killer, a web developer. You’ve got HTML tags flying from your hands like knives of zombie death. Your sites are glorious in their black and white splendor, but we can do so much more to kick zombies in the throat. In the next book, Beginner CSS: Like Putting Lipstick on a Zombie , we’ll look at Cascading Style Sheets (CSS) and how they can up your apocalyptic game. (Stay tuned after the appendices for a sneak peak)

Not the End

Resources

Glossary

John is a storyteller with design and development skills. He teaches web development at the college level and has spoken at many national conferences. He's been published in professional web development publications such as Smashing Magazine, CSS Tricks and more. He counts his words carefully at https://8wordstories.com and helps you kill zombies while learning web development https://undead.institute ).

About the Author

You can be forgiven for not knowing this. The news and movies and media tell you that shotguns and baseball bats are the way to kill zombies, but that's not true. Violence and gore sell films, but websites are the path to infinite knowledge and having the world at your fingertips. That's how you fight zombies.

Community Questions