Make your own free website on Tripod.com

HTML Tags


Headings

Headings are some of the most important tags within the BODY of your HTML document. You will usually use a heading to tell what the following section of your page is about. The opening tag for a heading is <hn> and the closing tag is </hn> with n being the size of the heading... from 1 to 6. (1 being largest, and 6 being smallest)

Example of heading tags...

The horse ran away from Bob. [H1]

<h1>The horse ran away from Bob. [H1]</h1>

The horse ran away from Bob. [H2]

<h2>The horse ran away from Bob. [H2]</h2>

The horse ran away from Bob. [H3]

<h3>The horse ran away from Bob. [H3]</h3>

The horse ran away from Bob. [H4]

<h4>The horse ran away from Bob. [H4]</h4>

The horse ran away from Bob. [H5]

<h5>The horse ran away from Bob. [H5]</h5>

The horse ran away from Bob. [H6]

<h6>The horse ran away from Bob. [H6]</h6>


Horizontal Ruled Lines

Horizontal Ruled Lines are used to separate different areas of a web page. The tag for a horizontal ruled line is <hr>. The horizontal ruled line DOES NOT have a closing tag. You may also add certain attributes to the <hr> tag, such as WIDTH=n (for fixed pixel width) or WIDTH=n% for a certain percentage of the screen wide, SIZE=n to make the line a certain pixel amount thick, and NOSHADE to turn the line's shading off. A plain <hr> with no attributes will make the line the full width of the screen.

Example of horizontal ruled lines...


<hr width=60>
<hr width=75%>
<hr size=6>
<hr noshade>

You may also use several attributes within one tag...
<hr width=50% size=10 noshade>

Paragraphs

You will often use paragraphs in HTML, just as you do when you write stories. The opening tag for a paragraph is <p>, and the closing tag is </p>. The closing tag for a paragraph is not always needed, but I recommend using it anyway.

Example of a paragraph...

Bob chases the horse around the field. He trips on a rock and goes flying into the manure pile! Yuck, what a mess!

<p>Bob chases the horse around the field. He trips over a rock and goes flying into the manure pile! Yuck, what a mess!</p>


Text Formatting Properties

If you had an entire web page without formatted text, it would look rather dull and boring. This is why we use text formatting tags. Some common text formatting tags are <b> and &lt/b> for bold, <i> and </i> for italics, <u> and </u> for underlined, and <tt> and </tt> for typewriter. The <font size=n> and </font> tags also come in handy.

Example of font tags...

Bob is a Cool Guy isn't he?

<font size=+1>Bob</font> <font size=+2>is</font> <font size=+3>a</font> <font size+2>Cool</font> <font size=+1>Guy</font> isn't <font size=-1>he?</font>


Align Attributes

Many tags support ALIGN attributes... if you want something to be aligned from the left margin, from the center, or from the right margin. The ALIGN attribute is placed in the opening tag before the >.

Left Align

<h1 align=left>Left Align</h1>

Center Align

<h1 align=center>Center Align</h1>

Right Align

<h1 align=right>Right Align</h1>


The Line Break

When your HTML document is viewed, normally the text will do a word-wrap at the end of a line. If you want to have the text BREAK (go to another line) you will use the <br> tag. This tag has no closing tag.

Example WITHOUT line Break...

Sentence One. Sentence Two. Sentence Three.

Sentence One.
Sentence Two.
Sentence Three.

Example WITH line Break...

Sentence One.
Sentence Two.
Sentence Three.

Sentence One.<br>
Sentence Two.<br>
Sentence Three.<br>


Preformatted Text

If you wish to have text line up properly (a.k.a. fixed width text) that will include line breaks without the use of the <br> you may find the <pre> and </pre> tags helpful.

Example of text WITHOUT preformatting...

The cat ran after the mouse. ^ ^-verb ^noun ^-noun

The cat ran after the mouse.

    ^   ^-verb        ^noun


    ^-noun


HTML ignores the extra line breaks, so the text does not line up properly.
Example of text WITH preformatting...

The cat ran after the mouse.


    ^   ^-verb        ^noun


    ^-noun
<pre>


The cat ran after the mouse.


    ^   ^-verb        ^noun


    ^-noun

</pre>


Clean Code

Clean code means that your HTML coding follows prescribed specifications. Personally I don't use true clean code, but, I try. Here are a few ways to keep your code clean:


The Comment Tag