HTML, Part 2 : Structure

This 2nd tutorial teaches you how the basic structure of an HTML file works.
The previous section, Diving In, demonstrates how to create a simple web page. If you haven't saved the "Simple Web Page" on your computer as the file "simple.html", you should do so now.

A Simple Web Page (source)

A Simple Webpage      This is a simple webpage. 

If you view the "Simple Web Page" in your browser, you will see these words on a white or grey background:

A Simple Web Page (Results)

This is a simple webpage.

Where did everything else go? And what are those words with the angle brackets, anyway?

A Brief Introduction to Tags

The web page simple.html uses the following tags: , , , and .

Tags do not appear directly when you view a web page. Instead, they serve as instructions to your browser. Tags can change the font, create a link, insert an image, and more.

The tags in simple.html that begin with a slash (, , , and ) are called closing tags. Closing tags stop the effect of the tag that they correspond to. For example, the section ends at the closing tag, .

Short List of Tag Properties

• Tags are delineated by angle brackets (<>)
• Tags are "invisible"; they don't directly appear in the web page
• Closing tags begin with a slash and end the effect of a previous tag

We'll discuss the general properties of tags in some detail in a later section. For now, let's focus on the particular tags in the "Simple Web Page" example.

Tags in Example 1 (Structural Tags)

• : "Here begins an HTML document."

  All well-formed HTML documents have one and one tag. These tags, along with the .html file extension, identify a file as an HTML document.

• : "Here begins the header."

  The header contains tags that apply to the overall document. For example, it might contain tags that are designed for search engines to pick up: keywords, a short description, and so on. Information in the header is not meant to be directly displayed as normal webpage content.

  The reasons you would be concerned about the header are a bit abstract at this stage, so we won't worry about it much until later in this tutorial.

• : "Here begins the document title." (Must be in the header)

  Along the very top of your browser window, you should see the words, "HTML Tutorial: Structure". These words appear because of the tag.

  When a search engine indexes your page, it will probably use the as the page title it displays to users. If you omit the , the search engine will make up one for you. This is Not a Good Thing.

• : "Here begins the body."

  All well-formed HTML documents have one and one tag. This section is where you put all the text and tags that should be displayed in the main browser window. This is why the words, "This is a simple webpage" appear in simple.html.

Exercise

Change the title of the simple.html webpage to, "My First Webpage". Save your changes and view them by hitting the Refresh or Reload button in your browser.

Wrapping Up

So why do we only see the words "This is a simple webpage" when we display simple.html in a browser? The answer is, after you remove the tags and the document title, "This is a simple webpage" is the only thing left.

In the next section, we'll tinker with our example webpage, just to see what happens. After that, we'll provide a more formal definition of tags and tag properties.

Have a question? Need help? Get free, friendly person-to-person help with your computer questions or spyware questions in our help forums!