HTML Structure & Style Tags

HTML Caveat: It is not a "page layout" language

Any given HTML webpage will be displayed differently by different browsers. In fact, it will be displayed differently by different copies of the same browser, if the two copies have different preferences set.
Therefore, you need to keep the following principle foremost in your mind at all times:

You cannot guarantee that your webpage will appear to other people exactly as it does to you.

So don't get obsessive about re-writing webpages "to get them to look right".

Example: Not a "Page Layout" language

Depending simply on the user-defined width of their viewing window, as well as the type of browser, a web page could display the following text and image differently (to view this in action, change the width of your viewing window to make it thin and then wide):

doggies How much are those doggies in the window? (Awww, ain't they cute?)

HTML Syntax: Based on Tags

Tags are used to tell a browser how to display text and graphics.
Tags usually occur in begin - end pairs:
<TAG> ... </TAG>
These pairs define containers. Any content within a container has the rules of that container applied to it. For example, the text within a "boldface container" would be boldfaced.
Some tags are empty--they stand on their own.
Tags are case-insensitive, and always noted by angle brackets < >
White-space in an HTML document does not matter to a browser.
Containers should be nested within each other (see Figure below):

Document Structure Tags

Structure tags divide up a Web page into its basic sections, such as the header information and the part of the page (ie, "body") which contains the displayed text and graphics.
Every webpage should use the structure tags as indicated in the figure below. Specifically, each webpage should use: <HTML>, <HEAD>, <TITLE>, and <BODY> tag pairs.
- Every webpage must begin and end with the <HTML> tag pair.
- All instructions on link and text colors, as well as webpage background patterns or colors will be within the <HEAD> tag pair.
- What you put within the <TITLE> tag pair will appear at the top of the browser's title bar.
- The content of your webpage (text and graphics and other structure tags) will be within the <BODY> tag pair.

Some "Empty" Tags

<!text> This is a comment for documentation inside the HTML. A browser will not display this "text".
<HR> Places a Horizontal Rule line. Serves as a section divider.
This forces a line BReak. Whatever is after the tag will start from the left margin of the next line on the screen.

For example:

Communication is everything!
You may be smart, but if you can't correctly communicate what you know to others then you won't be effective in your job.

would be coded as:


Communication is everything!<BR> You may

be smart, but if you can't correctly 

communicate what you know to others then 

you won't be effective in your job.

Headings within the body of an HTML

There are six levels of headings. H1 is "most important" and H6 is "least important." By default, browsers will display the six heading levels in the same font, with the point size decreasing as the importance of the heading decreases.

Here are the different heading styles:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

would be coded as:


<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>

Paragraph Tag

Example:

This is the start of the paragraph. It really does not matter how long or how short the paragraph is.

It could be a short one.

Or a very long paragraph.

would be coded as:


<P>This is the start of the paragraph.  It

really does not matter how long or how short

the paragraph is.</P> <P>It could be

a <I>short</I> one.</P> <P>Or a 

very <B>long</B> paragraph.</P>

Blockquote Tag

The BLOCKQUOTE tag basically indents everything in its container. For example:

Here is a quote from Golda Meir, the late Prime Minister of Israel:

Nothing in life just happens.

It is not enough to just believe in something; You have to have the stamina to meet obstacles, and overcome them.
To struggle.

would be coded as:


<P>Here is a quote from Golda Meir, the late 

Prime Minister of Israel:  

<BLOCKQUOTE>Nothing in life just happens.

<P>It is not enough to just believe in something; You 

have to have the stamina to meet obstacles, and 

overcome them.<BR>  To struggle. </P>
</BLOCKQUOTE></P>

Forced Style Tags:

Boldface: Everything between ... is boldfaced
Italics: Everything between ... is Italicized text
Underline: Everything between ... is underlined; however, underlining should be avoided.
Typewriter Text: Everything between <TT> ... </TT> is typewriter text (a monospaced font in most browsers). This is typically used for variable names, or to show snippets of HTML.

Presentation Formatting:

3.0 Strikeout: <S> ... </S> (not widely implemented yet)
3.0 Subscript: ...
3.0 Superscript: ...
Preformatted: <PRE> ... </PRE> (display text spacing as-is)
Width: <PRE WIDTH=?> ... </PRE> (in characters)
Center: ... (for both text & images)
N1.0 Blinking: <BLINK> ... </BLINK>
N1.0 Font Size: ... (ranges from 1-7)
N1.0 Change Font Size: ...
N1.0 Base Font Size: <BASEFONT SIZE=?> ... (from 1-7; default is 3)
N2.0 Font Color: ...

Special Characters:

Special Character: &amp#?; (where ? is the ISO 8859-1 code)
< less than: &amplt;
> greater than: &ampgt;
& ampersand: &ampamp;
" double quote: &ampquot;
' single quote or apostrophe: &amp#39;
Ž Registered symbol: &amp#174;
N1.0+ Ž: &ampreg;
Š Copyright symbol: &amp#169;
N1.0+ Š: &ampcopy;

(Complete list at http://www.w3.org/hypertext/WWW/MarkUp/html3/latin1.html)