Kaye and Geoff's web page documentation 

Introduction

In the tables which follow, each tag is shown in the left column with an indication of whether it requires termination. Its attributes are shown below it, indented, showing if the attribute needs a value. The second column has an example of the tag used in HTML and the third has a brief description of the tag's function.

This reference is not complete, since it does not derive from a single standard, because we have omitted most references to CSS, and because very rarely-used, fairly useless and badly supported tags and attributes have been omitted. For example id and class attributes are not mentioned as they are used only to identify elements to CSS code; in addition they would increase the length of the page for little benefit, since they are legal in all tags. However, all the commonly used tags and attributes are included. If you want the ultimate reference you must check out the official W3C page for the standard version which you want to work with.

Overall structure

<!doctype> <html> <head> ... </head> <body> ... </body> </html>

Tags that can be in the HEAD or BODY section

<script>...</script> src="..." type="..." <script src="file.js" type="text/javascript"> </script> Encloses script (usually Javascript) code or specifies the name of a file containing a script to be loaded
<noscript>...</noscript> <noscript> Javascript support required </noscript> Encloses HTML code to be rendered if the browser cannot process the script used
<!-- ... --> <!-- this is a comment --> Encloses a comment - can extend over multiple lines
<isindex> prompt="..." <isindex prompt="Enter your name:"> Primitive and rarely used precursor of forms

Tags that are used in the HEAD section

<title>...</title> <title>Seahorse exotic fish</title> A title displayed at the top of the browser window
<meta> name="..." http-equiv="..." content="..." <meta name="keywords" content="fish,marine,fresh-water"> Meta data: information about the page
<base> href="..." <base href="http://domain1.com/index.html"> A URL with which to dereference relative addresses in the document
<style>...</style> type="..." media="..." title="..." <style>h3 { color: red }</style> Contains or references a file containing style sheet information
<link> rel="..." type="..." title="..." href="..." <link rel="stylesheet type="text/css" href="http://style.com/ssheet"> References a file containing style sheet information

Tags that are used in the BODY section

