SPS Home > Dgreath > HTML5 Reference

HTML5 Reference

This document presents information primarily about additions to the HTML specifications found in HTML5. These new elements are in addition to those found in the XHTML Transistional specification and are not included herein. This document does include information about the basic containers.

Normative Definitions

—cdata: Character Data: A string consisting of one or more numbers or other characters representing data as specified in the entity definitions below. These character include US-ASCII codes, Latin-1 charset, Symbol charset, and Special Characters charsets. Cdata is never parsed but is rendered as presented, thus "<" and "&" are rendered as displayable characters. Line feeds are ignored while each carriage return and tab is replaced with a space. Browsers may ignore leading and trailing whitespace within the attribute value. CDATA attribute values are typically case-sensitive, though this is not the case with all attributes that take CDATA values.
—pcdata: Parsed Character Data: A character string that can be read and interpreted by the user agent or server side application. The same characters allowed for cdata are acceptable. The left angle "<" is interpreted as the start of an element, and the ampersand "&" is interpreted as the start of an entity. Substitute < and & to over-ride this behavior.
—nmtoken: Named tokens: arbitrarily assigned names that represent various members of a defined set of names in a controlled vocabulary. For example, the use of "en" to refer to English as a member of the set of all languages. Frequently these are described in a defined namespace.
—implied: The attribute is optional and need not be defined. The implication refers to the default or inherited value that is applied if not otherwise specified.
—required: The attribute must be defined.
—fixed: The attribute is permanently defined and must not be changed. Its value is shown in the following parentheses.
—empty: No closing tag is required and must be self closed, thus <foo /> instead of the normal <foo></foo>.
—deprecated: This element is presently supported however it is in disfavor and may be dropped from future specifications. There are always suitable alternatives which should be used.
[ENTITY]: This denotes declaration of an XHTML entity. The entity name is immediately followed by its respective attribute list. Comments in curly braces provide additional descriptive information.
[ELEMENT]: This denotes declaration of an XHTML element. The element name is immediately followed by its respective child elements in parentheses followed by its attribute list. Comments in curly braces provide additional descriptive information.
[BLOCK ELEMENT]: This denotes declaration of an XHTML element. The element name is immediately followed by its respective child elements in parentheses followed by its attribute list. Comments in curly braces provide additional descriptive information. Block elements may not be nested inside other block elements but may contain inline elements.
[INLINE ELEMENT]: This denotes declaration of an XHTML element. The element name is immediately followed by its respective child elements in parentheses followed by its attribute list. Comments in curly braces provide additional descriptive information. Inline elements can be inside either block or inline elements, may contain other inline elements, and may not contain block elements unless specifically noted.

DOCUMENT ELEMENTS

Document Type Declaration

<!DOCTYPE html>

Note: The text shown above must appear on the first lines of the document exactly as shown. Its only child is html.

Html Element

[ELEMENT] html (head body) [child of dtd]

id { a document wide unique identifier }

id—implied

lang { backwards compatible language code }

languageCode—implied

xml:lang { XML 1.0 language code }

languageCodeXml—implied

dir { direction for weak/neutral text }

txtDir—implied

xmlns { the namespace URI designates the document profile}

