Global Lab : Guide to HTML Tags

Resources Workspace Home Page Class Web Sites

Basic Page Tags
   <HTML></HTML>
   <HEAD></HEAD>
   <TITLE></TITLE>
   <BODY></BODY>

<BODY>Tag Attributes <BGCOLOR> <TEXT> <LINK> <VLINK> <ALINK>

Text Tags <B></B> <I></I> <TT></TT> <H1></H1> <H6></H6> <U></U> <PRE></PRE> <FONT></FONT> <FONT> Tag Attributes <FONT COLOR=?> <FONT SIZE=?> <FONT FACE=?,?,?> Link Tags <A HREF=?></A> <A HREF=MailTo:?> <A NAME=?></A> <A HREF=?></A> Page Formatting Tags <P></P> <BR></BR> <HR></HR> <CENTER></CENTER> <BLOCKQUOTE> <HR> Tag Attributes <HR WIDTH=?> <HR ALIGN=?> <HR NOSHADE> Image/Graphics Tag <IMG SRC=?> <IMG SRC> Tag Attributes <IMG SRC ALIGN=?> <IMG SRC BORDER=?> <IMG SRC WIDTH=?> <IMG SRC HEIGHT=?> <IMG SRC ALT=?> List Tags <UL></UL> <OL></OL> <LI> Basic Page Tags <HTML></HTML> <HEAD></HEAD> <TITLE></TITLE> <BODY></BODY> <BODY> Tag Attributes <BGCOLOR> <TEXT> <LINK> <VLINK> <ALINK> Text Tags <B></B> <I></I> <TT></TT> <H1></H1> <H6></H6> <U></U> <PRE></PRE> <FONT></FONT> <FONT> Tag Attributes <FONT COLOR=?> <FONT SIZE=?> <FONT FACE=?,?,?> Link Tags <A HREF=?></A> <A HREF=MailTo:?> <A NAME=?></A> <A HREF=?></A> Page Formatting Tags <P></P> <BR></BR> <HR></HR> <CENTER></CENTER> <BLOCKQUOTE> <HR> Tag Attributes <HR WIDTH=?> <HR ALIGN=?> <HR NOSHADE> Image/Graphics Tag <IMG SRC=?> <IMG SRC> Tag Attributes <IMG SRC ALIGN=?> <IMG SRC BORDER=?> <IMG SRC WIDTH=?> <IMG SRC HEIGHT=?> <IMG SRC ALT=?> List Tags <UL></UL> <OL></OL> <LI> Resources Workspace Home Page Class Web Sites

Global Lab
HTML Reference Guide

