HTML: A Zombified Definition
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.
Like my grandmother used to say, "The only way to stop a horde of people shuffling through life, moaning about inconsequential problems, and trying to infect you with their apathy is a well placed cane to the kneecaps. Well... that and ideas." Websites are a bundle of code and images and interactivity. What better way is there to communicate ideas?
HTML: A Zombified Definition
Without a skeleton even the best human-resistance fighter would be a puddle of color and wasted life, and so would your web page. Hypertext Markup Language (HTML) is that skeleton. It provides the structure for your web page. It builds the relationship between the parts of your page and allows you to identify and categorize the pieces of content on your page.
HTML provides this structure through tags. Dog tags identify a particular soldier in the resistance. Toe tags designate a dead body or, more likely, a future zombie. HTML tags identify a type or format of content such as a paragraph, heading, bolded text, list, and so on.
Note:
There are two words used in this book and throughout web development for a unit of HTML: "tag" and "element". Tags specifically means the opening and/or closing piece of an HTML element. Whereas an element includes the opening tag, any attributes set on the opening tag, the content between the opening and closing tags, and the closing tag itself. While these terms are not interchangeable, being so closely related, they are often used interchangeably or seemingly interchangeably. For instance, when speaking about what an HTML paragraph does, the difference between the tag and element is unimportant and could even be called splitting hairs, however, when looking at them in a document they designate different things and shouldn't be conflated.
Let's look deeper at the four pieces of an HTML element:
- Opening Tag
- Attributes
- Content
- Closing Tag
Opening Tag
The opening tag uses angle brackets (the “less than” and “greater than” signs) to designate the beginning and end of the tag.
<
>
A paragraph opening tag looks like: <p>
Attributes
Attributes appear between the name of the opening tag and its closing angle bracket. They are most often used to provide additional information, identification, or options—and to beat the snot out of zombies.
The class attribute helps define a “class,” or group, of elements that have something in common. (They need not be the same type of element.) An opening p tag with a class attribute looks like:
<p class="learning">Content
The content is whatever appears between the opening and closing tags. Generally this is text and/or other elements.
Some elements have limitations on what elements can be inside them, depending on the element, its job, and whether it's been tainted by the zombie contagion.
Closing Tag
Closing tags look like opening tags, except they have a forward slash (/) in front of their names. For example, the closing paragraph tag looks like: </p>.
Some tags, notably img (and a few more), are called void tags and do not have closing tags. This is usually because the content of the tag resides in the opening tag itself or, as with img, in attributes.
Paragraph tag example:
<p class="learning">This paragraph tastes like braaains.</p>and would look like: (the background color has been added to more clearly show how the browser would render the HTML)
This paragraph tastes like braaains.
Night of the living tip:
HTML5 was a major release for the HTML language. It was initially released in October 2014. It brought a wide variety of new functionality and smoother syntax to HTML. HTML4, the previous major standard, was released in April of 1998 and had only minor revisions during those 16 years. The current release is the HTML Living Standard.
Sometimes you might want to emphasize some text within a paragraph. You can use the <em> tag to do this. It will show as italics in a browser.
<p>Don’t forget: Zombies are <em>not</em> cuddly-wuddly</p>Don’t forget: Zombies are not cuddly-wuddly
The <i> tag does the same thing as the <em> tag. As of HTML5, they can be used interchangeably.
<p>Nor are they good dance partners. Rigor-mortise <i>really</i> affects your flexibility.</p>Nor are they good dance partners. Rigor-mortise really affects your flexibility.
Beyond italics, you may also want to bold some content to make it stand out strongly. You can use the <strong> tag for this.
<p>"Look out! There’s <strong>a zombie on your head!</strong>"</p>"Look out! There’s a zombie on your head!"
The <b> tag also works for this.
<p>"Oh, never mind, man. That was just your haircut…<b>Don’t hurt me!</b>"</p>"Oh, never mind, man. That was just your haircut… Don’t hurt me!
Try it Out:
Take a moment to play with these tags to make sure you understand how they work.
I've provided two options throughout the book. Both the CodePen and HTML demos are the same, they just give you two ways to access and play with the code. CodePen allows you to edit/play with the tags in your browser while the HTML demo is a file you will need to open in a text editor to edit and then load into your browser.
CodePen demo:
Download an HTML file to play with it on your own (once you've opened the link in your browser use "Save as" to save the HTML file to your computer): https://undead.institute/files/html/001-paragraph-italics-bold-oh-my.html
(Please note: This HTML page includes some additional code to make it more compatible across browsers. For now, just worry about the paragraphs, italics, and bold. I’ll explain the other tags later.)