HTML Quick Reference Guide

   

(ITCP)

Spinning the Web
Andrew Ford
1-850-32141-8

The WorldWideWeb Handbook
Peter Flynn
1-850-32205-8


Simple rules of HTML

Elements marked here with a pilcrow (¶) are in HTML3 (additions to or changes from HTML 2.0, RFC 1866) and may not yet be supported by all browsers: elements marked with an asterisk (*) are obsolescent or deprecated. Optional attributes are given in [square brackets]. The full Document Type Descriptions (DTDs) of HTML 2.0 and HTML3 can be found at http://www.w3.org/hypertext/WWW/MarkUp/.

All structural elements can have class (for styles), lang, id, clear (for positioning), and background attributes. Heading and list-oriented elements can have seqnum, dingbat, src, and nowrap. The align attribute can be used to affect visual positioning (eg align="center").

Sample document

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN"> 
<html>
  <head> 
    <!-- A sample document --> 
    <title>Document title</title> 
    <link rev="made" href="mailto:info@itpuk.co.uk"
     rel="publisher" title="Publisher"> 
  </head>
  <body> 
    <h1>Top-level heading</h1> 
    <p>First paragraph of text.</p> 
    <ul> <!-- A bulleted list --> 
      <li><p>First list item</p></li> 
      <li><p>Second list item, with a hypertext 
          <a href="info.html">link<a> to another
          file.</p></li> 
    </ul>
    <h2>Second-level heading</h2>
    <p>Another paragraph, <img alt="Picture of me" 
       align="bottom" src="mypic.gif">  with an
       illustration.</p> 
  </body>
</html> 

Header elements

<title>...</title>

Compulsory document title (not part of the text), recommended maximum length 64 characters

<link ...>

Relationships for the document as a whole: common attributes are rel, rev, href

<base href="url">

Default structure for any partial (incomplete) URLs in the document

<isindex>

Identifies document as a script which handles processing (eg searches)

<meta ...>

Embed meta-information as if given by the server: attributes http-equiv, name, content

<range from="id" until="id">

Specifies a portion of the document needing special treatment; from and until are identified using <spot>

<style notation="CSS" href="url">

Identifies the notation used in an associated style sheet or in style attributes in the text.

Section headings

<hn>...</hn>

Section headings, six levels available <h1> to <h6>. May occur only between paragraphs, not within them.

<div class="...">

Encloses a whole identifiable division (section, subsection etc) along with its heading.

Block-oriented elements

<p>...</p>

Paragraphs of regular text

<address>...</address>

Address information blocks

<blockquote>...</blockquote> (and ¶ <bq>)

Block quotations (must contain paragraphs or other structural markup)

<banner>...</banner>

Encloses static information to remain on display

<note role="...">...</note>

Identifies footnotes, sidenotes etc

<pre>...</pre>

Preformatted text (fixed-width characters; may also contain in-line markup)

<hr>

Horizontal rule

Lists, <form> and <table>

See below

<fig src="url">

Encloses floating figures, giving image reference, with optional <caption> and <credit>

<math>

Still under development

Lists

<lh>...</lh>

List header

<ol>...</ol>

Ordered lists, items numbered consecutively

<ul>...</ul>

Unordered lists, items bulleted

<li>...</li>

List items within ordered and unordered lists (must contain paragraphs or other structural markup)

<dl>...</dl>

Definition lists

<dt>...</dt>

Definition term in a definition list

<dd>...</dd>

Definition discussion in a definition list (must contain paragraphs or other structural markup)

All lists may be nested. The <ol>, <ul>, and <dl> elements may have a compact attribute.

Inline elements

Logical markup

<abbrev>...</abbrev>

Identifies an abbreviation

<acronym>...</acronym>

Identifies an acronym

<au>...</au>

Authors' names

<cite>...</cite>

Citations, such as literary references or product names

<code>...</code>

Fragments of computer code

<del>...</del>

Marks text as having been deleted but kept for reference purposes

<dfn>...</dfn>

A defining instance (usually indexable)

<em>...</em>

Emphasis, often rendered in italics

<ins>...</ins>

Marks new text inserted

<kbd>...</kbd>

Specific keyboard input

<lang>...</lang>

Identifies a language other than the basic one of the document

<person>...</person>

Personal names

<q>...</q>

Encloses quoted speech (browsers should add quotes automatically, according to language in use)

<samp>...</samp>

Samples of literal characters (such as user input)

<s>...</s>

Strikeout (such as in legal work) replaces <strike>

<spot id="label">

Marks a reference point for <range>

<strong>...</strong>

Strong emphasis, usually rendered in bold

<sub align="...">...</sub>

Subscripts

<sup align="...">...</sup>

Superscripts

<var>...</var>

Computer or other variable names

Visual markup

<b>...</b>

Bold type

<big>...</big>

Designates bigger text

<br>

Forced
linebreak

