Technology Group

BASIC HTML Quick Reference Guide

HTML is made up of a lot of different elements. Each element behaves differently from all the other HTML tags. Some of them are so straightforward that you only need to invoke them and they'll be used. Others require beginning and ending markers, and the element's behavior is applied to the enclosed text.

For those tags that do have attributes, most of them are optional. To use a specific attribute, you must include the attribute name, the equal sign (=), and the value to set it to. Invalid values are automatically ignored by most Web browsers. The assignment of attributes is done inside the starting marker of the particular HTML element that you want to use.

Every HTML document must be enclosed within the <HTML> starting marker and the </HTML> ending marker. Between these two markers is the actual Web page. The content of a particular HTML document is made up of head and body portions. The information for the head portion is enclosed within the <HEAD> and </HEAD> markers. The information for the body portion is enclosed within the <BODY> and </BODY> markers.

The following list is not intended to be a complete list of every HTML tag and its attributes. This is meant as a list of commonly used elements and their commonly used attributes.

Elements in the HEAD

<BASE>-This is used to indicate the default location of relative URL links. Common attributes:
HREF-Baseline URL for relative links.
TARGET-Indicates which window to display the destination hypertext link.
<ISINDEX>-This is used to indicate that the entire home page can be searched by keywords. There are no commonly used attributes.
<LINK>-This is used to specify relationships to other HTML documents. Commonly used attributes:
HREF-Destination URL to establish a relationship with.
REL-Indicates relationship with destination document.
REV-Used to verify a reversed relationship with destination document.
TITLE-The title for the destination URL.
<TITLE></TITLE>-You can specify the document's title with this element.

Elements in the BODY

The majority of tags are specified in within the BODY elements. Typically, anything contained inside the start and end markers will be displayed. The following sets of related elements are all available:

Text Elements

This group of tags is used to apply general attributes to a group of text. Typically, these elements are word wrapped by the browser.

<BLOCKQUOTE>[Text]</BLOCKQUOTE>-This will cause [Text] to be displayed as quoted text.
<P>[Text]</P>-The [Text] is treated as if it were an entire paragraph by itself. The [Text] will be word wrapped.
<PRE>[Text]</PRE>-The [Text] will be displayed as it is, but not in a proportional font. Use this if you've already had some text lined up in ASCII, such as in tables and grids. Commonly used attributes:
WIDTH-Maximum number of characters per line.

Hypertext Links

Hyperlinks are the underlying component of the Web.