uri—fixed ( http://www.w3.org/1999/xhtml )

Note: This element requires a head and body container. Theoretically, there could be a variety of named body elements for different purposes, however no present browsers support this capability.

Head Element

[ELEMENT] head ( title base meta link style script object isindex ) [child of html] { container of document parameters }

id { a document wide unique identifier }

id—implied

lang { backwards compatible language code }

languageCode—implied

xml:lang { XML 1.0 language code }

languageCodeXml—implied

dir { direction for weak/neutral text }

txtDir—implied

profile { profile is used to describe additional elements in addition to those declared in the namespace }

uri—implied

Note: Exactly one title element and a meta element to set the charset are required. The others are optional. There can only be one head container per html container.

Author's note: the profile attribute appears to be a hook included in XHTML to provide a catchall means to extend the function of the markup. There are three instances when a profile seems to be needed. First, acceptable values for the rel and rev attributes provided in the anchor and link elements must be defined for them to be useful. W3C suggests some possible meanings but no real standard exists--yet. I have published an ontology in both html and xml/rdf as as early attempt at defining these. Second, XML namespaces must be declared before they can be used. For example, in the Dublin Core DC:Author meta-element, the meaning of "Author" is defined in the "DC" namespace, so without an explicit reference to that namespace, "Author" has no meaning. Third, properly designed meta description requires the use of ontologies (controlled vocabularies) or structural specifications (complex datatyping such as URI). I have published a possible implementation of such a profile in both html and xml/rdf to demonstrate how it might be implemented. While the use of this profile is open to general use, it should not be considered a standard and is subject to change. The author invites comments and suggestions.

Title Element

[ELEMENT] title (text) [child of head] { container for page title }

id: { a document wide unique identifier }

id—implied

lang { backwards compatible language code }

languageCode—implied

xml:lang { XML 1.0 language code }

languageCodeXml—implied

dir { direction for weak/neutral text }

txtDir—implied

Note: The title element is not considered part of the flow of text. It should be displayed, for example, as the page header when printed or in the window titlebar. Exactly one title is required per document.

Meta Element

[ELEMENT] meta—empty [child of head] { describe this document }

id { a document wide unique identifier }

id—implied

lang { backwards compatible language code }

languageCode—implied

xml:lang { XML 1.0 language code }

languageCodeXml—implied

dir { direction for weak/neutral text }

txtDir—implied

http-equiv { treat this data as part of the http file header }

pcdata—implied

name { the subject of the triple }

pcdata—implied

content { the predicate of the triple }

pcdata—required

scheme { the nature of the predicate }

pcdata—implied

Note: Meta tags provide a means to pass information about the nature of the document. Some search engines use various declarations to classify searches. However, most meta information is not used in the indexing process. The content of a meta tag is defined by the external application that is evaluating it.

Note: the name attribute used in the Meta Elements is different from the name attribute used in other elements. Semantically, it is the subject of the triple, scheme describes the nature of the predicate, and content is the predicate of the triple.

Link Element

[ELEMENT] link—empty [child of head] { describe the relationship between this document and others }

id { a document-wide unique identifier }

id—implied

name { specify the identity of the link in the document.links array }

links—implied

charset { specify the character set of this link's target }

charset—implied

href { specify the network location of this link's target }

uri—implied

hreflang { specify the language of this link's target }

languagecode—implied

type { specify the mimetype of this link's target }

contenttype—implied

rel { specify the relationship between this document and the link's target }

linktypes—implied

rev { specify the reverse relationship between this document and the link's target }

linktypes—implied

media { specify the medium this link applies to }

mediadesc—implied

target { specify the frame for this link's target to open in }

frametarget—implied

Relationship values can be used in principle:

for document specific toolbars/menus when used with the link element in document head e.g. start, contents, previous, next, index, end, help;
to link to a separate style sheet (rel="stylesheet");
to make a link to a script (rel="script");
by stylesheets to control how collections of html nodes are rendered into printed documents, or
to make a link to a printable version of this document e.g. a PostScript or PDF version (rel="alternate" media="print".

Note: the rev and rel attributes describe the semantic relationship between two resources. For example rel="parent" and rev="child". These relationships should be described in the document specified in the head element profile attribute.

Style Element

[ELEMENT] style (style rules) [child of head] { container for style elements }

id: { a document-wide unique identifier }

id—implied

title { specify an informative description of this element }

text—implied

type { specify mimetype of style elements }

contenttype—required ex. "text/css"

media { specify which medium this sheet applies to }

mediadesc—implied

xml:space { preserve whitespace }

(="preserve")—fixed ( 'preserve' )

BODY ELEMENTS

Body Element

[ELEMENT] body (block inline form)[child of html] { container for document content }

id { a document-wide unique identifier }

id—implied

class { a list of style classes }

classes—implied

style { associated style info }

styleSheet—implied

title { advisory title/amplification rendered in a tooltip }

text—implied

lang { backwards compatible language code }

languageCode—implied

xml:lang { XML 1.0 language code }

languageCodeXml—implied

dir { direction for weak/neutral text }

txtDir—implied

background { specify network location of background image }

uri—implied

bgcolor { specify this page's background color }

color—implied

vlink { specify this page's visited link color }

color—implied

alink { specify this page's active link color }

color—implied

onload { specify script to run on page load }

script—implied

onunload { specify script to run on page unload }

script—implied

onclick { a mouse button was clicked }

script—implied

ondblclick { a mouse button was double clicked }

script—implied

onmousedown { a mouse button was pressed down }

script—implied

onmouseup { a mouse button was released }

script—implied

onmouseover { a mouse was moved onto the element }

script—implied

onmousemove { a mouse was moved over the element }

script;—implied

onmouseout { a mouse was moved away from the element }

script—implied

onkeypress { a key was pressed and released }

script—implied

onkeydown { a key was pressed down }

script—implied

onkeyup { a key was released }

script—implied

Div Element

[BLOCK ELEMENT] div (block inline form) [child of body] { generic language/style container }

id { a document-wide unique identifier }

id—implied

class { a list of style classes }

classes—implied

style { associated style info }

styleSheet—implied

title { advisory title/amplification rendered in a tooltip }

text—implied

lang { backwards compatible language code }

languageCode—implied

xml:lang { XML 1.0 language code }

languageCodeXml—implied

dir { direction for weak/neutral text }

txtDir—implied

align { specifies horizontal alignment of elements within this division }

textalign—implied

onclick { a mouse button was clicked }

script—implied

ondblclick { a mouse button was double clicked }

script—implied

onmousedown { a mouse button was pressed down }

script—implied

onmouseup { a mouse button was released }

script—implied

onmouseover { a mouse was moved onto the element }

script—implied

onmousemove { a mouse was moved over the element }

script;—implied

onmouseout { a mouse was moved away from the element }

script—implied

onkeypress { a key was pressed and released }

script—implied

onkeydown { a key was pressed down }

script—implied

onkeyup { a key was released }

script—implied

Span Element

[INLINE ELEMENT] span (text inline) { generic language/style container }

id { a document-wide unique identifier }

id—implied

class { a list of style classes }

classes—implied

style { associated style info }

styleSheet—implied

title { advisory title/amplification rendered in a tooltip }

text—implied

lang { backwards compatible language code }

languageCode—implied

xml:lang { XML 1.0 language code }

languageCodeXml—implied

dir { direction for weak/neutral text }

txtDir—implied

onclick { a mouse button was clicked }

script—implied

ondblclick { a mouse button was double clicked }

script—implied

onmousedown { a mouse button was pressed down }

script—implied

onmouseup { a mouse button was released }

script—implied

onmouseover { a mouse was moved onto the element }

script—implied

onmousemove { a mouse was moved over the element }

script;—implied

onmouseout { a mouse was moved away from the element }

script—implied

onkeypress { a key was pressed and released }

script—implied

onkeydown { a key was pressed down }

script—implied

onkeyup { a key was released }

script—implied

GRAPHIC ELEMENTS

Canvas Element

[ELEMENT] canvas (text inline) { vector graphics }

MEDIA ELEMENTS

Audio Element

[ELEMENT] audio (text inline) { renders audio source }

Video Element

[ELEMENT] video (text inline) { renders video source }

Source Element

[ELEMENT] source (text inline) { renders multiple audio/video sources }

Embed Element

[ELEMENT] embed (text inline) { embed audio/visual plug-in }

Track Element

[ELEMENT] track (text inline) { incorporate text along with audio/video feed }

FORM ELEMENTS

Datalist Element

[ELEMENT] datalist (text inline) { Specifies a list of pre-defined options for input controls }

Keygen Element

[ELEMENT] keygen (text inline) { Defines a key-pair generator field for forms }

Output Element

[ELEMENT] outputs (text inline) { Defines the result of a calculation }

SEMANTIC/STRUCTURAL ELEMENTS

Article Element

[ELEMENT] article (text inline) { defines an article }

Aside Element

[ELEMENT] aside (text inline) { defines content aside from the main content, a sidebar }

BDI Element

[ELEMENT] bdi (text inline) { declares content as subject to bidirectional isolation }

Command Element

[ELEMENT] command (text inline) { defines a command element }

Details Element

[ELEMENT] details (text inline) { defines user hidable details }

Dialog Element

[ELEMENT] dialog (text inline) { defines dialog box }

Summary Element

[ELEMENT] summary (text inline) { defines a summary of content }

Figure Element

[ELEMENT] figure (text inline) { container for self contained content }

FigCaptionElement

[ELEMENT] figcaption (text inline) { a caption for a figure container }

Footer Element

[ELEMENT] footer (text inline) { defines the a page footer }

Header Element

[ELEMENT] header (text inline) { defines the page header }

Mark Element

[ELEMENT] mark (text inline) { defines "marked" or highlighted text }

Meter Element

[ELEMENT] meter (text inline) { defines a scalar measurement within a known range }

Nav Element

[ELEMENT] nav (text inline) { defines navigation links }

Progress Element

[ELEMENT] progress (text inline) { represents the progress of a task }

Ruby Element

[ELEMENT] ruby (text inline) { denotes a ruby annotation used with east Asian typography }

RP Element

[ELEMENT] rp (text inline) { defines what to show in browsers that do not support ruby annotations }

RT Element

[ELEMENT] rt (text inline) { defines an explanation/pronunciation of characters }

Section Element

[ELEMENT] span (text inline) { designates a section of a document }

Summary Element

[ELEMENT] summary (text inline) { defines a summary of content }

Time Element

[ELEMENT] time (text inline) { designates a time and/or date }

Wbr Element

[ELEMENT] wbr (text inline) { indicates a possible break point }