HTML Quick Reference

Last modified: 2005/01/02

Document Structure
Document Head
Document Body
Special Characters
Color Names

Acronym

WWW: World-Wide Web (or Web, for short) -- a hypertext-based, distributed information system.
SGML: Standard Generalized Markup Language -- a standard for describing markup languages.
DTD: Document Type Definition -- a specific markup language, written using SGML.
HTML: HyperText Markup Language -- HTML is a SGML DTD. In practical terms, HTML is a collection of styles (indicated by markup tags) that define the various components of a WWW document.
URL: Uniform Resource Locator -- syntax and semantics of formalized information for location and access of resources via the internet.

Document Structure

<!doctype html public ...>

Declaration of HTML document type

<html>...</html>

HTML document

<head>...</head>

Document head

<body [background="..."] [bgcolor="..."] [text="..."] [link="..."] [vlink="..."] [alink="..."]> ...</body>

Document body
Attributes:

background: URL of image tiled the full background of the document-viewing area
bgcolor: Background color; a hexadecimal red-green-blue triplet of color, or color name
text: Foreground, or text color; same as bgcolor
link: Color of link text; same as bgcolor
vlink: Color of visited link text; same as bgcolor
alink: Color of active link text; same as bgcolor

Comment

Document Head

<title>...</title>

Title of document

<base href="...">

Base context document
Attribute:

href: Base address of this document

<meta [http-equiv="..."] [name="..."] content="...">

Generic Meta-information
Attributes:

http-equiv: HTTP response header name (Content-Type|Refresh|Expires|Keywords|Reply-to|...)
name: Meta-information name (author|robots|keyword|...)
content: Associated information

Blocks and Headings

<p [align=...]>...[</p>]

Paragraph
Attribute:

align: Horizontal alignment (left|right|center)

<div [align=...]>...</div>

Document division
Attribute:

align: Horizontal alignment (left|right|center)

<center>...</center>

Centering of text; a shorthand for DIV with ALIGN=CENTER

<h1 [align=...]>...</h1>, ..., <h6 [align=...]>...</h6>

Heading, level N (N = 1..6)
Attribute:

align: Horizontal alignment (left|right|center)

<hr [size=...] [width="..."] [align=...] [noshade]>

Horizontal rule (default: a shaded engraved line)
Attributes:

size: Thickness of horizontal rule
width: Width of horizontal rule, in pixels, or in percent of document width
align: Position relative to page (left|right|center)
noshade: No fancy shading

Link and Images

<a [name="..."] [href="..."]>...</a>

Anchor; source/destination of link
Attributes:

name: Name of this anchor
href: URL for linked resource

<img src="..." alt="..." [lowsrc="..."] [width=...] [height=...] [align=...] [border=...] [hspace=...] [vspace=...] [usemap="..."] [ismap]>

Image; icon, glyph or illustration
Attributes:

src: URL of embedded image object
alt: Textual alternative
lowsrc: Low resolution images spec
width, height: Width and height of image; add to speed up display of the document
align: Position relative to text (top|middle|bottom|left|right)
border: Thickness of border around an image
hspace: Horizontal space to the left and right of the image (for the floating image)
vspace: Vertical space above and below the image (for the floating image)
usemap: Pointer (URL) to the MAP element for client-side image map
ismap: Use server-side image map

<map name="...">...</map>

Client-side image map
Attribute:

name: Name of this map

<area [shape=...] [coords="..."] [href="..."] [nohref] alt="...">

Hotzone on the image map
Attributes:

shape

Shape of region (rect|circle|poly)

coords

Coordinates for shape:

shape=rect coords="left-x,top-y,right-x,bottom-y"
shape=circle coords="center-x,center-y,radius"
shape=poly coords="x1,y1,x2,y2,x3,y3,...,xn,yn"

href

URL for linked resource

nohref

No action

alt

Text label

Lists

<dl [compact]>...</dl>

Definition list, or glossary
Attribute:

compact: Compact list style

<dt>...[</dt>]

Term in definition list

<dd>...[</dd>]

definition of term

<ul [type="..."] [compact]>...</ul>

Unordered, or bulleted list (default progression of bullet types: from a solid disc, to a circle to a square)
Attributes:

type: Bullet type (disc|circle|square)
compact: Compact list style

<ol [type="..."] [start=...] [compact]>...</ol>

Ordered, or numbered list (default enumerate type: Arabic number, i.e., 1)
Attributes:

type: Enumerate type (1|a|A|i|I)
start: Default start number
compact: Compact list style

<li [type="..."] [value="..."]>...[</li>]

List item
Attributes:

type: Item type (disc|circle|square (in the unordered list), 1|a|A|i|I (in the ordered list))
value: Count for the ordered list

Text and Phrase