<i>...</i>

Italic type

<small>...</small>

Designates smaller text

<tabstop id="label">

Sets tab stop at current location

<tab to="label">

Tabs to the labelled position

<tt>...</tt>

Typewriter type

<u>...</u> *

Underlined

Hypertext links

May occur anywhere inline markup is valid.

<a href="url">...</a>

Link to another document or resource

<a href="url#label">...</a>

Link to a specific destination in another document

<a href="#label">...</a>

Link to a specific destination in the same document

<a id="label">...</a>

Labels the surrounded text as a target (destination). The use of name may continue to be honoured.

An <a> element may contain both href and name attributes.

Uniform Resource Locators (URLs)

These specify the location of a resource for a hypertext link:

http:

//

www.thomson.com:80/

catalog/

order.html

?searchterm
#location

one of...
http:
gopher:
ftp:
telnet:
mailto:
news:

Internet server hostname or IP address with optional port. Email address. Newsgroup name.

Path (directory or folder names)

Filename and filetype

Options:
? (searching) means the URL must be a script;
using a # location implies target label exists (see <a>.

Note mailto: and news: have no double slash.

Images

External images (those requiring a page to themselves) are specified with the <a> element as hypertext links. Inline images are specified with <img src="url" [align="..."] [alt="..."] [ismap|usemap]>...</img>. The value of align can be top, middle or bottom. The alt attribute provides text for non-graphical users and is strongly recommended.

A server-side image map is an <img> with ismap inside an <a> element pointing to a server map file:

      <a href="http://www.foo.bar/cgi-bin/imagemap/mypic">
      <img src="http://www.foo.bar/mypic.gif" alt="Image map" ismap>
      </a>

¶ Client-side image maps are done with a similar construction but using usemap instead, and providing the coordinates of hotspots with the <map> element:

      <img src="http://www.foo.bar/mypic.gif" alt="Image map" usemap="#mine">
      <map name="mine">
        <area name="circle" coords="20,30,..." href="url"<
      </map>

¶ Area names rect and polygon are also valid. The length of the coords value is limited to 1024 characters.

Forms

<form method="..." action="url">...</form>

The URL must reference a script unless it uses mailto:. The method is GET (for queries) or POST (for data collection). Within a form, input fields are defined with:

  • for multiline text input (surrounds prompting text):
    <textarea name="..." rows="n" cols="n">...</textarea>

  • for single-line input: <input name="..." type="..." [...]>
    The type can be one of text, checkbox, radio, hidden, password, reset, ¶ file, scribble, audio, or submit. Other attributes are align, checked, size, maxlength, src, and value. All <input> fields of a radio or checkbox group must have the same name.

  • for menus: <select name="..." [multiple]>...</select>
    Options are given with <option [value="..."]>...[</option>] within the <select>...</select>. Individual options can have an attribute of selected or disabled. If no value is given, the element content is used.

Example form

  <hr>
    <form method="GET" action="http://www.ucc.ie/cgi-bin/uncgi/formtest">
      <p>Name: <input name="name" type="text" size="20"><br>
         Operating system: <select name="opsys">
        <option>Unix<option>Windows<option>Mac<option>DOS<option></select></p>
      <p><textarea name="comments" rows="4" columns="40"> 
         Please write your comments here...</textarea></p>
      <p><input type="submit"> <input type="reset"></p>
    </form> 
  <hr>

Name:
Operating system:

Tables

<table [frame="..."] [border]>...</table>

Defines a table

<caption>...</caption>

Supplies a caption

<thead>, <tbody> (compulsory), and <tfoot>

Enclose table header, body and foot

<tr>...</tr>

Encloses a table row

<th>...</th>

Encloses a column or row header inside a row

<td [colspan=x] [rowspan=x]>...</td>

Encloses table data (a cell value or structural markup: be careful of mixed content)

<table frame="border">
  <caption>Table 1. Survey Frame</caption> 
  <tbody>
    <tr><th><p>Item</th><th><p>Quantity</th></tr>
    <tr><td align="left"><p>Population</td><td align="right"><p>384,000</td></tr>
    <tr><td align="left"><p>Sample</td><td align="right"><p>384</td></tr>
  </tbody>
</table>
Table 1: Survey Frame

Item

Quantity

Population

384,000

Sample

384


Special characters

ISO Latin-1 characters