<A>[Text]</A>-This defines that [Text] is a hypertext link. If the <IMG> element is used in place of [Text], the image will be hyperlinked. Common attributes:
HREF-URL to link to.
NAME-Defines the current line as a destination point. Destination points are accessed by specifying the pound sign (#) followed by the desired NAME.
TARGET-This indicates the name of the window to display the destination URL.
TITLE-The title of the destination URL.

Headers

Header elements are used to provide a consistent look for your document. There are no commonly used attributes for these elements

<H1>[Text]</H1>-[Text] is displayed in the most prominent header.
<H2>[Text]</H2>-[Text] is displayed in the second most prominent header.
<H3>[Text]</H3>-[Text] is displayed in the third most prominent header.
<H4>[Text]</H4>-[Text] is displayed in the third least prominent header.
<H5>[Text]</H5>-[Text] is displayed in the second least prominent header.
<H6>[Text]</H6>-[Text] is displayed in the least prominent header.

Logical Text

Logical style elements define attributes for a group of text. The text is automatically word wrapped by the browser.

<CITE>[Text]</CITE>-This tag is used to indicate that the [Text] is a citation.
<CODE>[Text]</CODE>-The [Text] is displayed as being computer source code.
<DFN>[Text]</DFN>-[Text] will be displayed as if it were a definition. There are no commonly used attributes.
<EM>[Text]</EM>-The [Text] is emphasized in some way. There are no commonly used attributes.
<KBD>[Text]</KBD>-This tag is used to display [Text] as something to be typed on the keyboard. There are no commonly used attributes.
<SAMP>[Text]</SAMP>-To display [Text] as a sampling of something, such as from an article, use this element. There are no commonly used attributes.
<STRONG>[Text]</STRONG>-This element displays the [Text] as more emphasized than <EM>. There are no commonly used attributes.
<VAR>[Text]</VAR>-This displays [Text] as some sort of variable, such as for formulas. There are no commonly used attributes.

Physical Styles

This group of HTML elements is used to affect the visual display of text. There are no commonly used attributes for these elements.

<B>[Text]</B>-[Text] will be made boldface.
<I>[Text]</I>-[Text] will be set in italics.
<TT>[Text]</TT>-[Text] will be made to look as though it came from a teletype.
<U>[Text]</U>-[Text] will be underlined.

Definition List

This list type allows you to present a dictionary-type presentation of a definition. The left hand side has the word, <DD>, and the right hand side has the definition, <DT>.

<DL>[Definitions]</DL>-This is the main container for a definition list. It has the following commonly used attributes:
ALIGN-Specifies that the text for the definitions is to be aligned center, justified, left, or right.
<DD>[Text]</DD>-This element is used to specify that [Text] is the definition portion of the definition list. It will be displayed on the right-hand side of the screen. There are no commonly used attributes.
<DT>[Text]</DT>-This element is used to specify that [Text] is the term portion of the definition list. It will be on the left-hand side of the screen. There are no commonly used attributes.

Unordered (Bulleted) List

You can create a list with a bullet in front of each item.

<UL>[List of items]</UL>-This presents [List of items] as an unordered (bulleted) list.
<LI>[Text]</LI>-[Text] will be an item in the list. There are no commonly used attributes.

Ordered (Numbered) List

You can create a list with a number in front of each item. The number is automatically added.

<OL>[List of items]</OL>-This presents [List of items] as an ordered (numbered) list.
<LI>[Text]</LI>-[Text] will be an item in the list. There are no commonly used attributes.

Directory List

You can create a list so that each item appears to be a list of files from a directory.

<DIR>[List of items]</DIR>-This presents [List of items] that appears to be a list of files from a directory.
<LI>[Text]</LI>-[Text] will be an item in the list. There are no commonly used attributes.

Graphics

Graphics can be inserted into your home page very easily.

<FIG></FIG>-This element is intended to replace the <IMG> tag. Commonly used attributes:
ALIGN-This attribute indicates how the picture will be aligned. It has a number of acceptable values: bleedleft, bleedright, center, justify, left, or right.
HEIGHT-This value indicates the height of the image.
SRC-This points to a URL that contains the graphic to use.
WIDTH-This value indicates the width of the image.
<IMG></IMG>-This element is used to put a GIF or JPEG graphic into your home page. It has the following commonly used attributes:
ALIGN-This attribute indicates how the picture will be aligned. It has a number of acceptable values: bleedleft, bleedright, center, justify, left, or right.
ALT-This string will be shown if the user doesn't have a graphical browser.
HEIGHT-This value indicates the height of the image.
ISMAP-This tells the Web browser that this graphic is an imagemap.
SRC-This points to a URL that contains the graphic to use.
WIDTH-This value indicates the width of the image.

Miscellaneous Tags

There are several unclassifiable, commonly used HTML tags.

<![Text]>-This element is completely ignored by the Web browser. The [Text] is treated as comments from the HTML author.
<ADDRESS>[Text]</ADDRESS>-This tag shows [Text] as an address of some sort. There are no commonly used attributes.

Special Characters

HTML allows for the insertion of any character defined in the ISO 8859-1 character set, into Web pages. These characters may not always be visible to all browsers, but they are defined as available entities. Table A lists all the special characters with their corresponding HTML code. If you want to put a particular character in your Web page, simply type in the entire string under the "HTML Code" heading. Some of the characters have two possible HTML codes, so simply use one of them. Be sure to include the ampersand (&) before the code, and the semi-colon (;) after the code.Table A-HTML Codes for ISO 8859-1 Characters

TABLE A

Description of Character	HTML Code	Example of Character
Quotation mark	"	"
Ampersand	&	&
Less-than sign	<	<
Greater-than sign	>	>
Non-breaking space
Inverted exclamation mark	¡	¡
Cent sign	¢	¢
Pound sterling	£	£
General currency sign	¤	¤
Yen sign	¥	¥
Broken vertical bar	¦ or &brkbar;	¦
Section sign	§	§
Umlaut (dieresis)	¨ or &die;	¨
Copyright	©	©
Feminine ordinal	ª	ª
Left angle quote (guillemotleft)	«	«
Not sign	¬	¬
Soft hyphen
Registered trademark	®	®
Macron accent	¯ or &hibar;	¯
Degree sign	°	°
Plus or minus	±	±
Superscript two	²	²
superscript three	³	³
Acute accent	´	´
Micro sign	µ	µ
Paragraph sign	¶	¶
Middle dot	·	·
Cedilla	¸	¸
Superscript one	¹	¹
Masculine ordinal	º	º
Right angle quote (guillemotright)	»	»
Fraction one-fourth	¼	¼
Fraction one-half	½	½
Fraction three-fourths	¾	¾
Inverted question mark	¿	¿
capital A, grave accent	À	À
Capital A, acute accent	Á	Á
Capital A, circumflex accent	Â	Â
Capital A, tilde	Ã	Ã
Capital A, umlaut (dieresis)	Ä	Ä
Capital A, ring	Å	Å
Capital AE, diphthong (ligature)	&Aelig;	&Aelig;
Capital C, cedilla	Ç	Ç
Capital E, grave accent	È	È
Capital E, acute accent	É	É
Capital E, circumflex accent	Ê	Ê
Capital E, umlaut (dieresis)	Ë	Ë
Capital I, grave accent	Ì	Ì
Capital I, acute accent	Í	Í
Capital I, circumflex accent	Î	Î
Capital I, umlaut (dieresis)	Ï	Ï
Capital Eth, Icelandic	Ðor &Dstrok;	Ð
Capital N, tilde	Ñ	Ñ
Capital O, grave accent	Ò	Ò
Capital O, acute accent	Ó	Ó
Capital O, circumflex accent	Ô	Ô
Capital O, tilde	Õ	Õ
Capital O, umlaut (dieresis)	Ö	Ö
Multiply sign	×	×
Capital O, slash	Ø	Ø
Capital U, grave accent	Ù	Ù
Capital U, acute accent	Ú	Ú
Capital U, circumflex accent	Û	Û
Capital U, umlaut (dieresis)	Ü	Ü
Capital Y, acute accent	Ý	Ý
Capital THORN, Icelandic	Þ	Þ
Small sharp s, German (sz ligature)	ß	ß
Small a, grave accent	à	à
Small a, acute accent	á	á
Small a, circumflex accent	â	â
Small a, tilde	ã	ã
Small a, umlaut (dieresis)	ä	ä
Small a, ring	å	å
Small ae diphthong (ligature)	æ	æ
Small c, cedilla	ç	ç
Small e, grave accent	è	è
Small e, acute accent	é	é
Small e, circumflex accent	ê	ê
Small e, umlaut (dieresis)	ë	ë
Small i, grave accent	ì	ì
Small i, acute accent	í	í
Small i, circumflex accent	î	î
Small i, umlaut (dieresis)	ï	ï
Small eth, Icelandic	ð	ð
Small n, tilde	ñ	ñ
Small o, grave accent	ò	ò
Small o, acute accent	ó	ó
Small o, circumflex accent	ô	ô
Small o, tilde	õ	õ
Small o, umlaut (dieresis)	ö	ö
Division sign	÷	÷
Small o, slash	ø	ø
Small u, grave accent	ù	ù
Small u, acute accent	ú	ú
Small u, circumflex accent	û	û
Small u, umlaut (dieresis)	ü	ü
Small y, acute accent	ý	ý
Small thorn, Icelandic	þ	þ
Small y, umlaut (dieresis)	ÿ	ÿ

Source: John Jung QUE