Anatomy of an HTML Tag
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 and marks up that skeleton using elements.
There are four parts to 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 this:
<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, of course, to beat the snot out of zombies.
The class attribute helps define a “class,” or group, of elements that have something in common. They don’t need to be the same type of element. An opening p tag with a class attribute looks like this:
<p class="learning">Content
The content is whatever appears between the opening and closing tags. Generally, this is text and/or other elements.
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 is: </p>.
Some tags, notably img (and a few others), 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>So that’s how an HTML element works. Let’s now marshal our post-apocalyptic defenses and look at the bare-bones structure of an HTML page.
Post-apocalyptic Page Structure
The first thing you need in an HTML page is the DOCTYPE tag. This isn’t technically HTML, but It tells the web browser that the document it’s looking at is an HTML document.
<!DOCTYPE html>Next, we have the <html> element. It holds all other HTML elements, like the department-store-turned-settlement holds the last vestiges of humanity in your town. I also recommend adding a language (lang) attribute to your <html> element to make sure the browser and screen readers can be better prepared to assist with translation. For example, English is en.
<html lang="en">Inside the <html> element are two other elements that hold everything else related to your page. <head> holds everything about your page (meta info, links to CSS files, the title that displays on the browser window/tab, etc.) and <body>, which holds everything that’s visible on your page (your content and design).
Putting that all together, like a zombie who’s reclaimed his limbs, we get:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body></body>
</html>While this is technically a web page, it doesn’t show anything in the browser yet. Let’s add some content. We’ll add the p element from earlier:
<!DOCTYPE html>
<html lang=“en”>
<head></head>
<body>
<p class="learning">This paragraph tastes like braaains.</p>
</body>
</html>Night of the Living Tip:
Any element that is completely enclosed by another element is called its child, and the enclosing element is called the parent. In the code above, head and body are both children of HTML, and the HTML element is their parent. The p element is a child of body and a grandchild of HTML.
Save this into the starter file, called index.html. (You can name the file whatever you want, as long as it has an html file extension. “index” is a good choice because it’s the default file name used when a web browser accesses a folder on a server.) If you open it in any web browser, you’ll see the paragraph content displayed.
Now that we’ve got a few zombie weapons under our belt and know how HTML elements typically work, we’re going to start building that first website and help you take out your first post-apocalyptic horde.
To Be Continued in Part 3
