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) List | Displayed in the browser as: |
<OL> <LI>Open the door. <LI>Walk out. </OL> |
|
| Unordered (Bulleted) List | Displayed in the browser as: |
<UL> <LI>Milk <LI>Bread </UL> |
|
| Definition List | Displayed 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> |
|
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/">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> 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 |
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> |
| 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.
| Entity | HTML | Rendered |
|---|---|---|
| Copyright | © | © |
| Ampersand | & | & |
| "Less Than" | < | < |
| "Greater Than" | > | > |
| Non-breaking Space | | [space] |
