Home - Help & Support - Contact Us
    

HTML Common 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 <hy> and the closing tag is </hy> with y being the size of the heading... from 1 to 6. (1 being largest, and 6 being smallest)

Example of heading tags...

H1: Bob fell over the chicken.

<h1>H1: Bob fell over the chicken.</h1>
 

H2: Bob fell over the chicken.

<h2>H2: Bob fell over the chicken.</h2>
 

H3: Bob fell over the chicken.

<h3>H3: Bob fell over the chicken.</h3>
 

H4: Bob fell over the chicken.

<h4>H4: Bob fell over the chicken.</h4>
 
H5: Bob fell over the chicken.
<h5>H5: Bob fell over the chicken.</h5>
 
H6: Bob fell over the chicken.
<h6>H6: Bob fell over the chicken.</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=50>
<hr width=50%>
<hr size=7>
<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 starts to chase the chicken around. Bob trips over a string and goes flying into the pig's mud pit! eww! What a pity!

<p>Bob starts to chase the chicken around. Bob trips over a string and goes flying into the pig's mud pit! eww! What a pity!</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 </b> for bold,
<i> and </i> for italics,
<u> and </u> for underlined, and
<tt> and </tt> for typewriter.

Font Tags
The <font size=n> and </font> tags come in handy.
n is the number of font points by which to change the size of the current font.
n can be positive or negative: a positive number will increase the font size, and a negative number will decrease it.
n can also be an absolute number, indicating an absolute size for the font (not a relative size).

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

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

    ^   ^-verb        ^noun

    ^-noun

HTML ignores the extra line breaks, so the text does not line up properly.

Example of text WITH pre-formatting...

The cat ran after the dog.

    ^   ^-verb        ^noun

    ^-noun

<pre>

The cat ran after the dog.

    ^   ^-verb        ^noun

    ^-noun

</pre>


Your own HTML page...

Add the following to your HTML page ("Home.htm"), between the lines <body> and </body>:

<h1>YOURNAME's Home Page</h1>
<hr>
This is the home page of <b>YOURNAME</b>.
<p>Type something about yourself here. Describe briefly who you are and what you do for a living. Remember to use bold and italic text, for emphasis.</p>

Save the text file as "Home.htm".
 

The CENTER tag...

The center tag pretty much explains itself. The opening center tag is <center> and the closing center tag is </center>. Whatever you put between will be centered on the current line!
Example of CENTER tag...
 

Center Works

<center><h1>Center Works</h1></center>
The BODY attributes...
The BODY tag has many attributes... here are the most useful and common:
  • realsrc="location_of_image" background="http://www.zeronese.net/knowledge-base/admin/location_of_image" - Background Image
  • BGCOLOR="#hexadecimal_here" - Background Colour
  • LINK="#hexadecimal_here" - Colour of Links
  • VLINK="#hexadecimal_here" - Colour of Links the User has Already Visited
  • TEXT="#hexadecimal_here" - Text Colour

Now try playing around in your home.html page to get the feel of all this.


Rated:NR/0 Votes
652 Views
More Articles From HTML
More Articles From HTML
Print Article
Print
Share |
Comments, Questions & Reviews

Comments is currently disabled for this article!
Related Articles and Readings
The Basics of HTML
TAGSThe Page you are viewing right now is an HTML document. HTML documents look a lot like word-processing documents...You can ...
How Do I Add Bandwidth Overage Protection to My Account?
NOTE: Bandwidth Overage Protection cannot be added to an account when it is already over its allotted bandwidth. Adding Bandwidth Overage ...
What is Bandwidth Overage Protection?
Bandwidth Overage Protection shields you from bandwidth overage charges by automatically suspending your account when its allotted bandwidth is exceeded. ...
Rotating and Flipping Photos
You can edit photos by either rotating them left or right 90 degrees at a time or flipping them vertically ...
Is there a way for me to start over with my dedicated server?
If, at any time, you want to revert to a clean setup on your dedicated server, you can re-provision your ...
The information provided in this article is for general information and/or the comments is the sole responsibility of their respective authors and does not necessarily reflect the opinion of zeronese.net does not endorse any article and/or comments published by our web users unless otherwise noted.