&Agrave;  À  capital A, grave accent      &iuml;    ï  small i, diæresis/umlaut   
&agrave;  à  small a, grave accent        &ETH;     Ð  capital Eth, Icelandic
&Aacute;  Á  capital A, acute accent      &eth;     ð  small eth, Icelandic
&aacute;  á  small a, acute accent        &Ntilde;  Ñ  capital N, tilde        
&Acirc;   Â  capital A, circumflex        &ntilde;  ñ  small n, tilde               
&acirc;   â  small a, circumflex          &Ograve;  Ò  capital O, grave accent      
&Atilde;  Ã  capital A, tilde             &ograve;  ò  small o, grave accent             
&atilde;  ã  small a, tilde               &Oacute;  Ó  capital O, acute accent      
&Auml;    Ä  capital A, diæresis/umlaut   &oacute;  ó  small o, acute accent        
&auml;    ä  small a, diæresis/umlaut     &Ocirc;   Ô  capital O, circumflex   
&Aring;   Å  capital A, ring              &ocirc;   ô  small o, circumflex            
&aring;   å  small a, ring                &Otilde;  Õ  capital O, tilde             
&AElig;   Æ  capital AE ligature          &otilde;  õ  small o, tilde               
&aelig;   æ  small ae ligature            &Ouml;    Ö  capital O, diæresis/umlaut 
&Ccedil;  Ç  capital C, cedilla           &ouml;    ö  small o, diæresis/umlaut   
&ccedil;  ç  small c, cedilla             &Oslash;  Ø  capital O, slash                   
&Egrave;  È  capital E, grave accent      &oslash;  ø  small o, slash          
&egrave;  è  small e, grave accent        &Ugrave;  Ù  capital U, grave accent           
&Eacute;  É  capital E, acute accent      &ugrave;  ù  small u, grave accent        
&eacute;  é  small e, acute accent        &Uacute;  Ú  capital U, acute accent      
&Ecirc;   Ê  capital E, circumflex        &uacute;  ú  small u, acute accent        
&ecirc;   ê  small e, circumflex          &Ucirc;   Û  capital U, circumflex          
&Euml;    Ë  capital E, diæresis/umlaut   &ucirc;   û  small u, circumflex            
&euml;    ë  small e, diæresis/umlaut     &Uuml;    Ü  capital U, diæresis/umlaut 
&Igrave;  Ì  capital I, grave accent      &uuml;    ü  small u, diæresis/umlaut      
&igrave;  ì  small i, grave accent        &Yacute;  Ý  capital Y, acute accent      
&Iacute;  Í  capital I, acute accent      &yacute;  ý  small y, acute accent        
&iacute;  í  small i, acute accent        &THORN;   Þ  capital Thorn, Icelandic       
&Icirc;   Î  capital I, circumflex        &thorn;   þ  small thorn, Icelandic         
&icirc;   î  small i, circumflex          &szlig;   ß  small sharp s, German sz           
&Iuml;    Ï  capital I, diæresis/umlaut   &yuml;    ÿ  small y, diæresis/umlaut

¶ Mathematics

<math [model="..."]>...</math>

Encloses a formula

<box>...</box>

Surrounds symbols to be treated as a whole, optional delim attribute

<over> and <atop>

Separate lined and unlined fractions

<above>...</above>

Identifies numerator

<below>...</below>

Identifies denominator

<root root="n">

Root, degree specified as n

<array>...</array>

LaTeX-like arrays

<arow>...</arow>

Row within an array

<item>...</item>

Item within a row in an array

To minimize typing, <sub> and <sup> tags can be replaced with the underscore (_) and caret (^) respectively, and <box> tags can be replaced with {curly braces}, e.g. E=mc^2^

Additional characters from ISO 8859-1

&#160; &nbsp;     non-breaking space          &#177; &plusmn; ± plus-or-minus sign          
&#161; &iexcl;  ¡ inverted exclamation mark   &#178; &sup2;   ² superscript two          
&#162; &cent;   ¢ cent sign                   &#179; &sup3;   ³ superscript three        
&#163; &pound;  £ pound sign                  &#180; &acute;  ´ acute accent             
&#164; &curren; ¤ general currency sign       &#181; &micro;  µ micro sign                
&#165; &yen;    ¥ yen sign                    &#182; &para;   ¶ pilcrow (paragraph sign) 
&#166; &brvbar; ¦ broken (vertical) bar       &#183; &middot; · middle dot               
&#167; &sect;   § section sign                &#184; &cedil;  ¸ cedilla                  
&#168; &uml;    ¨ umlaut/dieresis             &#185; &sup1;   ¹ superscript one          
&#169; &copy;   © copyright sign              &#186; &ordm;   º ordinal indicator, male  
&#170; &ordf;   ª ordinal indicator, fem      &#187; &raquo;  » angle quotation mark, right   
&#171; &laquo;  « angle quotation mark, left  &#188; &frac14; ¼ fraction one-quarter          
&#172; &not;    ¬ not sign                    &#189; &frac12; ½ fraction one-half             
&#173; &shy;    ­ soft hyphen                 &#190; &frac34; ¾ fraction three-quarters       
&#174; &reg;    ® registered sign             &#191; &iquest; ¿ inverted question mark        
&#175; &macr;   ¯ macron                      &#215; &times;  × multiply sign                 
&#176; &deg;    ° degree sign                 &#247; &div;    ÷ division sign