HTML and XHTML reference outline

This document and HTML
Parts of an HTML or XHTML document {7}
Attributes for BODY element, and for elements in it
Text {9}
Main structural elements of the document body {7.5} <h2>
Lists: ordered, unordered, and definition lists {10}
Tables {11}
Link elements attributes {12}
Objects (images, applets) {13} and Links {12} (inline)
Rules: the HR (horizontal rule/line) element {15.3}
Forms {17}
Scripts {18}
Element relationships with each other
ADDRESS element (contact information for a document) {7.5.6}

This document and HTML

Document purpose

This document's purpose is to help learn HTML and create HTML documents. This document lists HTML elements, and for each gives its:

Purpose
Options (attributes and contents)
Relationships with other elements
Related section number in W3C's HTML 4.01 specification in {curly brackets}
Link to examples of it in XHTML simple examples

HTML versions

This document describes the Strict subsets of the following HTML versions. There are only slight differences among the three.

HTML 4.01 (W3C Recommendation 1999-December-24) is probably W3C's final specification in that non-XML-complient series.
XHTML 1.0 (W3C Recommendation 2000-January-26) is HTML 4.01 with rules to conform to XML, and must differ as follows:
- The first line, an XML element, declares the document as XML.
- The slash ending empty tags is required in XHTML and not valid in HTML.
- Each specification requires a different DOCTYPE.
- The attributes for the <HTML> element in XHTML differ from those in HTML.
XHTML 1.1 (W3C Recommendation 2001-May-31) is XHTML 1.0 Strict but elements are seperated by function into modules.

HTML element syntax and notation

When coding HTML, each element contains: (ex., <name attribute="value"> content </name>)

A start tag, usually required, within angle brackets, consisting of:
1. Element name
2. Attributes, usually optional, after the element name
  - Required
  - Optional
Contents, if allowed, after the start tag
- Elements only
- Elements and text
- Text only
An end tag, if contents allowed, consisting of a slash and the element name, within angle brackets

Case (upper or lower) sensitivity

Case	Attribute values	Examples
ignored	defined by HTML spec	content-type, media-descriptors
undefined	outside the HTML spec	script, uri
as is	for human reading	text (title, alt, standby, label)
sensitive	reference elements	(id, class)
not applicable	are not alphabetic	length (width, height)

Major parts of an HTML or XHTML document {7} (Structure Module)

At the beginning of each file containing HTML is the !DOCTYPE {7.2} specifying the markup language and its version. Second is the the HTML element {7.3} which contains everything else.

HTML element

xmlns = uri
HEAD element
BODY element

The document head {7.4} - the HEAD element

