H T M L

PAGE (5 of 8)

Common HTML Tags

Basic Tags

Below are the most commonly used HTML tags. Almost all of these tags will be found in every HTML document.

HTML

Most documents start with the html tag and end with the /html tag.

Head

Material in the head roughly corresponds to the title page of a document. The head and /head commands are used.

Body

The content of the document should appear between the body and /body tags.

Titles

Titles are used in the menu bar of the Web Browser window using title and /title. They are coded in the head.
   <head>
   <title>HTML Introduction</title>
   </head>
  

To see the above HTML code formatted in a separate Web browser window click here. Notice all this does is title the window.

Headings

Headings appear in the body of the document. There are 6 levels of headings available but only the first 3 are generally used. The heading tags are h1 /h1, h2 /h2, etc. The h1 heading is frequently the same as the title.

To see the above six heading tags of HTML code formatted in a separate Web browser window click here. Remember the WWW browser client determines how they will look.

Paragraphs

New paragraphs are started with the p tag. It does not require a closing tag, but you should enclose one for consistency.

Simple lists

Both numbered/ordered lists and bulletted lists are available, and they may be nested. An order list uses 3 tags: ol, li, and /ol. A bulletted list also uses three tags: ul, li, and /ul.

The ol or ul tag starts the list. The actual list items each have their own li tag. The list is terminated with the /ol or /ul tag.
List Example
```
<ol>
<li>This is item one.
<li>This is item two.
</ol>
 
```
To see the above ordered list HTML code formatted in a separate Web browser window click here.
To see the above list displayed as a bulletted list in a separate Web browser window click here.

Definition lists

A definition list consists of a term and its definition. The dl, dt, dd, and /dl tags are used.

To see the definition list of HTML code below formatted in a separate Web browser window click here.

     <dl>
     <dt>WWW
     <dd>The World Wide Web
     <dt>Netscape, Internet Explorer, Mosaic
     <dd>World Wide Web browsers
     </dl>

Character formatting

Words and characters may be highlighted using

bolding (b /b)

italics (i /i)

underlining (u /u)

a fixed pitch font (code /code or tt /tt)

Remember, these may be combined, but cannot be overlapped.

Force a New Line

Text can be forced to a new line with the br tag. It does not have a closing tag.

Preformatted Text

The WWW client determines the display fonts used. If you have material that must be displayed using a uniform font (an "m" takes the same amount of space as an "i") you can enclose the text in the pre /pre tags. This is useful for tables or programming language source code. Other tags may be used inside the pre /pre tags but results are not always predictable. It is best to get the text lined up correctly and then add the other tags.

Horizontal lines

You can add a horizontal line to the document with the hr tag.

Adding Pictures Inline

Images are added to a document with the img tag, (like the U.S. icon at the right). It is a little more complicated than the text tags discussed so far.
<img align=top src="name_of_image_file.gif" alt="no picture">

src

this is the url of the graphic.

align

top, middle, or bottom. This relates to how the text and graph align. Optional.

alt

this text displays if the graphic is not found. Optional.

Adding Document Links

There are two types of document links:

Inter-document Links

Anchors (intra-document) links

Inter-document Links
Inter-document links are hyper-links between different documents on the WWW. These are created with the a and the /a tag pair.
     <a href="http://machine/directory/file.html">
     followed by text that is clickable
     </a> 
      
      
To see an example of very similar HTML code above formatted in a separate Web browser window click here.
These links are not limited to text. Gopher or FTP could replace the http above and that type of connection would then be made.

Note that while HTML tags are case insensitive many server operating systems are not, (e.g., UNIX, Mac OS, etc.). Thus file names embedded in links should be identical to the file name as it will be stored on the WWW server machine.

Anchor Links

Anchor links are intra-document hyper-links within the same document on the WWW. These are also created with the a and the /a tag pair.
     <a href="#anchorName">
     followed by text that is clickable
     </a> 
      
   

The named anchor must be created in the current document using the name option of the a /a tag.

<a name="anchorName">
followed by the anchor text that the anchor links to 
</a>

External Graphics, Sounds or Movies

Physically embedding large files (images, sounds, movies) can drastically increase the transfer time of documents across the net. The solution to this is to include links to the large files in your html document. The method is the same as described previously for adding document links, except that the file.html is replaced by file.ext. The .ext extension is replaced by the appropriate extension for the file type (e.g., .gif or .jpg, .au or .aiff, .mov, .mpeg or .mpg). It is the reader's responsibility to have their WWW browser configured with the appropriate helper application that can read and process the file format.

Tables

Tables can be used to present data in rows and columns. Tables may have captions/titles at the top or bottom. In addition, there can be column headings. Tables are enclosed in the TABLE tags. Other tags include the CAPTION, TH (column heading), TR (table row), and TD (cell definition) tags.

Here is a sample table

Column 1 Heading

Column 2 Heading

Cell 1,1

Cell 1,2

Cell 2,1

Cell 2,2

Cell 3,1

Cell ??

Column 1 Heading	Column 2 Heading
Cell 1,1	Cell 1,2
Cell 2,1	Cell 2,2
Cell 3,1
Cell ??

and the HTML that created it.

     <TABLE border>
     <CAPTION> My Table Caption </CAPTION>
   

     <TR>
     <TH> Column 1 Heading</TH>
     <TH> Column 2 Heading</TH>
     </TR>
   

     <TR>
     <TD> Cell 1,1 </TD>
     <TD> Cell 1,2 </TD>
     </TR>
     <TR>
     <TD ALIGN=CENTER> Cell 2,1 </TD>
     <TD ALIGN=RIGHT> Cell 2,2 </TD>
     </TR>
     <TR>
     <TD > Cell 3,1 </TD>
     </TR>
     <TR>
     <TD COLSPAN=2> Cell ?? </TD>
     </TR>
     </TABLE>

HTML and Netscape (optional)
Netscape HTML Editing Tutorials