The basic HTML page structure

All HTML codes are surrounded by < and >, which we call "angle brackets" when used like this. Most markup codes come in beginning and end pairs, such as "start using italic," and "stop using italic." A beginning tag is written as <i> and the matching end tag has a slash like this: </i>.

Since < and > have special meanings, you can't use those two symbols in the content of your pages. To display them you have to type &lt; and &gt;. When you use "View/Page Source" or "View/Source" in your browser to see the actual HTML coding I used to create these pages, don't let all those &'s scare you. I just have to type those so you can see the markup codes I'm telling you about!

Every web page begins with <html> and ends with </html>. Inside are two sections: the page heading is enclosed between <head> and </head>, and the body of the page is enclosed between <body> and </body>.

The heading contains the page title and style information. What you put in the heading section is not displayed in the web browser. All the content goes in the body section.

The title is enclosed between <title> and </title>. Although the title that you give is not displayed on the web page, it does appear in the browser title bar, in the system tray, in "Favorites" or "Bookmarks" lists, and in search engine results. But to display a title in the page content itself you'll have to use headline tags in the body section.

Here is the most basic page:

<html>
<head>
<title>This is the page title</title>
</head>

<body>
Your page content goes here.
</body>
</html>

Strict HTML

If you want to get serious about HTML and creating web sites, you should also consider how various web browsers display your site and how search engines are able to read and index your site. For consistency of display and for readability by search engines, you can add a couple additional lines that give some technical information about the type of document you are creating. One way is to include the two additional lines I've added below:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>This is the page title</title>
</head>

<body>
Your page content goes here.
</body>
</html>

There are variations of the above DOCTYPE and meta lines, but we'll stick with the ones shown above for now.

Validation

If you are unsure about your HTML coding, there is an online validation tool maintained by the standards organization World Wide Web Consortium. You can copy the following HTML code and paste it into the body section of your web page:

<p><a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01 Strict" height="31" width="88" >
</a></p>

The result will be a button like the one below, which you can click to run a validation check on your page. Try clicking this one to see what it does:

Valid HTML 4.01 Strict

Click here to continue