goer.org | HTML Tutorial : Introduction : Structure

Table of Contents

About
Introduction
Diving In
Structure
Tinkering
Tags
Attributes
Browser Tools
Basic
Paragraph Breaks
Headings
Font Styles
Colors
Links
Images
Lists
Intermediate
Style Sheets
Classes and IDs
Div and Span
Font Control
Borders
Margins and Padding
Align and Indent
Advanced
Tables
Miscellany
SHTML

Structure

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)

<html>
<head>
  <title>A Simple Webpage</title>
</head>
<body>
This is a simple webpage.
</body>
</html>

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: <html>, <head>, <title>, and <body>.

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 (</html>, </head>, </title>, and </body>) are called closing tags. Closing tags stop the effect of the tag that they correspond to. For example, the <body> section ends at the closing tag, </body>.

Short List of Tag Properties

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

Tags in Example 1 (Structural Tags)

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.