HTML Quick Reference Guide (ITCP)


This card appears in printed form in Spinning the Web (1-850-32141-8) by Andrew Ford, and The WorldWideWeb Handbook (1-850-32205-8) by Peter Flynn, both published by International Thomson Computer Press.


Elements marked with a pilcrow (¶) are not in HTML 2.0 but are supported by browsers: elements marked with an asterisk (*) are obsolescent. Optional attributes are given in [square brackets]. The full DTD can be found at http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html.

Sample document

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> 
<html>
  <head> 
    <!-- A sample document --> 
    <title>Document title</title> 
    <link rev="made" href="mailto:info@itpuk.co.uk"> 
  </head>
  <body> 
    <h1>Top-level heading</h1> 
    <p>First paragraph of text.</p> 
    <ul> <!-- A bulleted list --> 
      <li>First list item</li> 
      <li>Second list item, with a hypertext 
          <a href="info.html">link<a> to another
          file.</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>
Document running title (not part of the text), recommended maximum length 64 characters
<link ...>
Relationships for the document as a whole: attributes rel, rev, href
<base href="url">
Defines the default structure for any partial (incomplete) URLs in the document
<isindex>
Document is a script which handles searches
<meta ...>
Embed meta-information for the server: attributes http-equiv, name, content
<nextid n="id">
Editor assigns next identifier to be generated

Section headings

<hn>...</hn>
Section headings, six levels available <h1> to <h6>

Block-oriented elements

<p>...</p>
Paragraphs of regular text
<address>...</address>
Address information
<blockquote>...</blockquote>
Block quotations (may contain paragraphs)
<pre>...</pre>
Preformatted text (fixed-width characters)
<hr>
Horizontal rule

Lists

<ol>...</ol>
Ordered lists, items numbered consecutively
<ul>...</ul>
Unordered lists, items bulleted
<menu>...</menu>
Menu lists
<dir>...</dir>
Directory lists
<li>...</li>
List items within ordered, unordered, menu, and directory lists
<dl>...</dl>
Definition lists
<dt>...</dt>
Definition term in a definition list
<dd>...</dd>
Definition discussion in a definition list, may contain other block-oriented elements

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

Inline elements

Logical markup

<cite>...</cite>
Citations
<code>...</code>
Computer code
<dfn>...</dfn> *
Defining instance (see HTML3)
<em>...</em>
Emphasis
<kbd>...</kbd>
Keyboard input
<samp>...</samp>
Literal characters
<strike>...</strike> *
Strikeout (see HTML3)
<strong>...</strong>
Strong emphasis
<var>...</var>
Variable name

Visual markup

<b>...</b>
Bold type
<br>
Forced
linebreak
<i>...</i>
Italic type
<tt>...</tt>
Typewriter type
<u>...</u> *
Underlined

Hypertext links

<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 name="label">...</a>
Labels the surrounded text as a target destination

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
one of...                                       #location
    http:  Internet server      dir   filename  options:
  gopher:  hostname or IP       name            searching means
     ftp:   address with                        URL must be a
  telnet:   optional port.                      script; using a
  mailto:   Email address.                      location implies
    news:  Newsgroup name.                      target label
Note mailto: and news: have no double slash.    exists (see <a>).

Images

External images are specified with the <a> element as hypertext links. Inline images are specified with
<img src="url" [align="..."] [alt="..."] [ismap]>.
The value of align can be top, middle or bottom. The alt attribute provides text for non-graphical users and is strongly recommended. An image map (clickable image) 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>

Forms

<form method="..." action="url">...</form>
The URL should be a script or may use mailto:. The method is GET or POST, depending on how you want the data returned. Within a form, input fields are defined with:

Example form

  <hr>
    <form method="GET" action="http://www.foo.bar/cgi-bin/script">
      <p>Name: <input name="name" type="text" size="20"><br>
         Operating system: <select name="opsys">
        <option>Unix<option>VMS<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>

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

HTML3

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN">

Header elements

<style notation="...">...</style>
Encloses stylesheet information
<range from="label" until="label">
Specifies range marked in text with <spot id="label"> elements

Structural markup

All structural elements can have class, lang, id, clear 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 (e.g. align="center").

<banner>...</banner>
Encloses static information to remain on display
<bq>...</bq>
Synonymous with <blockquote>
<div class="...">...</div>
To mark divisions (chapter, section, etc)
<lh>...</lh>
In lists, supplies a list header or title before the first <li> or <dt>
<note role="...">...</note>
Identifies footnotes, sidenotes etc
<spot id="label">
Marks a reference point for <range>

Logical markup

<a id="label">
Use of id replaces name in anchors
<abbrev>...</abbrev>
Identifies an abbreviation
<acronym>...</acronym>
Identifies an acronym
<au>...</au>
Authors' names
<del>...</del>
Marks text as having been deleted but kept for reference purposes
<dfn>...</dfn>
Defining instance
<ins>...</ins>
Marks new text inserted
<lang>...</lang>
Identifies a language other than the basic one of the document
<person>...</person>
Personal names
<q>...</q>
Encloses quoted speech (adds ``quotes'' automatically)
<sub align="...">...</sub>
Subscripts
<sup align="...">...</sup>
Superscripts

Visual markup

<big>...</big>
Designates bigger text (see <small>)
<s>...</s>
Replaces <strike> for strikeout text (see also <ins> and <del>)
<small>...</small>
Designates smaller text (see <big>)
<tabstop id="label">
Sets tab stop at current location
<tab to="label">
Tabs to the labelled position

Figures

<figure src="/url">...</figure>
Encloses a figure
<caption>...</caption>
Supplies a caption
<credit>...</credit>
Supplies a credit

Within figures, <a> elements can have a shape attribute which identifies a polygon in the image that the user can click on:

<figure id="d69" src="http://abc.xyz.org/ pat/house.gif" align="center">
  <caption align="bottom">My house</caption> 
  <p>Picture of my mansion in the hills above Naples, note the 
     <a href="fire.html" shape="rect 20,120,50,140">hole in the 
     roof</a> where the lightning struck.</p>  
  <credit>The local paper took this shot.</credit>
</figure>

Forms

<input type="file"...>
Allows uploading of files to a server, permitted types specified with accept (change enctype of <form> to multipart/form-data)
<input type="scribble"...>
For pen input
<input type="audio"...>
For sound input

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^

Tables

<table [border]>...</table>
Defines a table
<caption>...</caption>
Supplies a caption
<tr>...</tr>
Encloses a table row
<th>...</th>
Encloses a column or row header inside a row
<td>...</td>
Encloses table data (a cell value)
<table border>
  <tr><th>Item</th><th>Quantity</th></tr>
  <tr><th>Population</th></td>384,000</td></tr>
  <tr><th>Sample</th></td>384</td></tr>
  <caption>Fig 1. Survey Frame</caption> 
</table>

The <th> and <td> elements can have align and span attributes.

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; &pilcro; ¶ 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; &cright; © 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; &mult;   × multiply sign                 
&#176; &deg;    ° degree sign                 &#247; &div;    ÷ division sign                 

Copies of this card can be downloaded in PostScript and .dvi format for A4 and Letter size stationery from ftp://www.thomson.com/itcp/WebExtras/ using anonymous FTP. Information about ITCP's titles can be obtained from http://www.thomson.com/intlitcp.html.