profile = uri (the location of one or more meta data profiles)
TITLE element {7.4.2}
- Document title text for bookmarking and searching
META data element {7.4.4} (Metainformation Module)
- name = name [CS], or http-equiv = name [CI] (property name)
- content = cdata [CS] (property's value)
- scheme = cdata [CS] (scheme to use to interpret property's value)
STYLE element {14.2.3} (Stylesheet Module)
- type = content-type (language)
- media = media-descriptors (intended destination medium; default is "screen")
- xml:space = "preserve" (XHTML only)
- style sheet data text
LINK element: relationships to other documents {12.3} (Link Module)
- media = media-descriptors (for rel="stylesheet"; intended medium) {14.2.3}
- See also "Link elements attributes" below.
BASE element: path information {12.4} (Base Module)
- See also "Link elements attributes" below.
SCRIPT element, described below

The document body {7.5} - the BODY element

onload = script (script when window is finished loading)
onunload = script (script when window is removed)
Elements: block-level, SCRIPT, INS, and/or DEL

Attributes for BODY element, and for elements in it

Does not apply to SCRIPT, PARAM, BR, and IFRAME elements unless specified.

Core attributes (also for BR and IFRAME elements)
- id = name [CS] (this element's name) (also PARAM element) {7.5.2}
- class = cdata-list [CS] (class names) {7.5.2}
- title = text (element title) {7.4.3} (also STYLE element)
- style = style (inline style information) {14.2.2} (Style Attribute Module) (not in XHTML 1.1)
Internationalization (I18N) (also HTML and HEAD elements, and elements in HEAD except BASE) {8}
- lang = language-code {8.1} (not XHTML 1.1)
- xml:lang = language code (XHTML only)
- dir = LTR | RTL (text direction) (Bidirectional Text Module) {8.2}
Events and the scripts that are activated by them {18.2.3} (not BDO element)
- on[dbl]click = script (pointer button click)
- onmouse[down|up] = script (pointer button state)
- onmouse[over|move|out] = script (pointer location)
- onkey[press|down|up] = script (keyboard)
For elements that can be activated or changed (A, AREA, LABEL, and 4 form control elements)
- accesskey = character (key activates element) (also LEGEND; not SELECT) {17.11.2}
- tabindex = number (tab navigation) (also OBJECT when a form control; not LABEL) {17.11.1}
- onfocus = script (when an element receives focus) {18.2.3}
- onblur = script (when an element loses focus) {18.2.3}

Main structural elements of the document body {7.5} <h2>

These elements' contents may contain text to render.

Grouping elements: the DIV (block) and SPAN (inline) elements {7.5.4}

[div] generic/grouping block container element (Contents: flow elements) [span] generic/grouping inline container element (Contents: inline elements)

Headings {7.5.5} [h3] (Contents: inline elements)

[h4] Heading 4 - fourth most important

[h5] Heading 5

[h6] Heading 6 - least important

Adding structure to forms: FIELDSET element {17.10}

LEGEND element (its contents supply the text for the FIELDSET label)
Other contents: flow elements

Text {9} (Text Module)

Inline text elements that contain inline elements

Inline phrasal elements {9.2}
- No tag
- [em] Emphasis
- [strong] Stronger emphasis
- [dfn] Definition
- [code] Computer code
- [samp] Sample output from programs
- [kbd] Text to be entered by the user
- [var] Variable or program argument
- [cite] Citation or a reference to other sources
- [abbr title="abbreviation"] Abbreviation
- [acronym title="acronym is not an acronym"] Acronym
- [q cite=url] Short quotation
Subscripts and superscripts: the SUB and SUP elements {9.2.3}
- _{[sub] Subscripts} normal
- ^{[sup] Superscripts} normal
Presentation font style {15.2.1} (Presentation Module)
- [tt] Teletype or monospaced
- [i] Italic
- [b] Bold
- [big] Large
- [small] Small
BDO element (bi-directional text) {8.2.4} 123456 (Bi-directional Text Module)

Block text elements

[blockquote cite=url] Long quotation {9.2.2} (Contents: block and SCRIPT elements)

[pre xml:space="preserve"] preformatted text {9.3.4}
 Contents: inline elements but no font size changes nor IMG and OBJECT elements

[p] Paragraph (contents: inline elements) {9.3.1}
[br]
[br] Line break (an inline element) {9.3.2}

Marking document changes {9.4} (Edit Module)

~~[del cite=url datetime=y-m-d] delete~~ normal
[ins cite=url datetime=y-m-d] insert normal
DEL and INS elements are neither inline nor block level, or both.
Flow elements

Lists: ordered, unordered, and definition lists (flow elements) {10}

Ordered (OL element) and unordered (UL element) lists {10.2}
- LI elements
  - Flow elements
Definition list (DL element) {10.3}
- Term element (DT)
  - Inline elements
- Description element (DD)
  - Flow elements

Tables {11}

These are in the Basic Tables Module unless specified otherwise, in which case, they are in the Tables Module. See a table in XHTML simple examples.

The TABLE element (block) {11.2.1}
- summary = text
- width = length
- Space & lines between cells and: other cells or table edges {11.3} (not in Basic Tables Module)
  - frame = void|above|below|hsides|lhs|rhs|vsides|box|border (surrounding table)
  - rules = none|groups|rows|cols|all (between cells)
  - border = pixels (frame width around table)
  - cellspacing = length (space between cell and adjacent cell or table border)
  - cellpadding = length (margins within each cell)
- datapagesize = cdata (mentioned in W3C's "Modularization of XHTML"
- Table Captions: The CAPTION element {11.2.2}
- COLGROUP and COL elements {11.2.4} (not in Basic Tables Module)
- Column groups: the COLGROUP and COL elements {11.2.4} (not in Basic Tables Module)
  - span = number (of columns)
  - width = multi-length
  - Cell content alignment attributes (see below)
  - COL elements (only in COLGROUP, and only if no span specified)
- Row groups: the THEAD, TFOOT, and TBODY elements {11.2.3} (not in Basic Tables Module)
  - Cell content alignment attributes (see below)
  - Table rows: The TR element {11.2.5}
    - Cell content alignment attributes (see below)
    - Table cells: The TH and TD elements {11.2.6}
      - Cell content alignment attributes (see below)
      - headers = idrefs (TD) specifies header cells for this data cell
      - scope = row|col|rowgroup|colgroup (TH) cell is for remaining ...
      - abbr = text
      - axis = cdata
      - rowspan = number (of cells)
      - colspan = number (of cells)
      - flow elements

Cell content alignment attributes {11.3.2}

These four attributes are available for all table elements except TABLE and CAPTION (COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR).

valign = top|middle|bottom|baseline (vertical)
align = left|center|right|justify|char (horizontal)
char = character on which to align when "align=char" (default: decimal point) (not in Basic Table Module)
charoff = offset to the alignment character specified by char attribute (not in Basic Table Module)

Links (A, LINK, BASE, and AREA elements) {12}

Attributes

Location of Web resource (for all link elements: A, LINK, BASE, and AREA)
- href = uri (required for BASE) (may include id of an element)
Describe the resource at href (for A and LINK elements)
- hreflang = langcode (language)
- type = content-type
- rel = link-types (relationship from current document to that specified by href)
- rev = link-types (a reverse link from resouce per href to the current document)
- charset = charset (character encoding)
Image region (for A element when it's within an image element, and for AREA element) (Client-side Image Map Module)
- shape = default|rect|circle|poly [CI] (shape of a region; "default"=all) {13.6.1}
- coords = coordinates (relative to object's top left corner) {13.6.1}
  - rect: left-x, top-y, right-x, bottom-y
  - circle: center-x, center-y, radius
  - poly (polygon): x1, y1, x2, y2, ..., xN, yN

The A element {12.2} (Hypertext Module) (inline)

Contents, only if this element is not in image element: inline elements except A; they become a link

Image maps {13.6}, client-side: MAP element (Client-side Image Map Module) (inline)

name = cdata [CI] (used by IMG, OBJECT, INPUT elements to refer to this MAP) (required before XHTML 1.1 which uses and requires id instead)
Contents (to specify geometric regions of the image map and a link for each)
- [A] and block-level elements, or
- AREA elements
  - alt = text (alternate text)
  - nohref (region has no associated link)
  - name = cdata [CI] (control name to submit object with form) (Name ID Module)

Objects (images, applets) {13} (inline)

Including an image: the IMG element {13.2} (Image Module)

Define appearence, initial value
- src = uri (location of the image resource)
- alt = text (alternate text)
- longdesc = uri (link to a long description of the image)
- width, height (visual presentation of objects, images, and applets)
Interaction and effect (also for INPUT element)
- ismap (server-side image map) (Server-side Image Map Module)
- usemap = uri (name of associated MAP element) (Client-side Image Map Module)

Generic inclusion (image, applet, HTML): the OBJECT element {13.3} (Object Module)

Define appearence, initial value
- codebase = uri (base path to resolve relative classid, data, and archive URIs)
- classid = uri (location of an object's implementation)
- codetype = content-type (of object specified by classid)
- data = uri (location of the object's data used to create it)
- type = content-type (for the data specified by data)
- archive = uri-list
- standby = text (message while loading the object)
- width, height (visual presentation of objects, images, and applets)
- Contents
  - Object initialization: the PARAM element {13.3.2}
    - name = cdata (name of run-time parameter)
    - value = cdata (value of run-time parameter)
    - valuetype = data|ref|object (value is a string|URI|id)
    - type = content-type (for valuetype=ref only)
  - flow elements to render if unable to show image
Interaction and effect
- declare (OBJECT definition is a declaration only)
- usemap = uri? (Client-side Image Map Module)
- name = cdata [CI] (control name for submitting objects with forms)

Inline frames: the IFRAME element {16.5} (IFrame Module)

Content information
- src = uri (source of HTML contents for the frame)
- longdesc = uri (link to a long description of the frame)
- Contents: displayed when frames not displayed
Visual appearence attributes
- width = length
- height = length
- scrolling = auto|yes|no [CI] (scrolling devices for frame? auto: when necessary)
- frameborder = 1|0 (a separator between this and adjoining frames? 1=yes, 0=no)
- marginwidth = pixels (?)
- marginheight = pixels (?)

Rules: the HR (horizontal rule/line) element {15.3} (Presentation Module)

Forms {17} (Forms and Basic Forms Modules) (Block)

See a form in XHTML simple examples.

The FORM block element {17.3} (these attributes affect only submission, not appearence)

How to submit or reset form
- action = uri (form processing agent)
- method = get|post (HTTP method to submit form data set; "get": after URL)
- enctype = content-type (for method="post" only) (default: "application/x-www-form-urlencoded")
- on[submit|reset] = script (Intrinsic Events Module)
What submit server will accept (not Basic Forms Module)
- accept-charset = charset list
- accept = content-type-list (file types, only for type="file")
Contents: heading, FIELDSET, and block elements except FORM

Attributes for all form controls (INPUT, BUTTON, SELECT, TEXTAREA) (inline)

disabled (disables input control) (also OPTGROUP and OPTION) (not Basic Forms Module)
name = cdata [CI] (submit name; also for OBJECT when it's a form control)
onchange = script (when control loses input focus after its value has been modified since gaining focus) (not BUTTON nor INPUT buttons)
onselect = script (INPUT text fields and TEXTAREA only; when user selects text)

Form control labels and values

Control	type attribute values	Display label	Initial value	Submit value
INPUT textual	text, password, file	LABEL element	value attribute	Final field contents
INPUT buttons	submit, reset, image	value or src attribute	n/a	value attribute
INPUT choices	checkbox, radio	LABEL element	checked attribute	value attribute, default "on"
INPUT hidden	hidden	n/a	n/a	value attribute
BUTTON	submit, button, reset	element contents	n/a	value attribute
TEXTAREA	n/a	LABEL element	element contents	Final field contents
SELECT OPTION	n/a	label attribute, or element contents	selected attribute	value attribute, or element contents

When a form is submitted, each submitted control field has the form "name=value", where name is specified by the element's name attribute, and value is the submit value (field contents for text field controls, value attribute for all other controls). Only controls that W3C call "successful" are submitted, including named and selected/activated choice, option, and button controls.

The INPUT form-control element {17.4}

Control type, display label, initial value, and submit value (see table above)
- type = text|password|file|submit|reset|image|checkbox|radio|hidden (default is "text")
- value = cdata [CA]
- checked = "checked" (for type "radio" or "checkbox"; initial setting)
- src = uri (for type "image")
- alt = text (text when control can't be displayed) (not Basic Forms Module)
Size, interaction, and effect
- size = cdata (width)
- maxlength = number (for type "text" or "password" only, maximum number of characters)
- accept = content-type-list (for type="file", acceptable file types for server) (not Basic Forms Module)
- readonly (read-only input controls) (not Basic Forms Module)
- usemap = uri (client-side image map)
- ismap (server-side image map)

The BUTTON form-control element {17.5} (not Basic Forms Module)

Button label (flow elements except A and form elements)
value = cdata [CS] (value in submitted form if button activated)
type = submit|button|reset

The SELECT form-control element (a menu with OPTION element choices) {17.6}

size = number (number of list rows visible at the same time)
multiple
OPTGROUP elements (groups OPTION elements) (not Basic Forms Module)
- label = text (menu label)
- OPTION elements
OPTION elements
- Text (alternate method of specifying submit value and label text)
- selected = "selected" (initial state)
- value = cdata [CS] (submit value if option selected)
- label = text (option text; not Basic Forms Module)

The TEXTAREA form-control element {17.7}

rows = number
cols = number
readonly (read-only input controls) (not Basic Forms Module)
Initial text contents of field

The LABEL element {17.9}

Label for text fields, checkboxes, radio buttons, and menus (inline elements except LABEL)
The form control element being labeled, or use the following attribute.
for = idref (id of form control being labeled by this LABEL element)

Scripts {18} (Scripting Module)

The SCRIPT element {18.2.1} (an inline element)

src = uri (location of an external script)
type = content-type [CI] (scripting language)
defer = "defer" (script doesn't generate document content)
charset (character encoding of script specified by src)
xml:space = "preserve" (XHTML only)
Script text

The NOSCRIPT block element {18.3.1}

Contents: block elements, rendered only when scripts are not executed.

Element relationships with each other

In this document, above, inline-level elements are specified as such; others elements are block-level, except INS and DEL.

Elements that can be in more than one element type

These are called flow elements, and can be within DIV, INS, DEL, DD, LI, TH, TD, OBJECT, FIELDSET, and BUTTON elements, unless specified.

block elements (can be also in BLOCKQUOTE, FORM, NOSCRIPT, MAP, BODY elements)
- may contain only flow elements
  - DIV, FIELDSET
- may contain only inline elements
  - heading - H1, H2, H3, H4, H5, H6
  - preformatted - PRE (can't contain images or font size change)
  - P, ADDRESS
- may contain only block elements
  - BLOCKQUOTE (plus SCRIPT), FORM (plus formctrl), NOSCRIPT
- may contain only specific or no elements
  - list - UL, OL (contain only LI elements)
  - DL (contains only DT and DD), TABLE
  - HR (no contents)
inline elements (can be also in ADDRESS, P, Hn, DT, SPAN, A, LABEL, LEGEND, CAPTION)
- #PCDATA (in OPTION, TEXTAREA, TITLE) (contain only text)
- may contain only inline elements
  - fontstyle - TT, I, B, BIG, SMALL
  - phrase - EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM
  - special.1 - A, Q, SUB, SUP, SPAN, BDO
- special.2 (no contents) - IMG, BR
- special.3 (contains flow) - OBJECT (also PARAM), IFRAME
- special.4 - MAP (contains block, A), SCRIPT (contains #PCDATA)
- formctrl - INPUT, TEXTAREA, LABEL, BUTTON (contains flow), SELECT
Both an inline and block element
- DEL and INS

Elements that can be in only one element type (and what they may contain)

Elements	Within
TITLE (#PCDATA), STYLE (#PCDATA), BASE, META, and LINK	HEAD
LEGEND (inline)	FIELDSET
DT (inline) and DD (flow)	DL
CAPTION (inline), COLGROUP (COL), and THEAD, TFOOT, and TBODY (TR)	COLGROUP
COL	COLGROUP
TR (TH, TD)	THEAD, TFOOT, and TBODY
TH and TD (flow)	TR
PARAM	OBJECT
AREA	MAP
OPTGROUP (OPTION)	SELECT
OPTION (#PCDATA)	OPTGROUP
BODY (block, SCRIPT), HEAD	HTML
LI (flow)	UL, OL

ADDRESS element (contact information for a document) {7.5.6}

[address] Address elements contain only inline elements.

[web] [home] [about] [copyright] [contact] This page last changed April 18, 2002.