The Anatomy of an HTML Page

An HTML page is divided into two basic sections: the head and the body. Unless you specify otherwise, all the content you put in an HTML document goes into the body. If you specifically declare head and body sections, only certain tags are allowed into each section of the document.

The Head Section

The head of an HTML document contains information about the page, such as author information, keywords that will help internet search engines find your page, content descriptions (the summaries displayed along with your URL on a search engine's results page), and a title for your page that will appear in the window title bar. For instance, the title of the browser you are using now to view this page contains the text "Step-by-Step HTML: Head and Body". This is because the head contains the title tag, as such:


���
������Step-by-Step HTML: Head and Body
���



The head section of an HTML document is not specifically required; unless one is explicitly declared, all content of an HTML document is considered to be part of the body. Since the head is not required, most basic users of HTML don't create a head on their documents for their personal Web pages. For now, we won't put an exhorbitant amount of detail into the head, but it does seem cool to have your name or the name of your Web site in the title bar of your document.

In the sample HTML document you made on the previous page, put a head into the document and put a title in the head. You may want to indent your code like the example shows so that it's easier to read later on. The tags nest inside each other in a heirarchy, and the browser will interpret them that way. The head isn't the greatest place to illustrate this, so let's go into the body of the document.

The Body Section

Just like your head knows what to do and your body does it, an HTML document gets information from the head and does the work with the body. This is the section into which you will insert text, images, links to other pages, and other content (like background music and colored wallpapers).

As mentioned before, tags are heirarchical and are interpreted as such. Luckily, this can sometimes help you diagnose display problems if your page doesn't appear as you intended. For instance, I want to display a movie title with the main title in bold text, centered in the browser window. The first part of the title should be bold, but the subtitle is supposed to be in italics. is used to create italic text, is used for bold,
creates a new line, and

is used to align everything. But when the page is written like this:


���
������Movies I Hope Not To See
���
���


������
Major League XVII:

������

������Playing Catch With the Grandkids
���



At first glance, this might make sense. The
tag was created first, so it should be closed first, right? BZZT! Wrong answer. Take a look at the result, below:
Major League XVII:

Playing Catch With the Grandkids
Not quite what we had in mind; the second line should only be italicized, but the whole thing should be centered. How about using the indentation to our advantage, to create a visual cue that will alert us ahead of time?


���
������Movies I Hope Not To See
���
���


������

���������Major League XVII:
���������

���������Playing Catch With the Grandkids
������

���



Which results in:
Major League XVII:
Playing Catch With the Grandkids

That's better! Still not a movie I'd care to watch, but it's formatted the way I had intended it. Looking at the previous examples, can you see why the text appeared as it had? The tag will continue to make text bold until its closing tag, , is found. The other tags work the same. By making our source code, in other words the text version of the HTML document, a heirarchy of indented paragraphs, it was more visually apparent what would be centered, what was bold, and what was italicized. No matter if you are writing HTML or programming in a complex computer language, always make sure to make the source code easy to read. It pays off dividends later.

Now that you know about the head and body, let's put some content into the body of your web page. We'll start with text formatting, and work our way up