HTML Tag Reference

HTML 4.0 Tag Reference for INFSCI 0010

This is a list of the most commonly used HTML tags along with their most useful attributes. Students in INFSCI 0010 should be familiar with these tags/attributes, and you should be able to use them in marking up a web page.

BODY

IMAGE

Table Row/Data/Header

Forms & Input Controls

BODY

Tag/Attribute	Explanation	Example
<body> .....</body>	Includes the contents of the web document (e.g., text, images, etc.)	N/A
alink="color"	Specifies the color of active links	alink="red"
background="filename"	Filename of background image. Image is tiled to fill entire page.	background="/images/kittyCat.jpg"
bgcolor="color"	Specfies the background color for the page	bgcolor="green"
link="color"	Specifies the color of all links	link="blue"
text="color"	Specifies the color of....you guessed it	text="magenta"
vlink="color"	Specifies the color of visited links	vlink="orange"

IMAGE

Tag/Attribute	Explanation	Example
<img />	Specifies an image to be displayed. Other attributes specify how the image is displayed and its relationship with adjoining text.	N/A
src="ImageFilename"	The most important attribute. It specifies the filename of the image to display	src="/images/SmileyFace.jpg"
alt="Alternative image text"	Specifies the text to display if the image can't be displayed.	alt="My smiley face image :)"
align="left" or "right"	Aligns the image along either the left or right margin of the document. For left align, text wraps to right side of image.	align="right" (text wraps to left of image)
height="#pixels"	Specifies the height of the image in pixels	height="800"
width="#pixels"	Specifies the width of the image in pixels	width="600"
hspace="#pixels"	Specifies the amount of space between image and text (on both left & right sides of image)	hspace="10"
vspace="#pixels"	Specifies the amount of space between image and text (on both top & bottom of image)	vspace="10"

ANCHOR (Hyperlinks)

Tag/Attribute	Explanation	Example
<a .....</a>	Used to designate a link or bookmark.	N/A
href="url"	The url of the web page to load when the link is clicked.	<a href="www.myWebSite.com#Bio">Read my Bio!</a> To create a link for email use the following syntax <a href="mailto:gray@mail.sis.pitt.edu">
name="name"	Designates a bookmark in the document.	<a name="Bio" >My Bio</a>

Text Markup Tags

Tag/Attribute	Explanation	Example
<b>...</b>	Make text bold	N/A
<i>...</i>	Make text italic	N/A
<big>...</big>	Make text big	N/A
<small>...</small>	Make text small	N/A
<u>...</u>	Make text underlined	N/A

Definition List Tags

Tag/Attribute	Explanation	Example
<dl>...</dl>	Outer (i.e., enclosing) tag of a definition list	<dl> <dt>Serious Student <dd>Someone who studies more than 8 hours/day</dd> </dt> </dl> Serious Student Someone who studies more than 8 hours/day
<dt>...</dt>	Encloses the term to be defined. Nested within the <dl> tag.	See above
<dd>...</dd>	Encloses the definition of the term. Nested within the <dt> tag.	See above

Unordered List Tags

Tag/Attribute

Explanation

Example

Outer (i.e., enclosing) tag of an unordered list

<ul>
 <li>Serious Student</li>
 <li>Semi-serious Student>/li>
</ul>

Serious Student
Semi-serious Student

Encloses an individual list item. Nested within the <ul> tag.

See above

Ordered List Tags

Tag/Attribute

Explanation

Example

Outer (i.e., enclosing) tag of an ordered list

<ol>
 <li>Serious Student</li>
 <li>Semi-serious Student>/li>
</ol>

Serious Student
Semi-serious Student

Encloses an individual list item. Nested within the <ol> tag.

See above

Content Presentation Tags

Tag/Attribute	Explanation	Example
<address>...</address>	Used to format an address or signature on a document	<address> John Doe<br /> 123 Main St.<br /> Anytown, USA 12345 <br /> </address> John Doe 123 Main St. Anytown, USA 12345
<blockquote>...</blockquote>	Used to format a lengthy quotation in a document	The following is a quote... <blockquote> This is a long quote....this is a long quote... This is a long quote....This is a long quote.... </blockquote> This following is a quote... This is a long quote...This is a long quote... This is a long quote...This is a long quote...
<br />	Forces a line break in a document. Does not have a closing tag.	Here is a line <br /> break in some text Here is a line break in some text
<hn>...</hn>	Format the intervening text as a header where 'n' is 1 (biggest) to 8 (smallest)	<h1>Header size 1</h1> <h8>Header size 8</h8> Header size 1 Header size 8
<hr /> Attributes... align="left", "center" or "right" width="xx%" color="color" size="thickness" (in pixels)	The horizontal rule tag draws a horizontal line across the document	This text is separated <hr /> by a horizontal line This text is separated by a horizontal line
<p>...</p>	The paragraph tag defines beginning and end of a paragraph and inserts extra line after end of paragraph	<p>This is paragraph 1.</p> <p>This is paragraph 2.</p> This is paragraph 1. This is paragraph 2.
<pre>...</pre>	The preformat tag preserves the spaces and line breaks in the text	<pre>Here is some preformatted text that should look very similar when viewed in a browser</pre> Here is some preformatted text that should look very similar when viewed in a browser

