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...

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:

• Don't type special characters into your code, instead type their escape code... many characters should NEVER be typed directly into HTML code... for example the "<", ">", the "©", "&", and the " itself. Instead, type &escape_code; (Ampersand, Escape Code for Character, then a semicolon). For these 5 characters, here are the escape codes...
  • For the < type &lt;
  • For the > type &gt;
  • For the © type &copy;
  • For the & type &amp;
  • For the " type &quot;

  
  

• Use quotes around values in attributes... For example, if you want a horizontal rule that is half of the screen width, type <hr width="50%"> rather than <hr width=50%>, or if you want one that is size 5 type <hr size="5"> rather than <hr size=5>.
  
• Don't overlap tags... Overlapping occurs when Tag A starts, Tag B starts, Tag A closes, then Tag B closes. This will cause errors in sensitive browsers. For Example, it will not render correctly in Navigator 4.0 Beta1, Netscape purposefully built into the browser so developers could catch errors. Examples:
  
  • Wrong Way (Overlaps):
    <font size=+1><b>This is Bold and One Font Size Bigger</font></b>
    Right Way (Doesn't Overlap):
    <font size=+1><b>This is Bold and One Font Size Bigger</b></font>
    
  • Wrong Way (Overlaps):
    <a href="here.html"><i>This link is italicized</a></i>
    Right Way (Doesn't Overlap):
    <a href="here.html"><i>This link is italicized</i></a>
    

The Comment Tag

If you are writing an HTML document, sometimes you may want to put little reminders to yourself with your code so that you will be able to interpret your coding better. A comment will not appear in a web browser when the page is displayed... it is only visible when the source code is viewed. You start commented text with <!-- and end it with -->.

---

[Go to Lesson 1 | Introduction | Go to Lesson 3]

---

Copyright © 1999 Webmaster.

All rights reserved.