HTML Quick Reference Guide |
|
||
Spinning the
Web |
The
WorldWideWeb Handbook |
||
Simple rules of HTML
Element names and attribute names are not case sensitive: attribute values are;
Documents start with a <!doctype...> statement, followed by a header and a text body all enclosed in <html>...</html>
The header is enclosed in <head>...</head>
The text body is enclosed in <body>...</body>
Comments are written as <!-- A comment -->
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/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 |
one
of... |
Internet server hostname or IP address with optional port. Email address. Newsgroup name. |
Path (directory or folder names) |
Filename and filetype |
Options: |
|
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>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>
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
< (< less-than symbol)
> (> greater-than symbol)
& (& ampersand)
¶ " (" unidirectional typewriter-style "double quote")
¶ (non-breaking space)
¶ ­ (soft hyphen
ISO Latin-1 characters
À À capital A, grave accent ï ï small i, diæresis/umlaut à à small a, grave accent Ð Ð capital Eth, Icelandic Á Á capital A, acute accent ð ð small eth, Icelandic á á small a, acute accent Ñ Ñ capital N, tilde   capital A, circumflex ñ ñ small n, tilde â â small a, circumflex Ò Ò capital O, grave accent à à capital A, tilde ò ò small o, grave accent ã ã small a, tilde Ó Ó capital O, acute accent Ä Ä capital A, diæresis/umlaut ó ó small o, acute accent ä ä small a, diæresis/umlaut Ô Ô capital O, circumflex Å Å capital A, ring ô ô small o, circumflex å å small a, ring Õ Õ capital O, tilde Æ Æ capital AE ligature õ õ small o, tilde æ æ small ae ligature Ö Ö capital O, diæresis/umlaut Ç Ç capital C, cedilla ö ö small o, diæresis/umlaut ç ç small c, cedilla Ø Ø capital O, slash È È capital E, grave accent ø ø small o, slash è è small e, grave accent Ù Ù capital U, grave accent É É capital E, acute accent ù ù small u, grave accent é é small e, acute accent Ú Ú capital U, acute accent Ê Ê capital E, circumflex ú ú small u, acute accent ê ê small e, circumflex Û Û capital U, circumflex Ë Ë capital E, diæresis/umlaut û û small u, circumflex ë ë small e, diæresis/umlaut Ü Ü capital U, diæresis/umlaut Ì Ì capital I, grave accent ü ü small u, diæresis/umlaut ì ì small i, grave accent Ý Ý capital Y, acute accent Í Í capital I, acute accent ý ý small y, acute accent í í small i, acute accent Þ Þ capital Thorn, Icelandic Î Î capital I, circumflex þ þ small thorn, Icelandic î î small i, circumflex ß ß small sharp s, German sz Ï Ï capital I, diæresis/umlaut ÿ ÿ 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
  non-breaking space ± ± ± plus-or-minus sign ¡ ¡ ¡ inverted exclamation mark ² ² ² superscript two ¢ ¢ ¢ cent sign ³ ³ ³ superscript three £ £ £ pound sign ´ ´ ´ acute accent ¤ ¤ ¤ general currency sign µ µ µ micro sign ¥ ¥ ¥ yen sign ¶ ¶ ¶ pilcrow (paragraph sign) ¦ ¦ ¦ broken (vertical) bar · · · middle dot § § § section sign ¸ ¸ ¸ cedilla ¨ ¨ ¨ umlaut/dieresis ¹ ¹ ¹ superscript one © © © copyright sign º º º ordinal indicator, male ª ª ª ordinal indicator, fem » » » angle quotation mark, right « « « angle quotation mark, left ¼ ¼ ¼ fraction one-quarter ¬ ¬ ¬ not sign ½ ½ ½ fraction one-half ­ ­ soft hyphen ¾ ¾ ¾ fraction three-quarters ® ® ® registered sign ¿ ¿ ¿ inverted question mark ¯ ¯ ¯ macron × × × multiply sign ° ° ° degree sign ÷ ÷ ÷ division sign