HTML

Page Tags

Help Center → HTML → Page Tags

Now that we understand the Basics of HTML Syntax, it’s time to start learning the HTML tags we need to build a Web site.

Motivation and Syntax

Before we add images and links and all such manner of content, we need to add some document information. This information tells the web browser that we’re using HTML, the title of the web page, and where the content starts and stops.

We’re in luck because we don’t need to know anything else about HTML syntax to use these tags — we just have to know what the tags are and what they mean.

One Tag to Rule Them All

The first tag that surrounds all the other tags in any HTML document is the <html> tag. No HTML tags are allowed to be outside the <html> tag. You will sometimes see something called a DOCTYPE outside of the <html> tag, but it’s not officially an HTML tag at all — it’s an XML tag.

The Head

The <head> tag sits directly inside of the <html> tag. The <head> tag contains no Web content! Rather, the <head> tag contains “meta” information — information about your information.

A whole manner of things goes inside the <head> tag, but they’re almost entirely limited to CSS and JavaScript. Until we get to those subjects, the only thing you should put inside the <head> tag is the <title> tag.

The <title> tag denotes the title of the document. It is visible in the browser’s title bar:

Screenshot of Google.com home page with the text 'Google' highlighted
in the browser's title bar.

When your visitors bookmark your page (or add it to their favorites), the contents of the page’s <title> tag appear as the default text in the bookmark’s title. It is important to pick a concise title for your pages.

After adding these tags, your HTML document looks like:

<html>
	<head>
		<title>My Web Site's Home Page</title>
	</head>
</html>

(Again, the spacing here is completely arbitrary. We could have put this entire document on one line, but we’re spacing things pretty liberally here so it is easier for us to read.)

The Body

As we mentioned earlier, the <head> tag contains no Web content — that’s the job of the <body> tag.

All of the visible content of a web page should be contained in the <body> tag.

Adding in the <body> tag, our HTML document now looks like:

<html>
	<head>
		<title>My Web Site's Home Page</title>
	</head> <body>
		[My Content Here]
	</body>
</html>

You could then save this file as something like home.html and upload it. You can view this file ‘live’ by visiting this page.

The HTML Family Tree

There is an important bit of theory here. What we are creating is a bunch of tags nested inside each other. This creates a “tree” (an “acyclic directed graph”) of tags.

This is very similar to a family tree, and the terminology for the “HTML Document Tree” (the formal term for what we call the “HTML Family Tree”) is reminiscent of a family tree.

Here is the “HTML Family Tree” for our document thus far:

an acyclic
directed graph to represent the HTML document

(We typically don’t put in the < and > on the tree diagrams because we don’t think of these things as being “tags” so much as they are what we call “nodes” — things in a tree. We also don’t put the actual content (e.g. “[My Content Here]”) on the graph — what we are concerned about is the relationship between the nodes. So when we mention tag, we’re talking about that tag’s representation in the tree. When we mention <tag>, we’re referring to the actual HTML source code.

There is some important terminology here borrowed from graph theory and from traditional family trees.

When one tag contains another tag, it is called an “ancestor” of the other tag. In the above example,
- html is an ancestor of head
- head is an ancestor of title
- html is an ancestor of title
- html is an ancestor of body
It’s important to note that tags, like people, often have more than one ancestor. Ancestors are like parents, grandparents, great grand parents, etc. In this example, title has two ancestors: head and html. Everything else only has one ancestor, html.
When one tag is contained by another tag, it is called a "descendant" of the other tag. If ruth is an ancestor of mary, then mary is a descendent of ruth. Descendants are like children, grandchildren, great grandchildren, etc. In the above example,
- head is a descendent of html
- title is a descendent of head
- title is a descendent of html
- body is a descendent of html
Again, it is often the case that, like people, tags often have more than one descendent.
When one tag contains another tag directly, it is called the “direct ancestor” of the other tag. The more familiar term is "parent". Direct ancestors do not include grandparents, great grandparents, etc. Unlike people, tags have exactly one parent. In the above example,
- html is a direct ancestor of head
- head is a direct ancestor of title
- html is a direct ancestor of body
When one tag is contained directly by another tag, it is called a “direct descendant”. The more familiar term is “child”. Direct descendants do not include grandchildren, great grandchildren, etc. In the above example,
- head is a direct descendent of html
- title is a direct descendent of head
- body is a direct descendent of html
When two tags share a common direct ancestor, the two tags are called "siblings". The more familiar term is "sister" or "brother", but we’ll stick with just sibling. In the above example,
- body is the sibling of head
- head is the sibling of body

This terminology allows us to talk about the relationships between tags very precisely, using an easy-to-understand language. Creating this document tree for very large documents is not something that you can easily do with an ordinary-sized piece of paper, but you can always just do a small portion of the tree and isolate what you’re trying to work with.

To return, we said earlier that the <html> tag contains all the other tags. That means that html is always an ancestor of everything. Similarly, the only two things that are allowed to be direct descendants of html are head and body.

The discussion of ancestors and descendants turns out to be very important in terms of CSS and JavaScript. In terms of nesting, something we discussed on the General Syntax page, we can now say that all descendants must be opened and closed within their ancestors.

Next we’ll cover some important descendants of body — things we call “block-level” tags.

Next: Block-Level Tags Back