Tags and Elements
If you look at the first and last lines of the code for the last example, you will see pairs of angle brackets
containing the letters <html>. The two brackets and all of the characters between them are known as a
tag, and there are lots of tags in the example. All of the tags in this example come in pairs; there are
opening tags and closing tags. The closing tag is always slightly different than the opening tag in that it has
a forward slash character before the characters </html>.
A pair of tags and the content it includes is known as an element. In Figure 1-3 you can see the heading for
the page of the last example.
Figure 1-3
Again, the tags in Figure 1-3 come in pairs. I mentioned earlier in the chapter that markup adds meaning
to a document, and in HTML it is the tags that are the markup. The special meaning these tags give is a
description of the structure of the document. The opening tag says “This is the beginning of a heading”
and the closing tag says “This is the end of a heading.”Without the markup, the words in the middle
would just be another bit of text; it would not be clear that they formed the heading.
Now look at the paragraph of text about the company; it is held between an opening <p> tag and a
closing </p> tag. And, you guessed it, the p stands for paragraph.
Because this basic concept is so important to understand, I think it bears repeating:
tags are the letters and numbers between the angle brackets, whereas elements are
tags and anything between the opening and closing tags.
As you can see, the markup in this example actually describes what you will find between the tags, and
the added meaning the tags give is describing the structure of the document. For example, between the
opening <p> and closing </p> tags are paragraphs and between the <h1> and </h1> tags is a heading.
Indeed, the whole HTML document is contained between opening <html> and closing </html> tags.
If you were wondering why there is a number 1 after the h , it is because in HTML and XHTML there are
six levels of headings. A level 1 heading is sometimes used as the main heading for a document (such as a
chapter title), which can then contain subheadings, with level 6 being the smallest. This allows you to
structure your document appropriately with subheadings under the main heading. (You look at this in
detail in the next chapter.)
You will often find that terms from a family tree are used to describe the relationships between elements.
For example, an element that contains another element is known as the parent, while the element that is
between the parent element’s opening and closing tags is called a child of that element. So, the <title>
element is a child of the <head> element, the <head> element is the parent of the <title> element, and
so on. Furthermore, the <title> element can be thought of as a grandchild of the <html> element.
Separating Heads from Bodies
Whenever you write a Web page in HTML, the whole of the page is contained between the opening
<html> and closing </html> tags, just as it was in the last example. Inside the <html> element, there
are two main parts to the page:
❑ The <head> element: Often referred to as the head of the page, this contains information about
the page (this is not the main content of the page). It is information such as a title and a
description of the page, or keywords that search engines can use to index the page. It consists of
the opening <head> tag, the closing </head> tag, and everything in between.
❑ The <body> element: Often referred to as the body of the page, this contains the information
you actually see in the main browser window. It consists of the opening <body> tag, closing
</body> tag, and everything in between.
Inside the <head> element of the first example page you can see a <title> element:
<head>
<title>Acme Toy Company: About Us</title>
</head>
Between the opening and closing title tags are the words Acme Toy Company: About Us, which is the
title of this Web page. If you remember Figure 1-2, which showed the screenshot of this page, I brought
your attention to the words right at the top of the browser in the center. This is where Internet Explorer
(IE) displays the title of a document; it is also the name IE uses when you save a page in your favorites.
The real content of your page is held in the <body> element, which is what you want users to read, and is
shown in the main browser window.
The head element contains information about the document, which is not displayed
within the main page itself. The body element holds the actual content of the page
that is viewed in your browser.