<body>...</body> bgcolor="..." background="..." text="..." link="..." vlink="..." alink="..." <body background="bgfile.gif"> ... </body> Defines the HTML body and sets text colours and background
<br> clear="..." previous line<br>subsequent line Take a new line
<p> or <p>...</p> align="..." previous para<p>subsequent para Take a new paragraph
<hr> width="..." size="..." align="..." noshade above line<hr>below line Horizontal dividing line
<blockquote>...</blockquote> <blockquote>text</blockquote> Text is indented from the left and right margins
<center>...</center> <center>centred text</center> Text is centred between the margins
<h1>...</h1> (major) to <h6>...</h6> (minor) align="..." <h1>Major heading</h1> <h3>Medium heading</h3> <h6>Minor heading</h6> Headings with decreasing importance
<b>...</b> <b>bold text</b> Bold text
<i>...</i> <i>italic text</i> Italic text
<u>...</u> <u>underlined text</u> Underlined text
<tt>...</tt> <tt>typewriter text</tt> Typewriter text (equal spaced serif font)
<blink>...</blink> <blink>blinking text</blink> Blinking text (not to be used, on pain of death)
<s>...</s> <strike>...</strike> <s>struck-out text</s> Struck-out text text
<basefont> size="..." <basefont size="+1"> Modify the basic font size of the whole document
<font>...</font> size="..." color="..." <font color="#0000ff"> blue text </font> Set text colour and size
<pre>...</pre> width="..." <pre>text with white space</pre> Honour white space and act on tags
<xmp>...</xmp> <xmp>text with tags</xmp> Display the text exactly as provided, ie. ignore tags
<div>...</div> align="..." <div align="left">text block</div> Mark off part of the page contents in a block
<span>...</span> align="..." <span>identified text</span> Mark off part of the page contents n-line
<object>...</object> type="..." data="..." <object data="pic.gif" type="image/gif">Bill's picture </object> Retrieve and "display" an object
<img> src="..." width="..." border"..." align"..." width"..." height"..." hspace"..." vspace"..." longdesc="..." ismap usemap="#..." alt="..." <img src="bill.gif" border="1" hspace="8" alt="picture of Bill"> Retrieve and display an image
<a>...</a> href="..." name="..." target="..." <a href="http://www.domain1.com/"> go to domain1 </a> Anchor (link) or target for a link
Lists
<li> or <li>...</li> type="..." <li>item in a list An item in a list
<ul>...</ul> type="..." <ul type="disk"> <li>item1 <li>item2 </ul> Unordered list (may be nested)
<ol>...</ol> type="..." value="..." <ol type="a"> <li>item1 <li>item2 </ol> Ordered list (may be nested)
<dt> or <dt>...</dt> <dt>confabulation Term in a definition list
<dd> or <dd>...</dd> <dd>discussion Definition in a definition list
<dl>...</dl> <dl> <dt>pyrotechnics <dd>fireworks </dl> Definition list (may be nested)
Forms
<form>...</form> action="..." name="..." method="..." target="..." <form action="mailto:bill@domain1.com" method="post"> ... </form> Defines a form, used to accept input from the person viewing the page
<input> type="..." value="..." size="..." name="..." maxlength="..." src="..." usemap="..." tabindex="..." alt="..." checked <input type="password" name="pw" value=""> Input field, type specified by the 'type' attribute
<select>...</select> size="..." name="..." multiple <select name="favourites"> ... </select> Selection box, items are defined with option tags
<option> value="..." name="..." selected <option value="frogs">frogs Item in a selection box
<textarea>...</textarea> name="..." tabindex="..." rows="..." cols="..." tabindex="..." <textarea name="box1" rows="4" cols="60"> </textarea> Text area box for multi-line input
<button>...</button> value="..." name="..." type="..." tabindex="..." <button type="submit"> Push to submit form </button> Button
Tables
<table>...</table> width="..." cellspacing="..." cellpadding="..." align="..." border="..." <table border="1">...</table> Table specification
<caption>...</caption> align="..." <table width="100%"> <caption>...</caption> </table> Table caption placed above or below the table (must be inside table tags)
<thead>...</thead> <table border="0"> <thead>...</thead> </table> Group table rows into a header (must be inside table tags)
<tbody>...</tbody> <table cellpadding="8"> <tbody>...</tbody> </table> Group table rows into a body (must be inside table tags)
<tfoot>...</tfoot> <table width="100%"> <tfoot>...</tfoot> </table> Group table rows into a footer (must be inside table tags)
<tr>...</tr> <table width="400"> <tr>...</tr> </table> Table row specification (must be inside table tags)
<th>...</th> <table cellspacing="0"> <th>...</th> </table> Table heading row specification (must be inside table tags)
<td>...</td> bgcolor="..." align="..." valign="..." colspan="..." rowspan="..." width="..." height="..." nowrap <table border="1"> <tr> <td valign="top">...</td> </tr> </table> Table cell specification (must be inside table row tags)
Clickable maps
<map>...</map> name="..." <map name="tas">...</map> Define a clickable map
<area> coords="..." href="..." shape="..." target="..." nohref alt="..." <area shape="rect" coords="20,30,80,90" href="tamar.html"> Define an active area on a clickable map

Tags that are used with FRAMES

<frameset>...</frameset> rows="..." cols="..." title="..." <frameset rows="90,*">...</frameset> Defines a set of frames - can be nested
<frame> longdesc="..." name="..." src="..." frameborder="..." marginwidth="..." marginheight="..." scrolling="..." noresize <frame name="top" src="top.html"> Defines a single frame - must be within a frameset block
<noframes>...</noframes> <noframes>You need frames</noframes> Contains HTML to be rendered if the browser cannot handle frames
<iframe>...</iframe> longdesc="..." name="..." src="..." frameborder="..." marginwidth="..." marginheight="..." scrolling="..." align="..." height="..." width="..." target="..." <iframe src="bill.html" align="right" frameborder="3" scrolling="auto" height="320" width="480"> HTML to display if not supported </iframe> Defines an inline frame

Top
Back
Index
Home