HTML Quick Reference Guide |
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
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.
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>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
À À 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^
  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
|