Goals
Show the overall structure of an HTML document.
Notes
Here's a sample HTML document. You can see it how it looks in your browser.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Sample Document</title> </head> <body> <h1>Sample Document</h1> <p>This is a sample.</p> </body> </html>
The first part is the document type (DOCTYPE) declaration. It tells your browser which version of the HTML or XHTML standard to use. Read more in the Links section. You can just cut-and-paste this code into your pages, if you want.
The rest of the page is inside the <html> tag. It starts with <html>, and ends with </html>. Most HTML tags are balanced like this.
There are two sections in the <html> section. The <head> section gives the browser information about the page. The first line gives the character set to use. Most pages use iso-8859-1 (for Western character sets), or utf-8 (handles many character sets, like Chinese, Japanese, etc.). Read more in the Links section. You can just cut-and-paste this code into your pages, if you want.
If you want your page to be indexed correctly by search engines like Google, you should add the keywords and description metatags. Read more in the Links section.
The <title> tag is important. It tells the browser what to show in its title bar, is used in bookmarks, and is shown by search engines like Google. Give every page a meaningful title.
There are usually other things in the <head> area, like styles, and JavaScript code. We'll talk more about them later.
The <body> section contains the content of the page. This is what the user sees in the browser.
Examples
Exercises
Look at the code for this page (right-click, View Page Source). Find the sections (head, body) and their parts.
Do the same for any other three pages on the Web.