TABLE

Tag/Attribute

Explanation

Example

The outermost tag for a table. Several attributes are used to specify table-wide characteristics (e.g. width). A table is composed of rows (the <tr> tag> Each row is composed of individual cells (the <td> tag).

    <table border="3" width="50%" bordercolor="red">
     <tr>
      <th>Header 1</th>
      <th>Header 2</th>
     </tr>
     <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
     </tr>
     <tr>
      <td>Cell 3</td>
      <td>Cell 4</td>
     </tr>
    </table>

Header 1	Header 2
Cell 1	Cell 2
Cell 3	Cell 4

Here is this table in a separate file so you can experiment with changing various tag atttributes

align="left" or "center" or "right"

Specifies horizontal position of table.

N/A

background & bgcolor

Has the same effect as for the Body tag (see above)

N/A

border="#pixels"

Draws a border around the table and each cell. Thickness determined by pixel value.

See example table above

bordercolor="color"

Specifies the color of a table border

N/A

width="#pixels" or "xx%"

Specifies the width of the table in pixels or as a percentage of page width

width="600"

cellpadding="#pixels" or "xx%"

Specifies the amount of space between a cell wall and its contents

cellpadding="10"

cellspacing="#pixels" or "xx%"

Specifies the amount of space between adjacent cells

cellspacing="10"

hspace & vspace

Same as for image tag. Determines amount of space between table and adjacent text.

N/A

TABLE ROW, TABLE DATA & TABLE HEADER

Tag/Attribute	Explanation	Example
<tr>...</tr> <td>...</td> <th>...</th>	The table row tag delimits a single row that contains table cells. Each cell is delimited by a table data tag. Most of the common attributes apply to both tags. A Common use of the header tag is to make the first row a header for the table.	See the sample table above
align="left" or "center" or "right"	Specifies horizontal position of text in a row or individual cell.	N/A
bgcolor	Has the same effect as for the Body tag (see above)	N/A
bordercolor="color"	Specifies the color of a table border	N/A
valign="top" or "middle" or "bottom" or "baseline"	Specifies vertical alignment of text for a row or individual cell.	N/A
width="#pixels" or "xx%"	For table data and table header tags only. Specifies the width of a cell in pixels or as a percentage	width="600"

Miscellaneous Info

Item	Explanation	Example
<!-- -->	The comment tag causes the browser to ignore anything within the commented section	N/A
Colors	HTML offers 16 predefined colors	silver, gray, maroon, green navy, purple, olive, teal white, black, red, lime blue, magenta, yellow, cyan

Forms & Input controls

Item

Explanation

Example

name="formName" (required)

The form tag encloses input controls. It's used to structure a simple GUI for input/output on a webpage. Usually enclosed within a table.

It is very important to give each form a name so that each control in the form can be accessed by your javaScript. Each control must also be named.

     
     <form name="ioForm">
      <table align="center" border="2" bordercolor="red"
                cellpadding="10">
       <tr>
        <th>Input/Output Form</th>
       </tr>
       <tr>
        <td>Input: "2 non-break spaces" <input type="text" 
                  name="input" size="8" value="" /> </td>
       </tr>
       <tr>
        <td>Output: <input type="text" name="output"
                  size="8" value="" /> </td>
       </tr>
       <tr>
        <td> <input type="button" value="Calculate"
                   onclick="put javaScript here"/> </td>  
       </tr>
      </table>
     </form>

name="inputControlName" (required)

type="text" or "button"

value="initialValue" (for a button, its the button's label)

size="widthInNumberOfSpaces" (text type only)

The input tag is used to add a HTML control to a form

Text type inputs are textfields useful for entering input or displaying output

The button type displays a button with a label that can be clicked with a mouse.

Refer to form example above

HTML 4.0 Tag Reference for INFSCI 0010

Header size 1