Some HTML Basics
All HTML tags are enclosed in `"<"` and `">"` brackets HTML tags are not case-sensitive: `<html>` & `<HTML>` are the same thing There are two basic types of HTML tags: paired or container tags that require a start and an end; such as the <B> tag, which makes all the text after it bold until there is a </B> closing tag; and tags that stand alone, such as the <BR> tag, which creates a line break. Some tags accepts attributes, so you can fine tune and customize your Web pages (e.g., adding a background color or making text bold). You do not have to indent, or even have line breaks, like the examples of code shown in this guide, but indentation does make your HTML code easier to read. If you see a page you like, use the `Document Source` Command (also called `View Source`, in your Web browser, to look at the HTML code and learn how it was done.
Basic Page Tags
These are the tags that all pages need. All are container tags, which means the tags are used in pairs with an opening `<TAG>` and a corresponding closing `</TAG>`. Here is how these tags should be ordered on the page. You do not have to indent them, the way they are shown here, but doing so makes your code easier to read and helps you keep track of your opening and closing tags.
`<HTML> <HEAD> <TITLE>Title Goes Here</TITLE> </HEAD> <BODY> Content goes here... </BODY> </HTML>`
Here is what each tag does:
`<HTML></HTML>`	Sets the beginning and ending of your HTML document and encloses all the other tags.
`<HEAD></HEAD>`	Separates the title, and sometimes other data which is not shown on the page, from the content.
`<TITLE></TITLE>`	Contains the name (or title) of the page (the `<TITLE> & </TITLE>` tags go inside the `<HEAD> & </HEAD>` tags).
`<BODY></BODY>`	Contains the content of the page (e.g., headlines, images, text, links).
`<BODY>` Tag Attributes
Each of these attribute tags goes inside the opening `<BODY>` tag (e.g., `<BODY BGCOLOR="blue">`). More than one attribute tag can be used at a time.
`<BODY BGCOLOR=######>`	Sets the background color, using either a color name (e.g., "white") or a hexidecimal number representing the color (e.g., "ffffff").
`<BODY TEXT=######>`	Sets the default text color, using either a color name or hexidecimal number value.
`<BODY LINK=######>`	Sets the default link color, using either a color name or hexidecimal number value, for links that can be followed.
`<BODY VLINK=######>`	Sets the default visited link color, using either a color name or hexidecimal number value, for pages/sites already visited.
`<BODY ALINK=######>`	Sets the default active link color, using either a color name or hexidecimal number value, to create the link color during the mouse click.
Text Tags
These tags can be used anywhere in your HTML document to add attributes and formatting to your Web page.
`<B></B>`	Makes all the text contained within these tags bold.
`<I></I>`	Makes all the text contained within these tags italic.
`<TT></TT>`	Makes all the text contained within these tags `teletype` or typewriter font.
`<H1></H1>`	Creates the largest header font, usually used for the title of the page.
`<H6></H6>`	Creates the smallest header font, with H2 through H5 being the steps in between.
`<U></U>`	Makes all the text contained within these tags underlined.
`<PRE></PRE>`	Maintains formatting from word processing documents (e.g., line breaks, tags).
`<FONT></FONT>`	Assigns font attributes to all the text contained within these tags.
`<FONT>` Tag Attributes
Each of these attribute tags goes inside the opening `<FONT>` tag (e.g., `<FONT COLOR="blue">`). More than one attribute tag can be used at a time.
`<FONT COLOR="######">`	Sets the font color, using either a color name (e.g., "blue") or a hexidecimal number representing the color (e.g., "330066")
`<FONT SIZE="#">`	Sets the font size, using either a positive number (for a larger than normal font) or a negative number (for a smaller than normal font).
`<FONT FACE=(FaceNameOne, FaceNameTwo)>`	Changes the default typeface, Times, to the selected typeface, but is dependent on that typeface being on the visitor's computer. More than one typeface name can be used, if they are separated by commas (e.g., Helvetica, Arial, Chicago).
Link Tags
Link tags allow you to make connections between Web pages, or even Web sites.
`<A HREF="URL/WebAddress"> Link Name Here</A>`	Creates a link, with the Link Name Here text becoming the clickable area.
`<A HREF="MAILTO:Email"> Link Name Here</A>`	Creates a link to an e-mail account, with the Link Name Here text becoming the clickable area.
`<A NAME="LinkName"></A>`	Creates a target within a document, which can be used for marking footnotes or definitions.
`<A HREF="#LinkName"></A>`	Creates the link to the target (see above) from another place on your Web page.
Page Formatting Tags
These tags allow you to control the look and feel of your Web page. These are a mix of individual tags and container tags.
`<P>`	Separates two blocks of text into two paragraphs; can be used with or without the `</P>` closing tag.
`<BR>`	Inserts a line break to create a new line.
`<HR>`	Inserts a horizontal rule as a graphic element and will accept attributes (see below)
`<CENTER></CENTER>`	Centers everything (text, graphics, links) contained within it.
`<BLOCKQUOTE></BLOCKQUOTE>`	Creates text blocks which indent text from both the left and the right sides.
`<HR>` Tag Attributes
Each of these attribute tags goes inside the `<HR>` tag (e.g., `<HR WIDTH="75%">`). More than one attribute tag can be used at a time.
`<HR WIDTH="##%">`	Sets the width of the horizontal rule, using either the absolute number of pixels wide or a percentage of the browser window (e.g., WIDTH="50%").
`<HR ALIGN="direction">`	Sets the alignment of the horizontal rule to left, right or center (e.g., ALIGN="center").
`<HR NOSHADE>`	Changes the default appearance of the horizontal rule from a shadow to a solid black line.
Image/Graphics Tag
`<IMG SRC="ImageName">`	Adds a graphic or image to your Web page.
`<IMG SRC>` Tag Attributes
Each of these attribute tags goes inside the `<IMG SRC>` tag (e.g., `<IMG SRC="ImageName" ALT="Some Text">`). More than one attribute tag can be used at a time.
`<IMG SRC="ImageName" ALIGN="direction">`	Aligns the image to the left, right, or center — horizontally — and bottom, top or middle — vertically
`<IMG SRC="ImageName" BORDER="3">`	Sets the size of the border around the image, starting at "0" (no border).
`<IMG SRC="ImageName" WIDTH="##">`	Sets the width of the image to an absolute pixel size; should always be used together with the <HEIGHT> attribute.
`<IMG SRC="ImageName" HEIGHT="##">`	Sets the height of the image to an absolute pixel size; should always be used together with the <WIDTH> attribute.
`<IMG SRC="ImageName" ALT="Some Text">`	Gives information on the image to text-only browsers, and generally loads before the image on slower connections.
List Tags
The list tags are used to create numbered, or just outline-style indented, lists of data.
`<UL></UL>`	Creates an unordered bulleted list.
`<OL></OL>`	Creates a numbered list.
`<LI>`	Goes before each item in an ordered or unordered list, and creates the bullet or number; has no closing tag.
Other Tags and Additional Information
`<TABLE>, <FRAMESET>,` and `<FORM>` are three powerful sets of tags in HTML, but are too complex for this simple guide. Many helpful, thorough tutorials are available online for these and other more advanced features of HTML. See the Web Resources Page for additional information and links to helpful sites.