Text: <tt>TeleType or monospaced text</tt>
<b>Bold text</b>
<i>Italic text</i>
<u>Underlined text</u>
<strike>~~Strike-through text~~</strike>
<big>BIG font</big> and <small>SMALL font</small>
Subscript: x<sub>₂</sub>
Superscript: x<sup>ⁿ</sup>
Phase: <em>Emphasized phrase</em>
<strong>Strong emphasis</strong>
<code>Source code phrase</code>
<samp>Sample text or characters</samp>
<kbd>Keyboard phrase, e.g. user input</kbd>
<var>Variable phrase or substitutable</var>
<cite>Name or title of cited work</cite>

<font [size="..."] [color="..."]>...</font>

Local change to font
Attributes:

size: Absolute or relative font size, ranged from 1-7 (default size is 3)
color: Text color; same as bgcolor

<basefont size="...">

Base font size, ranged from 1-7

<br [clear=...]>

Line break
Attribute:

clear: Move down until a given margin for the floating images (left|right|all|none)

<blockquote>...</blockquote>

Block-like quoted passage

<address>...</address>

Address, signature, or byline

<pre [width=...]>...</pre>

Preformatted text
Attribute:

width: Maximum characters per line

Tables

<table [border[=...]] [cellspacing=...] [cellpadding=...] [width=...]>...</table>

Table
Attributes:

border: Draw border with a specified frame width
cellspacing: Cell spacing (default spacing is 2)
cellpadding: Cell padding (default padding is 1)
width: Width of table, in pixels, or in percent of document width

<tr [align=...] [valign=...]>...[</tr>]

Table row; include the header or data cells
Attributes:

align: Horizontal alignment (left|right|center)
valign: Vertical alignment (top|middle|bottom)

<td [align=...] [valign=...] [nowrap] [colspan=...] [rowspan=...] [width=...] [height=...]>...[</td>]

Table data cell
Attributes:

align: Horizontal alignment (left|right|center)
valign: Vertical alignment (top|middle|bottom)
nowrap: Suppress word wrap
colspan: Number of columns spanned by cell
rowspan: Number of rows spanned by cell
width, height: Suggested width and height for cell

<th [align=...] [valign=...] [nowrap] [colspan=...] [rowspan=...] [width=...] [height=...]>...[</th>]

Table header cell
Attributes:

align: Horizontal alignment (left|right|center)
valign: Vertical alignment (top|middle|bottom)
nowrap: Suppress word wrap
colspan: Number of columns spanned by cell
rowspan: Number of rows spanned by cell
width, height: Suggested width and height for cell

<caption [align=...]>...</caption>

Table caption
Attribute:

align: Position relative to table (top|bottom)

Forms

<form [action="..."] [method=...] [enctype="..."]> ...</form>

Fill-out or data-entry form
Attributes:

action: URL for server-side form handler
method: Method of submitting form (GET|POST)
enctype: Representation of form data

<input [type=...] [name="..."] [value="..."] [size="..."] [maxlength=...] [src="..."] [align=...] [checked]>

Form input datum
Attributes:

type: Type of input interaction (text|password|checkbox|radio|submit|reset|file|image|hidden)
name: Name of the form datum
value: Default/initial/selected value of the form datum
size: Field size (only text/password type)
maxlength: Maximum field length (only text/password type)
src: URL of image (only image type)
align: Image alignment (top|middle|bottom) (only image type)
checked: Initial state in the checkbox or radio fields is "on" (only checkbox/radio type)

<select name="..." [size=...] [multiple]> ...</select>

Selection of option(s)
Attributes:

name: Name of the form datum
size: Number of options displayed at a time
multiple: Multiple selection allowed

<option [value="..."] [selected]>...[</option>]

A selection option
Attributes:

value: Form datum value for this option
selected: Initial state

<textarea name="..." rows=... cols=...> ...</textarea>

An area for text input
Attributes:

name: Name of the form datum
rows: Height of area
cols: Width of area

Special Characters

Escape sequences

&: the ampersand sign: &
<: the less than sign: <
>: the greater than sign: >
": the double quote sign: "

Accented characters

ISO Latin 1 characters, e.g.:

ö: small o, dieresis or umlaut mark: ö
é: small e, acute accent: é
Ù: capital U, grave accent: Ù
ß: small sharp s, German (sz ligature): ß

Color Names

Black	(=`#000000`)	Gray	(=`#808080`)	Silver	(=`#C0C0C0`)	White	(=`#FFFFFF`)
Red	(=`#FF0000`)	Maroon	(=`#800000`)	Purple	(=`#800080`)	Fuchsia	(=`#FF00FF`)
Lime	(=`#00FF00`)	Green	(=`#008000`)	Olive	(=`#808000`)	Yellow	(=`#FFFF00`)
Blue	(=`#0000FF`)	Navy	(=`#000080`)	Teal	(=`#008080`)	Aqua	(=`#00FFFF`)

Fumio HOSONO <hosono@si.gunma-u.ac.jp>