HTML Quick Reference Guide



Spinning the Web
Andrew Ford

The WorldWideWeb Handbook
Peter Flynn

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

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

    <!-- A sample document --> 
    <title>Document title</title> 
    <link rev="made" href=""
     rel="publisher" title="Publisher"> 
    <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
    <h2>Second-level heading</h2>
    <p>Another paragraph, <img alt="Picture of me" 
       align="bottom" src="mypic.gif">  with an

Header elements


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


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


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


Paragraphs of regular text


Address information blocks

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

Block quotations (must contain paragraphs or other structural markup)


Encloses static information to remain on display

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

Identifies footnotes, sidenotes etc


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


Horizontal rule

Lists, <form> and <table>

See below

<fig src="url">

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


Still under development



List header


Ordered lists, items numbered consecutively


Unordered lists, items bulleted


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


Definition lists


Definition term in a definition list


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


Identifies an abbreviation


Identifies an acronym


Authors' names


Citations, such as literary references or product names


Fragments of computer code


Marks text as having been deleted but kept for reference purposes


A defining instance (usually indexable)


Emphasis, often rendered in italics


Marks new text inserted


Specific keyboard input


Identifies a language other than the basic one of the document


Personal names


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


Samples of literal characters (such as user input)


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

<spot id="label">

Marks a reference point for <range>


Strong emphasis, usually rendered in bold

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


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



Computer or other variable names

Visual markup


Bold type


Designates bigger text




Italic type


Designates smaller text

<tabstop id="label">

Sets tab stop at current location

<tab to="label">

Tabs to the labelled position


Typewriter type

<u>...</u> *


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:






one of...

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

Path (directory or folder names)

Filename and filetype

? (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.


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="">
      <img src="" alt="Image map" ismap>

¶ 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="" alt="Image map" usemap="#mine">
      <map name="mine">
        <area name="circle" coords="20,30,..." href="url"<

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


<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

    <form method="GET" action="">
      <p>Name: <input name="name" type="text" size="20"><br>
         Operating system: <select name="opsys">
      <p><textarea name="comments" rows="4" columns="40"> 
         Please write your comments here...</textarea></p>
      <p><input type="submit"> <input type="reset"></p>

Operating system:


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

Defines a table


Supplies a caption

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

Enclose table header, body and foot


Encloses a table row


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> 
    <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>
Table 1: Survey Frame







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


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

<over> and <atop>

Separate lined and unlined fractions


Identifies numerator


Identifies denominator

<root root="n">

Root, degree specified as n


LaTeX-like arrays


Row within an array


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