A Basic set of HTML Tags


 


Basic Structure Tags

* HTML
The very first tag in your document: <HTML> and the very last: </HTML>
* HEAD
The second tag in your document. Enclosed within the beginning tag: <HEAD> and the ending tag: </HEAD> is information about the document that will not display in the body of the document.
* TITLE
The document title, which is enclosed with a begin title tag: <TITLE> and an end title tag: </TITLE>, all of which is enclosed with the HEAD tags above. The title does not display as part of the document itself, but appears in the browser window title. It is also what is used to name your document in a bookmark list.
* BODY
The complete text of your document is wrapped by a begin body tag: <BODY> and an end body tag: </BODY>.

Example of basic document structure:

<HTML>
<HEAD>

<TITLE>your document title goes here</TITLE>

</HEAD>
<BODY>

your document text goes here

</BODY>
</HTML>

Formatting Tags

* Pre-Formatted Text
If you do not wish to completely markup a document, it is possible to wrap the document in a begin pre-formatted text tag: <PRE> and an end pre-formatted text tag: </PRE> which specifies to Web browsers that they should not change the apperance of the text. It will appear in a non-proportional font (Courier) and spaces, tabs, and blank lines are retained.
* Bold Text
To make text bold, surround it with the <B> begin tag and the </B> end tag.
* Italic Text
To make text italic, surround it with the <I> begin tag and the </I> end tag.
* Headings (H1...H6)
<H1>header text</H1> through <H6>header text</H6>. <H1> through <H3> are generally displayed by the browser as larger than normal text (and bold), <H4> is generally displayed as about the same size as normal text (but bold), while <H5> and <H6> are progressively smaller than normal text (but still bold).

Header Examples:

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6
* Paragraph
The paragraphs of your document should be enclosed with a begin paragraph tag: <P> and an end paragraph tag: </P>.
* Line Break
If you wish specify a line break without also having a blank line (which is what paragraph tagging would give you), use the <BR> tag which specifies a line break. Note that it does not have a begin and end tag; there is merely an instance of it when you wish to specify a line break.
* Horizontal Rule
A simple separator in the form of a line across the page (a "horizontal rule") can be obtained by placing the <HR> tag where you wish the line to occur. As in the case of the line break tag (<BR>) there is no begin or end, just an instance of it where you wish the line to appear.
* Lists
There are several ways to format a list:
* Ordered (Numbered) ListDisplayed in the browser as:


<OL>
<LI>Open the door.
<LI>Walk out.
</OL>
  1. Open the door.
  2. Walk out.
* Unordered (Bulleted) ListDisplayed in the browser as:


<UL>
<LI>Milk
<LI>Bread
</UL>
  • Milk
  • Bread
* Definition ListDisplayed in the browser as:


<DL>
<DT>The Library of Congress
<DD>Although the U.S. Library of Congress is not truly a "National Library", it nonetheless serves many of the roles that a national library plays in other countries.
<DT>The Digital Library Federation
<DD>This consortium of government agencies, major research libraries, and non-profit organizations, is working to create an interoperable digital library.
</DL>
The Library of Congress
Although the U.S. Library of Congress is not truly a "National Library", it nonetheless serves many of the roles that a national library plays in other countries.
The Digital Library Federation
This consortium of government agencies, major research libraries, and non-profit organizations, is working to create an interoperable digital library.

Linking & Image Tags

* Hypertext Linking To Another File
A link to another file. What is required to make the link work is a valid Uniform Resource Locator. For example, to make a link to the Library of Congress Web server, you could create the following HTML fragment:
There are many resources at the <A HREF="http://www.loc.gov/">
Library of Congress.</A>
Which is displayed in the browser as: There are many resources at the Library of Congress.
* Hypertext Linking Within the Same File
To make a link from one part of a document to another part of the same document, you must put the <A NAME> tag where you want the user to end up when they click on the highlighted text. For example, the HTML fragment below:
<A HREF="#Jump">Jump down to the word "Here"</A>

<P>[more text here]</P>

<A NAME="Jump">This is where you end up.</A>

Is rendered and works as:

Jump down to the word "Here"

[more text here]

This is where you end up.
* Images
To place an image on a page, use the <IMG> tag. The only required attibute is SRC, and the address (URL) of the image source file. But it is also useful to use the ALT attribute to specify text that should display in situations (such as when the user has autoload images off) when the image does not display. Other useful attributes include WIDTH and HEIGHT, with the value of the width and height of the image in pixels (dots). This allows the browser to allocate that space to the image while it displays the rest of the document. For example:
 <IMG ALT="A
picture of Olivia and Elena" WIDTH="210" HEIGHT="136"
SRC="http://www.sonic.net/~roy/girls96a.jpeg">

Embellishments

* Colored Background
You can specify a background color other than the default grey by using an attribute of the <BODY> tag that uses the hexadecimal equivalent of a color. For example:

<BODY BGCOLOR="#FFFFFF">


* Centering
Centering should always be achieved by an attribute setting of a given tag. For example:

To center a paragraph: <P ALIGN="CENTER>Your paragraph here.</P>
To center a Header: <H1 ALIGN="CENTER">Your Headline</H1>
To center anything else: <DIV ALIGN="CENTER">Whatever you want here, including other markup.</DIV>

* Font Control
Most browsers allow you to control aspects of the document font by using attributes of the <FONT> tag. For example:

<FONT SIZE="+2" FACE="Arial, Helvetica, san-serif" COLOR="red">Chapter One</FONT>

Size can either be relative -- the plus or minus sign followed by a number, or exact -- a number, with "3" being normal text and 1-2 being smaller and 4 and above being larger.

* Comments
Anything between the <!-- and the --> tag is ignored by the browser. Therefore, you can use this tag to add comments to your file. For example: <!-- Last edited by Roy Tennant, May 13, 1998 -->


Special Characters

Listed here are a few of the special characters most widely understood by Web browsers. Many more special characters are defined within the HTML 3.0 specification, but are not yet widely supported by Web browsers.

EntityHTMLRendered
Copyright&copy;©
Ampersand&amp;&
"Less Than"&lt;<
"Greater Than"&gt;>
Non-breaking Space&nbsp;[space]