HTML elements in action <h1>

Table of contents

• This document
• The 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
• ADDRESS element (contact information for a document) {7.5.6}

This document

This document lists HTML elements, and for each, explains its purpose, lists its options (attributes and contents), gives its relationships with other elements, and, for some elements, shows how its simple use is rendered. The purpose of this document is to help learn HTML and create HTML documents. Information on HTML syntax is not in this document.

This document describes XHTML 1.1 (a W3C Recommendation 31 May 2001), and the Strict subsets of HTML 4.01 (a W3C Recommendation 24 December 1999) and XHTML 1.0 (a W3C Recommendation 26 January 2000). There are only slight differences from one to the next. HTML 4.01 is probably W3C's final non-XML specification. XHTML 1.0 is HTML 4.01 with rules that limit the syntax to conform to XML. XHTML 1.1 is XHTML 1.0 Strict but the elements are seperated into modules according to function. References in this document to section numbers in W3C's HTML 4.01 specification are in {curly brackets} or like this.

The HTML that structures this document is complient with all three specifications, except: (1) The first line's XML tag, and the slash in empty tags, are not complient with HTML. (2) Each specification requires a different DOCTYPE. (3) The HTML tag attributes in XHTML differ from those in HTML.

This document is incomplete, and a work in progress. For example, HTML elements are shown within [square brackets] because they're easier to type than <angle brackets>.

Inline-level elements are specified as such; others elements are block-level, except INS and DEL.

For each element, listed are the following:

• Attributes, specified within the element's start tag
  • Required
  • Optional
• Content, specified between the element's start tag and end tag)
  • Elements only
  • Elements and text
  • Text only

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 and BODY elements

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 [CI] (language)
  • media = media-descriptors [CI] (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 [CI] (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 [CS] (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 [CI] {8.1} (not XHTML 1.1)
  • xml:lang = language code (XHTML only)
  • dir = LTR | RTL [CI] (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}

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}

[ol] (ordered list) {10.2}

1. [li] Item X (LI may contain flow elements only)
2. [li] Item Y
3. [li] Item Z

[ul] (unordered list) {10.2}

• [li] Item X
• [li] Item Y
• [li] Item Z

[dl] (definition list) {10.3}

[dt] term 1 (Contents: inline elements)

[dt] term 2

[dd] definition 1 (Contents: flow elements)

[dd] definition 2

Tables (Tables and Basic Tables Modules) {11}

The TABLE element (block) {11.2.1}

• In Basic Tables Module
  • summary = text
  • width = length
• Space and 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"
• Contents: CAPTION, COLGROUP, THEAD, TFOOT, and TBODY elements

Table Captions: The CAPTION element {11.2.2}

Cell content alignment attributes {11.3.2}

For all table elements except TABLE and CAPTION (COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR).

Column groups: the COLGROUP and COL elements {11.2.4} (not in Basic Tables Module)

Row groups: the THEAD, TFOOT, and TBODY elements {11.2.3} (not in Basic Tables Module)

Contents: TR elements

Table rows: The TR element {11.2.5}

Contents: TH and TD elements

Table cells: The TH and TD elements {11.2.6}

Sample table

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 [CS] (alternate text)
    • nohref [CI] (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 [CS] (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 [CS] (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 [CI] (value is a string|URI|id)
      • type = content-type [CI] (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 (?)

See also examples of importing text into an HTML document.

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

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

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 [CI] (HTTP method to submit form data set; "get": after URL)
  • enctype = content-type [CI] (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 [CI]
  • accept = content-type-list [CI] (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

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 = one of the following (default is "text") [CI]
  • value = cdata [CA]
  • checked [CI] (for type "radio" or "checkbox"; initial setting)
  • src = uri (for type "image")
  • alt = text [CS] (text when control can't be displayed) (not Basic Forms Module)
• Size, interaction, and effect
  • size = cdata [CN] (width)
  • maxlength = number (for type "text" or "password" only, maximum number of characters)
  • accept = content-type-list [CI] (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 [CI]

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 [CI] (initial state)
  • value = cdata [CS] (submit value if option selected)
  • label = text [CS] (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)
• for = idref

Sample form containing six fieldsets

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 [CI] (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

Elements that can be in more than element type

• flow elements (in DIV, INS, DEL, DD, LI, TH, TD, OBJECT, FIELDSET, BUTTON)
  • block elements (in BLOCKQUOTE, FORM, NOSCRIPT, BODY, MAP)
    • 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
      • DL, HR, TABLE
      • list - UL, OL (contain only LI elements)
  • inline elements (in ADDRESS, P, Hn, DT, LABEL, LEGEND, CAPTION, SPAN, A)
    • #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)

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

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