Document Structure Commands

Homebuilt Homepage

Document Structure Commands

All HTML documents need to have these basic commands. Failure to include them, or using them improperly can have unpredictable and unwanted results.

Page Index:
Document Start & End - html
Header - head
Title Bar - title
Meta Tags - meta
Body - body
Body Options - Options that change your page
Background Color
Text Color
Link Color
Visited Link Color
Active Link Color
Tiled Background
Fixed Background
Layout - Arranging page elements
Paragraph - p
Line Break - br
Horizontal Rule - hr
Horizontal Rule Options - Options that change your Horizontal Rule
Alignment
Size
Width By Pixels
Width By Percentage
No Shade

Document Start & End - html
Every HTML document should start with the command <html> and end with the command </html>. When begining a new HTML document it's best to put both commands in right then. This way you won't forget to close the document. So it would look like this:

Example HTML Document
<html>
</html>

Then place everything else between those two lines.

Header - head
The Header of your document is defined by the <head> and </head> commands. Do not place any document text in the Header. If you do, your body command's options will not function. Document text should only be in the body.

Example HTML Document
<html>
<head>
</head>
</html>

Nothing should go in the Header unless it is required to be there. Two commands that must be in the Header are the Title and Meta Tags commands.

Title Bar - title
The title of your document is what appears in the Title Bar at the top of the browser window. For example, if you look at the top of this window the title of this document is "Document Structure Commands".

The title command is <title> and </title>. The title you wish to appear should be surounded by these commands. The Title command must be placed in the Header section.

Example HTML Document
<html>
<head>
<title>My Webpage</title>
</head>
</html>

Meta Tags - meta
Meta Tags don't display in your document. They are comments and information about your document. Some search engines use these in their indexes. You don't need to use them at all. But if you do, they must go in the Header section.

The structure of a Meta Tag command is <meta name="?" content="?">. In place of the first question mark should be the name, (also known as the type,) of tag you want this Meta Tag to be. In place of the second tag should be the text or description of this tag. If you don't need a Meta Tag, don't use it. They add to the size of your files. This will increase the space required for your site, and the bandwidth they require. And they will take longer for people to download. These are all reasons to limit their use.

The most commonly used meta tags are the Description and Keywords. These are actually useful because a Search Engine that Spiders websites for it's index will use these for it's entries on your page.

Description Meta Tag
<meta name="description" content="???">
Some Search Engines will list this as the description in their index. Replace the ??? with your own description of your page.

Keywords Meta Tag
<meta name="keywords" content="???">
Replace the ??? with keywords. Some Search Engines will use this to help people interested in your subject to find your site. Say you put "banana" in yours. Anyone who types banana into a Search Engine will find your site, (and every other site that has that keyword.) Some websites used to try to load the dice by repeating the same keyword over and over. This used to make them appear closer to the front of any list. Now most Search Engines will delete and ban you for attempting this. And the popular engines don't work that way anymore.

Example HTML Document
<html>
<head>
<title>My Webpage</title>
<meta name="description" content="A website dedicated to fruit.">
<meta name="keywords" content="Fruit, Banana, Orange, Apple, Pear">
</head>
</html>

Body - body
All of your text, pictures and such go in the Body section. This is defined by the Body commands. They are <body> & </body>. All text, graphics as well as anything that doesn't have to go in the Header should go between them.

Example HTML Document
<html>
<head>
<title>My Webpage</title>
</head>
<body>
</body>
</html>

Options:
The default settings for the entire page are set within the Body command. When using multiple options place them all in the body command separated by a space.

<body bgcolor="#$$$$$$">: Background Color - Sets the background color of the page. If not defined, the browser will use the user's default color. (Some browsers allow the user to override this command with their own preferences.) See the Color Chart for values to replace $$$$$$.
<body text="#$$$$$$">: Text Color - Sets the default text color of the page. Be sure to use a contrasting color to the background color. (Some browsers allow the user to override this command with their own preferences.) See the Color Chart for values to replace $$$$$$.
<body link="#$$$$$$">: Link Color - Sets the color of unvisited links on the page. (Some browsers allow the user to override this command with their own preferences.) See the Color Chart for values to replace $$$$$$.
<body vlink="#$$$$$$">: Visited Link Color - Sets the color of visited links on the page. (Some browsers allow the user to override this command with their own preferences.) See the Color Chart for values to replace $$$$$$.
<body alink="#$$$$$$">: Active Link Color - Sets the color of the active link on the page. (Some browsers allow the user to override this command with their own preferences.) See the Color Chart for values to replace $$$$$$.
<body background="URL">: Tiled Background - Tiles the graphic located at URL over the page. Be sure to use one that contrasts with the text color or your page will be illegible. Also, set the background color to set a similar color to your graphic so the text will continue to be legible if the graphic can't be loaded.
<body bgproperties="fixed">: Fixed Background - Used in conjunction with a Tiled Background. This makes the tiled graphic background stay fixed instead of scrolling with the text. This only works with Internet Explorer.

Example HTML Document
<html>
<head>
<title>My Webpage</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</html>

Paragraph - p
Divides paragraphs and places a small amount of space between them.

Command
 - Begin paragraph
 - End paragraph

Example HTML Document
<html>
<head>
<title>My Webpage</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">

Sample sample sample sample sample. Sample sample sample sample sample.


Sample sample sample sample sample. Sample sample sample sample sample.

</body>
</html>

Failing to close a paragraph with a doesn't have dire consequences. Most browsers can handle just using the begin paragraph. But not closing is bad HTML.

Options:
The default settings for the entire page are set within the Body command. When using multiple options place them all in the body command separated by a space.

: Align Text - Sets the alignment of the text in the paragraph. The default alignment is left. The options to replace the ???? are Left, Center, Right, Justify.

Line Break - br
Breaks the text at that point and begins on the next line with no space in between lines. Unlike most commands, this one is a "single". It doesn't have a matching turn off command.

Command
 - Line break

Example HTML Document
<html>
<head>
<title>My Webpage</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">

Sample sample sample sample sample. Sample sample 
sample sample sample.

</body>
</html>

Horizontal Rule - hr
places a line across the page as a divider.

Command
<hr> - Line break

Options:
The default line is a single pixel thick and goes from one side to the other of the window.

<hr align=????>: Alignment - Sets the alignment of the horizontal rule line. (It has no effect unless the size is less than the width of the window.) The options to replace the ???? are left, right & center.
<hr size=?>: Size - Sets the thickness of the line. Replace the ? with the number of pixels the line should be.
<hr width=?>: Width By Pixels - Sets the width of the line in pixels. Replace the ? with the number of pixels the line should be. (See next option for setting width as a percentage.)
<hr width="?%">: Width By Percentage - Sets the width of the line as a percentage of the window's width. Replace the ? with the percentage the line should be. (See previous option for setting width by number of pixels.)
<hr noshade>: No Shade - Sets the style of the line to be solid. (Without the 3D cutout look.)

Questions? Email the address at the right.

HHWeb

Homebuilt

.Org

Return to Guide Index
Return to Homebuilt Homepage's HTML Guide
Return to Homebuilt Homepage