HTML Page Structure
Let's address the tags which comprise the basic HTML page structure — the structure of a web page.
:: The HTML Tag
First, we'll need to signal to the browser that this is a web page. Why? Because browsers can display other types of files: Adobe Acrobat files, text files, images, Flash files. We want this displayed as a web page.
To signal to the browser that this is a website page, we need two tags — an opening and a closing <html> tag:
<html>
</html>
Everything that is visible in the browser goes between these two tags. Notice that there is also a closing tag — </html>.
Notice also that you don't see these tags in your browser (unless you view the source code); browsers are programmed to read the code to determine how to display the page, not to display HTML tags.
:: The BODY Tag
For the part of the page that is visible in the browser — that is, the body of the page — add the <body> tags between the <html> tags. Notice that the body tag, too, has a closing tag.
<html>
<body>
Browser-visible part of the page goes here
</body>
</html>
:: Page Background Color
The Body Tag can contain extra information that controls how some elements of the page are displayed, such as HTML page background color and background images.
In this example:
• background.gif is an image which will be used as the page background
• a gif is an image prepared in one of the Web image formats.
<html>
<body style="background:#fff url(images/background.gif) no-repeat">
Browser-visible part of the page goes here
</body>
</html>
Note that:
- /images/ is the folder the images are stored in (in this example)
- background specifies both the page's background image andbackground color
- #fff is the color white. Actually, that should be #ffffff — but you can abbreviate any "pair" (example: #CC0033 can be abbreviated to #C03)
(A great reference for Web colors, http://www.visibone.com/colorlab/, is mentioned in our "Web Designer Tools" article.)
Why would you use an HTML page background color if you are also using an image background? Simply for those people who turn images off in their browsers. Or when your background image is not intended to cover the entire background.
Note that the background image is in a subfolder called "images". If you've got a lot of pages, and a lot of images, separating them can save a lot of aggravation.
:: Browser Margins
Ever notice that many browsers, by default, give a few-pixel margin between the edge of the browser and the start of your page contents? This can look odd if your page design is intended to extend to the edges of the browser. To solve this, add this to the <body> tag, which tells the various browsers to remove the margins:
marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" bottommargin="0" rightmargin="0"
Nowadays, though, you'd probably want to use CSS (Cascading Style Sheets) instead — and look how much smaller the code is:
margin:0
Thus:
<html>
<body style="background:#fff url(images/background.gif) no-repeat; margin:0">
Browser-visible part of the page goes here
</body>
</html>
The "0" is the number of pixels from the margin. Computer screen displays are made up of dots; these are called "pixels". Note that you can also add pixels to the margins, if you wish.
:: Doctype
Just as there can be different versions of software, there are different versions of HTML — and, even more, different instructions as to how it ought to be displayed in browsers. This information is contained in the doctype at the top of each page.
Although the doctype is the first thing on the page (within the HTML code), I've chosen to wait to introduce it at this point in order to introduce the above tags first.
For safety's sake, we generally use a "loose" interpretation which will allow browsers to read older HTML tags. The doctype notation should be put above the <html> tag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
Browser-visible part of the page goes here
</body>
</html>
- Note: zillions of web pages exist — and display correctly — without a doctype. If you're going to use one, we suggest learning more about doctypes (warning: geekified stuff ahead):
http://www.w3.org/TR/REC-html40/struct/global.html
:: Comment Tag
The comment tag is used to put notations in the HTML source code; they are not visible in the browser. Note that comments close with a -->
Putting it Together
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<body style="background:#fff url(images/background.gif) no-repeat; margin:0">
Browser-visible part of the page goes here
<!--top of page starts here-->
</body>
</html>
That's the basic HTML page structure. Let's go a little further: Head Tag, MetaTags & Titles
DianeV Web Design Studio
© 1998- DianeV Web Design Studio. All Rights Reserved. :: Privacy/Legal/Return Policy. Any unauthorized reproduction
or distribution of the contents of this website is a violation of copyright law and may result in severe civil and criminal penalties.
