Using Tags

What is a tag? In HTML, a tag is a way to tell the computer where part of the web page begins and ends. (The tag is the Markup in Hyper Text Markup Language.) A tag is not much different than how you read. When you see a capital letter, you first think it is the beginning of a sentence. This is confirmed when it ends with a period. If several words are capitalize, you realize it may just be a title, such as Hyper Text Markup Language. Within the sentence, words are recognized by their spaces.

The computer is not as smart as you. It is really just a souped up calculator. To make things easier for the computer, tags provide a very explicity way to tell the computer what it should care about. A tag has three parts:

Anatomy of opening tag

  1. A tag starts with a a left angle bracket (or as most of us learned it, the less than sign).
  2. Next is the tag itself. (html is the first tag of all web pages.)
  3. Finally, it is ended with a right angle bracket (aka greater than sign).

This first tag is called the opening tag. It tells the computer where things start. In this case, it tells where the beginning of the web page is. The computer stops looking after it comes to closing tag. The closing tag is as follows:

Anatomy of closing tag

Note the only difference is the forward slash before the tag name. This tells the computer you are done with this.

Web pages use many different tags. Here is a very basic web page:
<html>
<body>
<p>This is a paragraph.</p>
</body>
</html>

Note that new tags start before other tags begin. Also note these new tags also close before the old tags. The way the computer sees it is this:

  • Oh, here is the beginning of a web page (html tag).
  • Now here is the start of the body of the web page (body tag).
  • Okay, now I have a paragraph starting (p tag).
  • Then there is actually some content.
  • Okay, now I am done with that paragrapah (/p tag). Better through in a line after this one is done.
  • I am so done with the body now that I found the closing tag. (/body tag)
  • Finally, I can take a break – the web page is done. (/html)

Whew, this can seem a little overwhelming. The two important things to remember are:

  1. Tags must open and close.*
  2. A tags cannot overlap. Tags are inside. In other words, the body tag inside the html tag must be closed (/body tag) before the html tag is closed (/html).

(*Okay, I hate to be the one to break it to you but there are a few tags that do not need to be closed. The most common are <br> and <img>. But this is the exception.)