HTML & CSS - The Complete Reference, Fifth Edition (Complete Reference Series)

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 136

Chapter 3: HTML and XHTML Element Reference 155 156 Part I: Core Markup

TIP The support site www.htmlref.com has this reference online and may have updates or fixes to Standard Syntax
this information. Hide content if not supported:

PART I
<!--[if expression]> HTML <![endif]-->
<!-- ... --> (Comment)
This construct encloses text comments that will not be displayed by the browser. It may be Show content if not supported:
used for informational messages for developers as well as to mask content from user agents
that do not support a particular technology. No attributes or events are associated with this <![if expression]> HTML <![endif]>
construct.
The expression language supported by conditional comments is relatively simple, consisting
Standard Syntax of browser type and version identifier, less-than and greater-than operators, and basic
Boolean operators. The syntax is briefly overviewed in Table 3-7.
<!-- ... -->
Examples
Examples
<!--[if IE 5]>
<!-- This is an informational comment that can occur <link rel="stylesheet" href="ie5.css" type="text/css" media="screen">
anywhere in an HTML document. The next few examples <![endif]-->
show how style sheets and scripts are "commented out" to prevent
older browsers from misinterpreting the content. <!--[if lt IE 7]<p>You are using an old IE! Please upgrade.</p><![endif]-->
-->
<!--[if gte IE 7]><p>Great, you are using IE 7 or greater.</p><![endif]-->
<style type="text/css">
<!--
h1 {color: red; font-size: 40px;}
-->
</style> Item Description

<script type="text/javascript"> IE The only currently available value to match is the string "IE", corresponding to Internet
<!-- Explorer.
document.write("hello world"); number An integer or floating-point value corresponding to the version of the browser.
// -->
</script> true The Boolean constant value of true.
false The Boolean constant value of false.
Compatibility
lt Less-than operator; returns true if the first argument is less than the second argument.
HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+, lte Less-than or equal operator; returns true if the first argument is less than or equal to the
XHTML 1.0, 1.1, Basic Netscape 1+, Opera 4+, Safari 1+ second argument.
gt Greater-than operator; returns true if the first argument is greater than the second
Notes
argument.
• Comments often are used to exclude content from older browsers, particularly those
gte Greater-than or equal operator; returns true if the first argument is greater than or equal
that do not understand client-side scripting or style sheets.
to the second argument.
• Page developers should be careful when commenting markup to ensure that other
() Subexpression operators; used to put in parentheses individual components of a more
comments are not included or that two dashes (--) are not embedded in the content complex expression that uses Boolean operators.
commented.
& The Boolean AND operator returns true if all subexpressions evaluate to true.
<!-- .[ ].. --> (Conditional Comment) | The Boolean OR operator returns true if any of the subexpressions evaluates to true.
This Internet Explorer–specific comment style can be used to mask or include content, ! Not operator reverses the Boolean meaning of any expression.
depending on the browser in play.
TABLE 3-7 Microsoft’s Conditional Comment Syntax
Chapter 3: HTML and XHTML Element Reference 157 158 Part I: Core Markup

Compatibility <a> (Anchor)


This element defines a hyperlink, the named target destination for a hyperlink, or both.
No standards support Internet Explorer 5+

PART I
Standard Syntax
Note
<a
• Conditional comments are often used to link special Internet Explorer–specific style accesskey="key"
sheets or to include scripts solely for these browsers. charset="character code for language of linked
resource"
class="class name(s)"
<!DOCTYPE> (Document Type Definition) coords="comma-separated list of numbers"
This SGML construct specifies the document type definition corresponding to the dir="ltr | rtl"
document. There are no attributes or events associated with this element. href="URL"
hreflang="language code"
Standard Syntax id="unique alphanumeric identifier"
lang="language code"
<!DOCTYPE "DTD IDENTIFIER">
name="name of target location"
rel="comma-separated list of relationship values"
Examples rev="comma-separated list of relationship values"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> shape="default | circle | poly | rect"
style="style information"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN"> tabindex="number"
target="frame or window name | _blank | _parent | _self | _top"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www title="advisory text"
.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> type="content type of linked data">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd"> </a>

<!DOCTYPE html> Attributes Introduced by HTML5


contenteditable="true | false | inherit"
Compatibility contextmenu="id of menu "
data-X="user-defined data"
HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+, draggable="true | false | auto"
XHTML 1.0, 1.1, Basic Netscape 1+, Opera 4+, Safari 1+ hidden="hidden"
hreflang="language code"
Notes itemid="microdata id in URL format"
itemprop="microdata value"
• The <!DOCTYPE> statement should be used as the first line of all documents. itemref="space-separated list of IDs that may contain microdata"
• Validation programs might use this construct when determining the correctness of itemscope="itemscope"
an HTML document. itemtype="microdata type in URL format"
media="media-type"
• While HTML5 does not follow the SGML/XML concept of validation, the ping="URL list"
<!DOCTYPE> is still used. HTML5 does however provide for syntax checking rel="comma-separated list of relationship values"
currently dubbed conformance checking. Note though that conformance checking spellcheck="true | false"
does not rely on XML/SGML grammar. tabindex="number"
type="MIME type of linked data"
• Modern browsers may determine what rendering mode to use depending on the
<!DOCTYPE> statement. This is dubbed the doctype switch. An incorrect <!DOCTYPE> Attributes Defined by Internet Explorer
that does not correspond to appropriate markup usage may result in inaccurate
contenteditable="false | true | inherit" (5.5)
display. datafld="name of column supplying bound data" (4)
datasrc="id of data source object supplying data" (4)
disabled="false | true" (5.5)
Chapter 3: HTML and XHTML Element Reference 159 160 Part I: Core Markup

hidefocus="true | false" (5.5) media The draft HTML5 specification suggests the value should be used to indicate
language="javascript | jscript | vbs | vbscript" (4) whether a destination is appropriate for screen, print, PDA, and so on. This is an advisory
methods="http-method" (4) property and does not restrict action.
unselectable="off | on" (5.5)

PART I
urn="URN string" (4)
methods The value of this attribute provides information about the functions that might be
performed on an object. The values generally are given by the HTTP protocol when it is
HTML 4 Event Attributes used; as for the title attribute, it might be useful to include advisory information in
onblur, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, advance in the link. For example, the browser might choose a different rendering of a link as
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup a function of the methods specified; something that is searchable might get a different icon,
or an outside link might render with an indication of leaving the current site. This attribute
HTML5 Event Attributes is neither well understood nor supported, even by the defining browser, Internet Explorer.
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, name This attribute is required in an anchor defining a target location within a page. A value
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, for name is similar to a value for the id core attribute, and it should be an alphanumeric
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, identifier unique to the document. Under the HTML and XHTML specifications, id and name
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
both can be used with an <a> tag as long as they have identical values. HTML5 directly states
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, page authors should not use name even though it may be supported in browsers and id
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, values should be used instead.
onsuspend, ontimeupdate, onvolumechange, onwaiting
ping This HTML5–specific attribute is used to specify the URL(s) that will be notified
Events Defined by Internet Explorer when a link is activated. If more than a single URL is specified, the addresses should be
onactivate, onafterupdate, onbeforeactivate, onbeforecopy, onbeforecut,
separated by spaces. Despite some early Firefox dablings with this attribute by late 2009, no
onbeforedeactivate, onbeforeeditfocus, onbeforepaste, onblur, onclick, browser implements this feature, and privacy concerns about this attribute may keep it
oncontextmenu, oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, from ever being widely adopted.
ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart,
ondrop, onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, rel For anchors containing the href attribute, this attribute specifies the relationship of the
onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, target object to the link object. The value is a comma-separated list of relationship values.
onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onmove, The values and their semantics will be registered by some authority that might have
onmoveend, onmovestart, onpaste, onpropertychange, onreadystatechange, meaning to the document author. The default relationship, if no other is given, is void. The
onresize, onresizeend, onresizestart, onselectstart, ontimeerror rel attribute should be used only when the href attribute is present. Table 3-8 lists possible
rel values defined in HTML5 for <a> tags.
Element-Specific Attributes
rev This attribute specifies a reverse link, the inverse relationship of the rel attribute. It is
charset This attribute defines the character encoding of the linked resource. The value is a useful for indicating where an object came from, such as the author of a document.
space- and/or comma-delimited list of character sets as defined in RFC 2045.
shape This attribute is used to define a selectable region for hypertext source links
coords For use with object shapes, this attribute uses a comma-separated list of numbers to associated with a figure in order to create an image map. The values for the attribute are
define the coordinates of the object on the page.
circle, default, polygon, and rect. The format of the coords attribute depends on the
href This is the single required attribute for anchors defining a hypertext source link. It value of shape. For circle, the value is x,y,r, where x and y are the pixel coordinates for
indicates the link target—either a URL or a URL fragment, which is a name preceded by a the center of the circle and r is the radius value in pixels. For rect, the coords attribute
hash mark (#) specifying an internal target location within the current document. URLs are should be x,y,w,h. The x,y values define the upper-left corner of the rectangle, while w and h
not restricted to Web-based (http) documents. URLs might use any protocol supported by define the width and height, respectively. A value of polygon for shape requires
the browser. For example, file, ftp, and mailto work in most user agents. x1,y1,x2,y2,… values for coords. Each of the x,y pairs defines a point in the polygon, with
successive points being joined by straight lines and the last point joined to the first. The value
hreflang This attribute is used to indicate the language of the linked resource and should of default for shape requires that the entire enclosed area, typically an image, be used.
be set to whichever language is specified in the core lang attribute. Browsers will likely not
annotate links appropriately with language information, but style sheet rules using attribute NOTE It is advisable to use the usemap attribute for the img element and the associated map
selectors could be used to do this. element to define hotspots instead of the shape attribute.
Chapter 3: HTML and XHTML Element Reference 161 162 Part I: Core Markup

Relationship Relationship
Value Explanation Example Notes Value Explanation Example Notes

PART I
alternate The link references an <a href="frenchintro.html" last The link is a reference to <a href="page10.html"
alternate version of the rel="alternate" the last document in a rel="last">Last</a>
document that the link lang="fr"> collection.
is in. For example, this Version Francais</a>
license The link is a reference <a href="/legal.html"
might be a translated
to the legal or copyright rel="license">
version of the document,
information for the Legal Terms</a>
as suggested by the
current document’s
lang attribute.
content. Similar to the
archives The link provides <a href="/history.php" copyright value.
a reference to rel="archives">
next The link references the <a href="page2.html"
document(s) of Document History</a>
next document to visit rel="next">Next Page</a>
historical interest.
in a linear collection
author The link provides a <a href="/tap.html" of documents. It can
reference to information rel="author"> be used, for example,
about the document’s Thomas Powell</a> to “prefetch” the next
author. page, and is supported
bookmark The link references a <a href="index.html" in some browsers such
document that serves as rel="bookmark" as MSN TV and Mozilla-
a bookmark; the title title="permalink"> based browsers.
attribute can be used to Section Permalink</a> nofollow This value provides an <a href="legal.html"
name the bookmark. indication that the link rel="nofollow license">
external The link indicates the <a href="http://ajaxref Likely such links should not be followed Legal Info</a>
referenced document .com/" need visual by automatically
is not local to the rel="external author"> indication as well traversing user agents
current document, Ajax Book (offsite)</a> to indicate they such as search bots.
organizationally or are off site. noreferrer This value indicates the <a href="https://bank.com" Would require
server-wise. browser should not send rel="noreferrer"> browser support.
first The link is a reference to <a href="page1.html" the Referrer header Banking</a>
the first document in a rel="first">Start</a> when following this link.
collection. prev The link references the <a href="page1.html"
help The link references a <a href="help.html" previous document in rel="previous">
help document for the rel="help">Help</a> a linear collection of Previous</a>
current document or documents.
site. search This value indicates that <a href="search/"
index The link references a <link href="docindex.html" the link references a rel="search">Search
page that provides an rel="index" /> search facility used in Site</a>
index for the current a site.
document.
TABLE 3-8 Possible rel Values (continued)
TABLE 3-8 Possible rel Values (continued)
Chapter 3: HTML and XHTML Element Reference 163 164 Part I: Core Markup

Relationship
Examples
Value Explanation Example Notes <!-- anchor linking to external file -->
<a href="http://www.democompany.com/">External Link</a>

PART I
sidebar This value specifies <a href="instructions Assumes that
a URL that should be .html" browsers support <!-- anchor linking to file on local file system -->
displayed in a browser rel="sidebar"> this interface <a href="file:/c:\html\index.html">local file link</a>
sidebar. Load Instructions style.
(Sidebar)</a> <!-- anchor invoking anonymous FTP -->
<a href="ftp://ftp.democompany.com/freestuff">Anonymous FTP
tag This value specfies a <a href="html5.html" Specification link</a>
tag that applies to the rel="tag">HTML5</a> unclear on usage.
document. Current read <!-- anchor invoking FTP with password -->
suggests tag <a href="ftp://joeuser:secretpassword@democompany.com/path/file">
word used within FTP with password</a>
“tagcloud.”
<!-- anchor invoking mail -->
up This value provides <a href="/main/index.html" <a href="mailto:fakeid@democompany.com">Send mail</a>
a link to a document rel="up">Index Page</a>
or section “up” from <!-- anchor used to define target destination within document -->
the current document, <a name="jump">Jump target</a>
usually the parent or
index document for the <!-- anchor linking internally to previous target anchor -->
current URL. <a href="#jump">Local jump within document</a>

TABLE 3-8 Possible rel Values (continued) <!-- anchor linking externally to previous target anchor -->
<a href="http://www.democompany.com/document#jump">
Remote jump to a position within a document</a>

target This attribute specifies the target window for a hypertext source link that references Compatibility
frames. The information linked to target will be displayed in the named window. Frames HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
and windows must be named to be targeted if they do not correspond to a special name XHTML 1.0, 1.1, Basic Netscape 1+, Opera 4+, Safari 1+
value, which include _blank, which indicates a new window; _parent, which indicates the
parent frame set containing the source link; _self, which indicates the frame containing the Notes
source link; and _top, which indicates the full browser window.
• If you use the accesskey attribute with this element page, be wary of reserved
type This attribute specifies the media type in the form of a MIME type for the link target. bindings. See the section “accesskey” under “Other Common Attributes Reference”
Generally, this is provided strictly as advisory information; however, in the future a browser earlier in the chapter for a full discussion of this concern.
might add a small icon for multimedia types. For example, a browser might add a small • The target attribute is not defined in browsers that do not support frames, such as
speaker icon when type is set to audio/wav. For a complete list of recognized MIME types, Netscape 1–generation browsers. Furthermore, target is not allowed under strict
see www.w3.org/TR/html4/references.html#ref-MIMETYPES. variants of XHTML but instead is limited to frameset or transitional form. This
attribute, however, does regain its functionality under HTML5.
urn This supposedly Internet Explorer–supported attribute has some origins in HTML 3.2
and it relates a uniform resource name (URN) with the link. While it is based on standards • See Appendix D for a complete discussion of the URL syntax, which is used as the
work going years back, the meaning of URNs is still not well defined nor has it been value of the src attribute.
demonstrated that this attribute does anything despite its occurrence in MSDN
documentation. <abbr> (Abbreviation)
This element allows authors to clearly indicate a sequence of characters that defines an
abbreviation for a word (such as Mr. instead of Mister, or Calif instead of California).
Chapter 3: HTML and XHTML Element Reference 165 166 Part I: Core Markup

Standard Syntax Events Defined by Internet Explorer


<abbr onactivate, onbeforedeactivate, onbeforeeditfocus, onblur, onclick,
class="class name(s)" oncontrolselect, ondblclick, ondeactivate, ondrag, ondragend, ondragenter,

PART I
dir="ltr | rtl" ondragleave, ondragover, ondragstart, ondrop, onfocus, onhelp, onkeydown,
id="unique alphanumeric identifier" onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave,
lang="language code" onmousemove, onmouseout, onmouseover, onmouseup, onmove, onmoveend,
style="style information" onmovestart, onreadystatechange, onresizeend, onresizestart, onselectstart
title="advisory text">
Examples
</abbr>
<p><abbr title="California">Calif</abbr></p>
Attributes Introduced by HTML5 <p>Isn't <abbr>WWW</abbr> an acronym? Oh what trouble!</p>
accesskey="spaced list of accelerator key(s)"
contenteditable="true | false | inherit" Compatibility
contextmenu="id of menu"
data-X="user-defined data" HTML 4, 4.01, 5 Firefox 1+, Internet Explorer 7+,
draggable="true | false | auto" XHTML 1.0, 1.1, Basic Netscape 6+, Opera 6+, Safari 1+
hidden="hidden"
itemid="microdata id in URL format" Notes
itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata"
• This tag is commonly confused with <acronym>. Debate about just what constitutes
itemscope="itemscope" an acronym as compared with an abbreviation is common among very detail-oriented
itemtype="microdata type in URL format" Web standards experts. While Web developers appear to use an <acronym> tag more
spellcheck="true | false" often than an <abbr> tag, the former is deprecated under HTML5! The confusion
tabindex="number" continues.
• When the title attribute is set on this element, browsers may render a dotted
Attributes Defined by Internet Explorer
underline, which is useful to indicate the presence of a tooltip that might contain the
accesskey="key" (5.5) expansion for the abbreviation.
contenteditable="false | true | inherit" (5.5)
disabled="false | true" (5.5)
hidefocus="true | false" (5.5)
language="javascript | jscript | vbs | vbscript" (4)
tabindex="number" (5.5)
unselectable="on | off" (5.5)

HTML 4 Event Attributes • According to the HTML5 specification, the title attribute should be set to the
expansion of the abbreviation.
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup • The disabled attribute is not currently documented for this element at MSDN,
though it continues to work in Internet Explorer browsers.
HTML5 Event Attributes • The MSDN documentation for this element may have errors regarding the extent of
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, its event support, because many events that are not listed as supported actually
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, worked when tested.
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, • Because there is typically no markup-oriented presentation for this element, it is
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, primarily used in conjunction with style sheets and scripts.
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
<acronym> (Acronym)
onsuspend, ontimeupdate, onvolumechange, onwaiting This element allows authors to clearly indicate a sequence of characters that composes an
acronym (XML, WWW, and so on).
Chapter 3: HTML and XHTML Element Reference 167 168 Part I: Core Markup

Standard Syntax <address> (Address)


<acronym This block element marks up text indicating authorship or ownership of information. It
class="class name(s)" generally occurs at the beginning or end of a Web document and usually is rendered in

PART I
dir="ltr | rtl" italics in the absence of CSS.
id="unique alphanumeric identifier"
lang="language code"
Standard Syntax
style="style information"
title="advisory text"> <address
class="class name(s)"
</acronym> dir="ltr | rtl"
id="unique alphanumeric identifier"
Attributes Defined by Internet Explorer lang="language code"
style="style information"
accesskey="key" (5.5) title="advisory text">
contenteditable="false | true | inherit" (5.5)
disabled="false | true" (5.5) </address>
hidefocus="true | false" (5.5)
language="javascript | jscript | vbs | vbscript" (4)
Attributes Introduced by HTML5
tabindex="number" (5.5)
unselectable="off | on" (5.5) accesskey="spaced list of accelerator key(s)"
contenteditable="true | false | inherit"
HTML 4 Event Attributes contextmenu="id of menu"
data-X="user-defined data"
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, draggable="true | false | auto"
onmousemove, onmouseout, onmouseover, onmouseup hidden="hidden"
itemid="microdata id in URL format"
Events Defined by Internet Explorer itemprop="microdata value"
onactivate, onbeforedeactivate, onbeforeeditfocus, onblur, onclick, itemref="space-separated list of IDs that may contain microdata"
oncontrolselect, ondblclick, ondeactivate, ondrag, ondragend, ondragenter, itemscope="itemscope"
ondragleave, ondragover, ondragstart, ondrop, onfocus, onkeydown, onkeypress, itemtype="microdata type in URL format"
onkeyup, onhelp, onmousedown, onmouseenter, onmouseleave, onmousemove, spellcheck="true | false"
onmouseout, onmouseover, onmouseup, onmove, onmoveend, onmovestart, tabindex="number"
onreadystatechange, onresizeend, onresizestart, onselectstart, ontimeerror
Attributes Defined by Internet Explorer
Examples accesskey="key" (5.5)
<p><acronym title="Extensible Markup Language">XML</acronym> contenteditable="inherit | false | true" (5.5)
disabled="false | true" (5.5)
<acronym lang="fr" title="Soci&eacute;t&eacute; Nationale de Chemins de hidefocus="true | false" (5.5)
Fer">SNCF</acronym></p> language="javascript | jscript | vbs | vbscript" (4)
tabindex="number" (5.5)
unselectable="off | on" (5.5)
Compatibility
HTML 4, 4.01 Firefox 1+, Internet Explorer 4+, HTML 4 Event Attributes
XHTML 1.0, 1.1, Basic Netscape 6+, Opera 6+, Safari 1+ onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup
Notes
• This tag is often confused with <abbr> and is not included in HTML5 as of late 2009. HTML5 Event Attributes
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
• As with an <abbr> tag, most browsers will render a dotted underline when the title oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
attribute is present. ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
• Errors may occur in the MSDN documentation for this element; for example, onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
disabled continues to be supported and many events not documented will work.
Chapter 3: HTML and XHTML Element Reference 169 170 Part I: Core Markup

onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, style="style information"


onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, title="advisory text"
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, vspace="pixels"
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, width="pixels">

PART I
onsuspend, ontimeupdate, onvolumechange, onwaiting
</applet>
Events Defined by Internet Explorer
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate, Attributes Defined by Internet Explorer
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu, accesskey="key" (5.5)
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag, datafld="name of column supplying bound data" (4)
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, datasrc="id of data source object supplying data" (4)
onfocus, onfocusin, onfocusout, onhelp, onkeypress, onkeyup, onlosecapture, hidefocus="true | false" (5.5)
onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, lang="language used for the applet" (4)
onmouseover, onmouseup, onmousewheel, onmove, onmoveend, onmovestart, language="javascript | jscript | vbs | vbscript" (4)
onpaste, onpropertychange, onreadystatechange, onresize, onresizeend, src="URL" (4)
onresizestart, onselectstart, ontimeerror tabindex="number" (5.5)
unselectable="off | on" (5.5)
Example
<address>PINT, Inc.<br> Attributes Defined by Netscape
2105 Garnet Ave.<br> mayscript (4)
San Diego, CA 92109<br>
U.S.A.</address> Events Defined by Internet Explorer
onactivate, onbeforeactivate, onbeforecut, onbeforedeactivate,
Compatibility onbeforeeditfocus, onbeforepaste, onblur, oncellchange, onclick,
oncontextmenu, oncontrolselect, oncut, ondataavailable, ondatasetchanged,
HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
ondatasetcomplete, ondblclick, ondeactivate, onfocus, onfocusin,
XHTML 1.0, 1.1, Basic Netscape 1+, Opera 4+, Safari 1+ onfocusout, onhelp, onkeydown, onkeypress, onkeyup, onload, onlosecapture,
onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup,
Notes onmousewheel, onmove, onmoveend, onmovestart, onpaste, onpropertychange,
• Under HTML 2.0 and 3.2, there are no attributes for <address>. onreadystatechange, onresize, onresizeend, onresizestart, onrowenter,
onrowexit, onrowsdelete, onrowsinserted, onscroll
• An <address> tag may not contain another <address> tag.
Element-Specific Attributes
<applet> (Java Applet)
This element identifies the inclusion of a Java applet. The strict HTML 4.01 definition does alt This attribute causes a descriptive text alternative to be displayed in browsers that do
not include this element; it has been deprecated in favor of <object>. not support Java. Web designers should also remember that content enclosed within an
<applet> tag may also be rendered as alternative text.
Standard Syntax (HTML 4.01 Transitional Only)
archive This attribute refers to the URL of an archived or compressed version of the applet
<applet
and its associated class files, which might help reduce download time.
align="bottom | left | middle | right | top"
alt="alternative text"
archive="comma-separated list of URLs pointing to archive files"
code This attribute specifies the URL of the applet’s class file to be loaded and executed.
class="class name(s)" Applet filenames are identified by a .class filename extension. The URL specified by code
code="URL of Java class file" might be relative to the codebase attribute.
codebase="URL for base referencing"
height="pixels" codebase This attribute gives the absolute or relative URL of the directory where applets’
hspace="pixels" .class files referenced by the code attribute are stored.
id="unique alphanumeric identifier"
name="unique name for scripting reference" mayscript In the Netscape implementation, this attribute allows access to an applet by a
object="serialized representation of applet state" scripting language.
Chapter 3: HTML and XHTML Element Reference 171 172 Part I: Core Markup

name This attribute assigns a name to the applet so that it can be identified by other style="style information"
resources, particularly scripts. tabindex="number"
target="frame or window name | _blank | _parent | _self |
_top" (transitional or frameset only)

PART I
object This attribute specifies the URL of a serialized representation of an applet.
title="advisory text">
src As defined for Internet Explorer 4 and higher, this attribute specifies a URL for an
associated file for the applet. Its meaning and use are unclear and it is not part of the HTML Attributes Introduced by HTML5
standard. contenteditable="true | false | inherit"
contextmenu="id of menu"
Example data-X="user-defined data"
draggable="true | false | auto"
<applet code="atarigame.class" align="left" archive="game.zip"
hidden="hidden"
height="250" width="350">
hreflang="language code"
<param name="difficulty" value="easy">
itemid="microdata id in URL format"
<strong>Sorry, you need Java to play this game.</strong>
itemprop="microdata value"
</applet>
itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
Compatibility itemtype="microdata type in URL format"
media="media-type"
HTML 2, 3.2, 4, 4.01 (transitional) Firefox 1+, Internet Explorer 4+, ping="URL list"
XHTML 1.0 (transitional) Netscape 2+, Opera 4+, Safari 1+ rel="comma-separated list of relationship values"
spellcheck="true | false"
Notes tabindex="number"
• The W3C specification does not encourage the use of <applet> and prefers the use type="MIME type of linked data"
of the <object> tag. Under the strict definition of HTML 4.01, this element is
deprecated and it is cited as obsolete under HTML5, though currently it still appears Attributes Defined by Internet Explorer
in many versions of the specification. Despite the strong desire of standard bodies to hidefocus="true | false" (5.5)
remove this from common use, it is still often used. language="javascript | jscript | vbs | vbscript" (4)
unselectable="off | on" (5.5)
• The HTML 4 specification does not show event-handling attributes for this element,
though you may find that they work. However, given that an applet may include an HTML 4 Event Attributes
interactive object, the sense of capturing events with it as compared to within the
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
applet can be a bit confusing. onmousemove, onmouseout, onmouseover, onmouseup

<area> (Image Map Area) HTML5 Event Attributes


This element defines a hotspot region on an image and associates it with a hypertext link. onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
This element is used only within a <map> tag. oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
Standard Syntax onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
<area
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
accesskey="character"
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
alt="alternative text"
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
class="class name(s)"
onsuspend, ontimeupdate, onvolumechange, onwaiting
coords="comma-separated list of values"
dir="ltr | rtl"
href="URL" Events Defined by Internet Explorer
id="unique alphanumeric identifier" onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
lang="language code" onbeforeeditfocus, onbeforepaste, onclick, oncontextmenu, oncontrolselect,
nohref="nohref" oncopy, oncut, ondblclick, ondeactivate, ondrag, ondragend, ondragenter,
shape="circle | default | poly | rect" ondragleave, ondragover, ondragstart, ondrop, onfocusin, onfocusout,
Chapter 3: HTML and XHTML Element Reference 173 174 Part I: Core Markup

onhelp, onkeydown, onkeypress, onkeyup, onlosecapture, onmouseenter,


onmousedown, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup,
NOTE HTML5 defines a number of rel values for <area>. See the earlier “<a> (Anchor)” section
onmousewheel, onmove, onmoveend, onmovestart, onpaste, onpropertychange, for a list of the values used with the rel attribute.
onreadystatechange, onresizeend, onresizestart, onselectstart, ontimeerror

PART I
shape This attribute defines the shape of the associated hot spot. HTML 4 defines the
Element-Specific Attributes values rect, which defines a rectangular region; circle, which defines a circular region;
poly, which defines a polygon; and default, which indicates the entire region beyond any
alt This attribute contains a text string alternative to display in browsers that cannot defined shapes. Many browsers, notably Internet Explorer 4 and higher, support alternate
display images. values for shapes, including circ, polygon, and rectangle.

coords This attribute contains a set of values specifying the coordinates of the hotspot target This attribute specifies the target window for hyperlink-referencing frames. The
region. The number and meaning of the values depend upon the value specified for the value is a frame name or one of several special names. A value of _blank indicates a new
shape attribute. For a rect or rectangle shape, the coords value is two x,y pairs: left, window. A value of _parent indicates the parent frame set containing the source link.
top, right, and bottom. For a circ or circle shape, the coords value is x,y,r, where x,y A value of _self indicates the frame containing the source link. A value of _top indicates
is a pair specifying the center of the circle and r is a value for the radius. For a poly or the full browser window.
polygon shape, the coords value is a set of x,y pairs for each point in the polygon:
x1,y1,x2,y2,x3,y3, and so on. type This attribute specifies the media type in the form of a MIME type for the link target.
Generally, this is provided strictly as advisory information; however, in the future a browser
href This attribute specifies the hyperlink target for the area. Its value is a valid URL. might add a small icon for multimedia types. For example, a browser might add a small
Either this attribute or the nohref attribute must be present in the element. speaker icon when type is set to audio/wav. For a complete list of recognized MIME types,
see www.w3.org/TR/html4/references.html#ref-MIMETYPES. The attribute is commonly
hreflang This attribute, introduced by HTML5, is used to indicate the language of the understood for the a element but was introduced by HTML5 to image maps.
linked resource in an image map and should be set to whichever language is specified in
the core lang attribute. Browsers will likely not annotate links appropriately with language Examples
information, but style sheet rules using attribute selectors could be used to do this. The <map id="primary" name="primary">
absence of this attribute in previous HTML versions is a clear oversight. <area shape="circle" coords="200,250,25" href="another.html">
<area shape="default" nohref>
media This HTML5 attribute specifies the media format the link destination was defined </map>
for. It is advisory information, and the value should be used to suggest if a destination is
appropriate for screen, print, PDA, and so on. <!-- XHTML syntax -->
<map id="secondary" name="secondary">
name This attribute is used to define a name for the clickable area so that it can be scripted <area shape="rect" coords="10,10,100,100" href="another.html" />
by older browsers. <area shape="default" nohref="nohref" />
</map>
nohref This attribute indicates that no hyperlink exists for the associated area. Either this
attribute or the href attribute must be present in the element. Under XHTML, this attribute Compatibility
will have a value of "nohref"; under standard HTML, no value is required.
HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
ping This HTML5–specific attribute is used to specify the URL(s) that will be notified XHTML 1.0, 1.1 Netscape 1+, Opera 4+, Safari 1+
when a link is activated. If more than a single URL is specified, the addresses should be
separated by spaces. Circa early 2009, no browser implements this feature, and privacy
Notes
concerns about this attribute may keep it from ever being widely adopted. • As an empty element under XHTML or when using XML-style syntax for HTML5,
a trailing slash is required for this element: <area />.
rel HTML5 introduces this attribute to specify link relationships on image maps. The lack • HTML5 does not define rev attribute for <area> tags.
of this attribute in previous specifications was clearly an oversight. For image map areas
containing the href attribute, this attribute specifies the relationship of the target object to the • Netscape 1–level browsers do not understand the target attribute as it relates to
link object. The value is a comma-separated list of relationship values. The values and their frames.
semantics will be registered by some authority that might have meaning to the document • HTML 3.2 defines only alt, coords, href, nohref, and shape.
author. The default relationship, if no other is given, is void. The rel attribute should be used
only when the href attribute is present because it makes no sense with nohref.
Chapter 3: HTML and XHTML Element Reference 175 176 Part I: Core Markup

<article> (Article) <p>The new HTML5 specification is in the works. While many features are
not currently implemented or even well defined yet, progress is being made.
This HTML5 block element defines a subset of a document’s content that forms an Stay tuned to see more new HTML elements added to your Web documents in the
independent part of the document, such as a blog post, article, or other self-contained years to come.</p>

PART I
unit of information, that may be linked to or included in some other content body. </article>

HTML5 Standard Syntax <p>There are other things in this page.</p>


<article
accesskey="spaced list of accelerator key(s)" Compatibility
class="class name(s)"
contenteditable="true | false | inherit" HTML5 Not currently supported by any browser, but can be addressed with a custom element.
contextmenu="id of menu"
data-X="user-defined data" Notes
dir="ltr | rtl" • Early versions of this tag supported pubdate and cite attributes but these were
draggable="true | false | auto"
removed later in favor of nested <time> tags.
hidden="hidden"
id="unique alphanumeric identifier" • It is possible to nest <article> tags and the relationship should logically relate to
itemid="microdata id in URL format" the parent <article> subject matter.
itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata" • This element is not directly implemented in any browser. However, given that most
itemscope="itemscope" browsers can handle custom elements, it is easy enough to simulate the idea of it
itemtype="microdata type in URL format" and even apply a CSS display property for it.
lang="language code"
spellcheck="true | false"
style="style information"
<aside> (Aside)
tabindex="number" This HTML5 element defines a section of a document that encloses content that is
title="advisory text"> tangentially related to the other content the element may be associated with. A simple
example of this element in action might be to specify sidebar content.

</article> HTML5 Standard Syntax


<aside
HTML5 Event Attributes accesskey="spaced list of accelerator key(s)"
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, class="class name(s)"
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, contenteditable="true | false | inherit"
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, contextmenu="id of menu"
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, data-X="user-defined data"
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, dir="ltr | rtl"
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, draggable="true | false | auto"
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, hidden="hidden"
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, id="unique alphanumeric identifier"
onsuspend, ontimeupdate, onvolumechange, onwaiting itemid="microdata id in URL format"
itemprop="microdata value"
Example itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
<p>There are other things in this page.</p> itemtype="microdata type in URL format"
lang="language code"
<article id="article1"> spellcheck="true | false"
<header> style="style information"
<h1>HTML5 is Coming Soon!</h1> tabindex="number"
<p><time pubdate datetime="2009-10-31T12:30-11:00"></time></p> title="advisory text">
</header>
</aside>
Chapter 3: HTML and XHTML Element Reference 177 178 Part I: Core Markup

HTML5 Event Attributes itemtype="microdata type in URL format"


lang="language code"
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, loop="loop"
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, spellcheck="true | false"

PART I
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, src="URL of audio"
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, style="style information"
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, tabindex="number"
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, title="advisory text">
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, </audio>
onsuspend, ontimeupdate, onvolumechange, onwaiting
HTML5 Event Attributes
Example
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
<p>This is the main point I am trying to make.</p> oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
<aside>This is an aside I don't really know how important it is to make, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
but I love to make asides.</aside> onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
<p>Ok now back to the point I was making.</p> onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
Compatibility onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
HTML5 Not currently supported by any browser, but can be addressed with a custom element. onsuspend, ontimeupdate, onvolumechange, onwaiting

Notes Element-Specific Attributes


• This element is not yet directly implemented in any browser. However, given that
most browsers can handle custom elements, it is easy enough to simulate the idea of autobuffer This Boolean attribute indicates whether or not the browser should begin
it and even apply a CSS display property for it. buffering audio right away. It is often set when it is believed that the audio will be played.
This is valuable when autoplay is not set, but the attribute has no meaning if autoplay is
• This element will affect HTML5’s outlining algorithm; see Chapter 2 for an example
set since the browser will play the audio as soon as it can.
of this scheme.
autoplay This Boolean attribute indicates the browser should begin playing the audio as
<audio> (Audio) soon after page load once it has loaded enough of the audio to avoid pausing.
This HTML5 element includes audio in a document.
controls This Boolean attribute is set to indicate whether or not the browser should present
HTML5 Standard Syntax the controls for audio, such as playback, pause, volume, and seek. If not present, no controls
<audio
will be shown and it will be up to the developer to script the control of the media playback.
accesskey="spaced list of accelerator key(s)" When no controls are present, the audio element will not be visually presented.
autobuffer="autobuffer"
autoplay="autoplay" loop This Boolean attribute, if present, indicates that the audio should loop.
class="class name(s)"
contenteditable="true | false | inherit" src This attribute is set to the URL of the audio to show.
contextmenu="id of menu"
controls="controls" Examples
data-X="user-defined data" <audio src="music.ogg" autoplay>
dir="ltr | rtl" <p>No support for HTML5 <code>audio</code> element.</p>
draggable="true | false | auto" </audio>
hidden="hidden"
id="unique alphanumeric identifier" <audio src="music.ogg" loop controls>
itemid="microdata id in URL format" <p>No support for HTML5 <code>audio</code> element.</p>
itemprop="microdata value" </audio>
itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
Chapter 3: HTML and XHTML Element Reference 179 180 Part I: Core Markup

<audio id="audio3"> itemscope="itemscope"


<source src="music.ogg" type="audio/ogg"> itemtype="microdata type in URL format"
<source src="music.mp3"> spellcheck="true | false"
<p>No support for HTML5 <code>audio</code> element.</p> tabindex="number"

PART I
</audio>
Attributes Defined by Internet Explorer
<!-- Trick to make sound in IE browsers -->
<audio src="music.wav"> accesskey="key" (5.5)
<bgsound src="music.wav"> contenteditable="false | true | inherit" (5.5)
</audio> disabled="false | true" (5.5)
hidefocus="true | false" (5.5)
language="javascript | jscript | vbs | vbscript" (4)
Compatibility tabindex="number" (5.5)
unselectable="off | on" (5.5)
HTML5 Firefox 3.5+, Safari 3.1+

Notes HTML 4 Event Attributes


onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
• Alternate content should be placed inside of the audio element for browsers that do onmousemove, onmouseout, onmouseover, onmouseup
not support it.
• Having the correct MIME types on hosted media files is key for playback. You HTML5 Event Attributes
should also make sure the media types used work in the browsers targeted, because onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
currently this varies even when the audio element is supported. oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
• Flash will often be used to avoid cross-browser audio concerns. Until this element is
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
widely supported, developers are advised to continue to use Flash or to rely on onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
elements like bgsound. onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
<b> (Bold) onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting
This inline element indicates that the enclosed text should be displayed in boldface.

Standard Syntax Events Defined by Internet Explorer


<b onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
class="class name(s)" onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
dir="ltr | rtl" oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
id="unique alphanumeric identifier" ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
lang="language code" onfocus, onfocusin, onfocusout, onhelp, onkeypress, onkeyup, onlosecapture,
style="style information" onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout,
title="advisory text"> onmouseover, onmouseup, onmousewheel, onmove, onmoveend, onmovestart,
onpaste, onpropertychange, onreadystatechange, onresize, onresizeend,
</b> onresizestart, onselectstart, ontimeerror

Attributes Introduced by HTML5 Example


accesskey="spaced list of accelerator key(s)" <p>This text is <b>bold</b> for some reason.</p>
contenteditable="true | false | inherit"
contextmenu="id of menu" Compatibility
data-X="user-defined data"
draggable="true | false | auto" HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
hidden="hidden" XHTML 1.0, 1.1 Netscape 1+, Opera 2.1+, Safari 1+
itemid="microdata id in URL format"
itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata"
Chapter 3: HTML and XHTML Element Reference 181 182 Part I: Core Markup

Notes Element-Specific Attributes


• HTML 2 and 3.2 do not define any attributes for this element.
href This attribute specifies the base URL to be used throughout the document for relative
• Modern markup specifications encourage developers to use a <strong> tag

PART I
URL addresses.
instead of <b>.
target For documents containing frames, this attribute specifies the default target window
<base> (Base URL) for every link that does not have an explicit target reference. Aside from named frames or
windows, several special values exist. A value of _blank indicates a new window. A value
This empty element found within the head element specifies the base URL stem to be used
of _parent indicates the parent frame set containing the source link. A value of _self
for all relative URLs contained within a document.
indicates the frame containing the source link. A value of _top indicates the full browser
Standard Syntax window.
<base Examples
href="URL"
target="frame or window name | _blank | _parent | _self | <!-- standard HTML syntax --->
_top" (transitional only)> <base href="http://www.htmlref.com/">

Attributes Introduced by HTML5 <-- XHTML syntax -->


<base href="http://www.htmlref.com/" />
accesskey="spaced list of accelerator key(s)"
contenteditable="true | false | inherit" <!-- with frames -->
contextmenu="id of menu" <base target="_blank" href="http://www.htmlref.com/">
data-X="user-defined data"
draggable="true | false | auto" Compatibility
hidden="hidden"
itemid="microdata id in URL format" HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
itemprop="microdata value" XHTML 1.0, 1.1, Basic Netscape 1+, Opera 4+, Safari 1+
itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
itemtype="microdata type in URL format"
Notes
spellcheck="true | false" • This element should only occur within the head element.
tabindex="number"
• HTML 2.0 and 3.2 define only the href attribute.
• Under XHTML variants and HTML5 using XML-syntax, this empty element requires
Attributes Defined by Internet Explorer a trailing slash: <base />.
id="unique alphanumeric identifier" (4) • HTML5’s current draft specification specifies all common attributes and events, but
frankly many of these make little sense for this element. HTML 4 did not define
HTML5 Event Attributes them for good reason, so it is likely this may be modified back to a syntax closer to
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, that of the HTML 4 specification.
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, <basefont> (Base Font)
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, This element establishes a default font size for a document. Font size then can be varied
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, relative to the base font size by using the font element.
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, Standard Syntax (Transitional Only)
onsuspend, ontimeupdate, onvolumechange, onwaiting
<basefont
color="color name | #RRGGBB"
Events Defined by Internet Explorer face="font name(s)"
onlayoutcomplete, onmouseenter, onmouseleave, onreadystatechange id="unique alphanumeric identifier"
size="1-7 | +/-int">
Chapter 3: HTML and XHTML Element Reference 183 184 Part I: Core Markup

Attributes Defined by Internet Explorer Standard Syntax


id="unique alphanumeric identifier" (4) <bdo
class="class name(s)"

PART I
Events Defined by Internet Explorer dir="ltr | rtl"
id="unique alphanumeric identifier"
onlayoutcomplete, onmouseenter, onmouseleave, onreadystatechange lang="language code"
style="style information"
Element-Specific Attributes title="advisory text">

color This attribute sets the text color using either a named color or a color specified in the </bdo>
hexadecimal #RRGGBB format.
Attributes Introduced by HTML5
face This attribute contains a list of one or more font names. The document text in the
accesskey="spaced list of accelerator key(s)"
default style is rendered in the first font face that the client’s browser supports. If no font contenteditable="true | false | inherit"
listed is installed on the local system, the browser typically defaults to the proportional or contextmenu="id of menu"
fixed-width font for that system. data-X="user-defined data"
draggable="true | false | auto"
size This attribute specifies the font size as either a numeric or relative value. Numeric hidden="hidden"
values range from 1 to 7, with 1 being the smallest and 3 the default. Relative values start itemid="microdata id in URL format"
with + or –, followed by a digit, and modify the current size appropriately. Resulting values itemprop="microdata value"
above 7 become 7 and below 1 become 1. itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
itemtype="microdata type in URL format"
Example spellcheck="true | false"
<!-- Standard HTML syntax --> tabindex="number"
<basefont color="#ff0000" face="Helvetica" size="+2">
Attributes Defined by Internet Explorer
<!-- XHTML style syntax --> accesskey="key" (5.5)
<basefont color="#ff0000" face="Helvetica" size="+2" /> contenteditable="inherit | false | true" (5.5)
disabled="false | true" (5.5)
Compatibility hidefocus="true | false" (5.5)
language="javascript | jscript | vbs | vbscript | xml" (5.0)
HTML 2, 3.2, 4, 4.01 (transitional) Firefox 1+, Internet Explorer 2+, tabindex="number" (5.5)
XHTML 1.0 (transitional) Netscape 1+, Opera 4+, Safari 1+ unselectable="off | on" (5.5)

Notes HTML 4 Event Attributes


• HTML 3.2 supports the basefont element but only with the size attribute. onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup
• The (X)HTML strict and HTML5 specifications do not support this element.
• This element can be imitated with a CSS rule on the body element. HTML5 Event Attributes
• Transitional XHTML 1.0 requires a trailing slash for this empty element: onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
<basefont />. oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
<bdo> (Bidirectional Override) onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
This element is used to override the current directionality of text. onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting
Chapter 3: HTML and XHTML Element Reference 185 186 Part I: Core Markup

Events Defined by Internet Explorer src This attribute specifies the URL of the sound file to be played, which must be one of
onactivate, onafterupdate, onbeforeactivate, onbeforecopy, onbeforecut, the following types: .wav, .au, or .mid.
onbeforedeactivate, onbeforeeditfocus, onbeforepaste, onbeforeupdate,

PART I
onblur, oncellchange, oncontextmenu, oncontrolselect, onclick, oncopy, volume This attribute defines a number between –10,000 and 0 that determines the
oncut, ondblclick, ondeactivate, ondrag, ondragend, ondragenter, loudness of a page’s background sound. Oddly, 0 is full volume and –10,000 is none.
ondragleave, ondragover, ondragstart, ondrop, onerrorupdate, onfilterchange,
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup, Examples
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, <!-- assume examples are in different pages -->
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, <bgsound src="sound1.mid">
onmovestart, onpaste, onpropertychange, onreadystatechange, onresizeend,
onresizestart, onscroll, onselectstart <bgsound src="sound2.au" loop="infinite">

Example <bgsound src="sound3.wav" loop="3" volume="-2000">


<!-- Switch text direction -->
<p>Some other text here <bdo dir="rtl">This text will go right to left in Compatibility
a browser that supports this element</bdo> some more text here.</p>
No standards support Internet Explorer 2+, Opera 4+
Compatibility
Notes
HTML 4, 4.01, 5 Firefox 1+, Internet Explorer 5+, • Similar functionality can be achieved in older versions of Netscape using the
XHTML 1.0, 1.1 Netscape 6+, Opera 7+, Safari 2+ <embed> tag to invoke an audio player as well as using HTML5’s <audio> tag in
supporting browsers.
Note
• You could write bgsound with a self-closing tag <bgsound />. However, since this
• The HTML 4 specification did not specify events for this element; they were added
element is not part of a standard, making it XHTML-like will not make it validate.
later, so this likely was simply an oversight.

<bgsound> (Background Sound) <big> (Big Font)


This inline element indicates that the enclosed text should be displayed in a larger font
This Internet Explorer element associates a background sound with a page.
relative to the current font.
Common Syntax (Defined by Internet Explorer)
Standard Syntax
<bgsound
balance="number" <big
id="unique alphanumeric identifier" class="class name(s)"
loop="number" dir="ltr | rtl"
src="URL of sound file" id="unique alphanumeric identifier"
volume="number"> lang="language code"
style="style information"
title="advisory text">
Events Defined by Internet Explorer
onlayoutcomplete, onmouseenter, onmouseleave, onreadystatechange </big>

Element-Specific Attributes Attributes Defined by Internet Explorer


accesskey="key" (5.5)
balance This attribute defines a number between –10,000 and +10,000 that determines how contenteditable="false | true | inherit" (5.5)
the volume will be divided between the speakers. disabled="false | true" (5.5)
hidefocus="true | false" (5.5)
loop This attribute indicates the number of times a sound is to be played and has either a language="javascript | jscript | vbs | vbscript" (4)
positive numeric value or –1 to specify that it will continuously loop. The keyword tabindex="number" (5.5)
infinite is also supported in many Internet Explorer implementations. unselectable="off | on" (5.5)
Chapter 3: HTML and XHTML Element Reference 187 188 Part I: Core Markup

HTML 4 Event Attributes Compatibility


onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
No standards support Firefox 1+, Netscape 1+, Opera 7+
onmousemove, onmouseout, onmouseover, onmouseup

PART I
Events Defined by Internet Explorer Notes
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
• The attributes class, id, and style were added during the Netscape 4 release;
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu, lang was added from Netscape 6.
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag, • Browsers will generally support the inclusion of the element and allow core
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, attributes for applying style and scripting this element regardless of the lack of
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
blinking text.
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, <blockquote> (Block Quote)
onresizeend, onresizestart, onselectstart, ontimeerror This block element indicates that the enclosed text is an extended quotation. Usually, this is
rendered visually by indentation.
Example
<p>This text is regular size. <big>This text is larger.</big> Now back to Standard Syntax
regular size.</p> <blockquote
cite="URL of source information"
Compatibility class="class name(s)"
dir="ltr | rtl"
HTML 3, 3.2, 4, 4.01 Firefox 1+, Internet Explorer 2+, id="unique alphanumeric identifier"
XHTML 1.0, 1.1, Basic Netscape 1.1+, Opera 2.1+, Safari 1+ lang="language code"
style="style information"
Notes title="advisory text">
• This element was originally introduced in HTML 3 and moved to HTML 3.2.
</blockquote>
• The effect of this element is easily mimicked using the CSS rule font-size:
larger or under older browsers using <font size="+1">. Attributes Introduced by HTML5
• Although HTML5 marks this element as obsolete, interestingly, it currently doesn’t accesskey="spaced list of accelerator key(s)"
mark the small element as such but rather recasts its meaning instead. With the contenteditable="true | false | inherit"
strict (X)HTML variants supporting this element, this element’s status may change. contextmenu="id of menu"
data-X="user-defined data"
draggable="true | false | auto"
<blink> (Blinking Text) hidden="hidden"
This Netscape-specific element causes the enclosed text to flash slowly. itemid="microdata id in URL format"
itemprop="microdata value"
Syntax (Defined by Netscape) itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
<blink itemtype="microdata type in URL format"
class="class name(s)" spellcheck="true | false"
id="unique alphanumeric identifier" tabindex="number"
lang="language code"
style="style information">
Attributes Defined by Internet Explorer
</blink> accesskey="key" (5.5)
contenteditable="false | true | inherit" (5.5)
Example disabled="false | true" (5.5)
hidefocus="true | false" (5.5)
<blink>Annoying, isn't it?</blink> language="javascript | jscript | vbs | vbscript" (4)
tabindex="number" (5.5)
unselectable="off | on" (5.5)
Chapter 3: HTML and XHTML Element Reference 189 190 Part I: Core Markup

HTML 4 Event Attributes <body> (Document Body)


onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, This sectional element encloses a document’s displayable content.
onmousemove, onmouseout, onmouseover, onmouseup

PART I
Standard Syntax
HTML5 Event Attributes <body
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, alink="color name | #RRGGBB" (transitional only)
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, background="URL of background image" (transitional only)
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, bgcolor="color name | #RRGGBB" (transitional only)
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, class="class name(s)"
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, dir="ltr | rtl"
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, id="unique alphanumeric identifier"
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, lang="language code"
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, link="color name | #RRGGBB" (transitional only)
onsuspend, ontimeupdate, onvolumechange, onwaiting style="style information"
text="color name | #RRGGBB" (transitional only)
Events Defined by Internet Explorer title="advisory text"
vlink="color name | #RRGGBB"> (transitional only)
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu, </body>
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
Attributes Introduced by HTML5
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, accesskey="spaced list of accelerator key(s)"
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, contenteditable="true | false | inherit"
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, contextmenu="id of menu"
onresizeend, onresizestart, onselectstart, ontimeerror data-X="user-defined data"
draggable="true | false | auto"
Element-Specific Attributes hidden="hidden"
itemid="microdata id in URL format"
cite The value of this attribute should be a URL for the document in which the information itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata"
cited can be found.
itemscope="itemscope"
itemtype="microdata type in URL format"
Example spellcheck="true | false"
<blockquote cite="http://www.loc.gov/rr/program/bib/ourdocs/DeclarInd.html"> tabindex="number"
We hold these truths to be self-evident, that all men are created equal,
that they are endowed by their Creator with certain unalienable rights, Attributes Defined by Internet Explorer
that among these are life, liberty and the pursuit of happiness.
</blockquote> accesskey="key" (5.5)
bgproperties="fixed" (4)
bottommargin="pixels" (4)
Compatibility contenteditable="false | true | inherit" (5.5)
disabled="false | true" (5.5)
HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
hidefocus="true | false" (5.5)
XHTML 1.0, 1.1, Basic Netscape 1+, Opera 2.1+, Safari 1+ language="javascript | jscript | vbs | vbscript" (4)
leftmargin="pixels" (4)
Notes nowrap="false | true" (4)
• HTML 2.0 and 3.2 do not support any attributes for this element. rightmargin="pixels" (4)
scroll="no | yes" (4)
• Some archaic browsers like WebTV understand the <bq> shorthand notation. tabindex="number" (5.5)
topmargin="pixels" (4)
unselectable="off | on" (5.5)
Chapter 3: HTML and XHTML Element Reference 191 192 Part I: Core Markup

Attributes Defined by Netscape bottommargin This attribute specifies the bottom margin for the entire body of the page and
marginheight="pixels" (4) overrides the default margin. When set to 0 or "", the bottom margin is the bottom edge of
marginwidth="pixels" (4) the window or frame the content is displayed in. CSS margin properties should be used

PART I
instead.
HTML 4 Event Attributes
leftmargin This Internet Explorer–specific attribute sets the left margin for the page, in
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onload, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup, onunload
pixels, overriding the default margin. When set to 0 or "", the left margin is the left edge of
the window or the frame. CSS margin properties should be used instead.
HTML5 Event Attributes link This attribute sets the color for hyperlinks within the document that have not yet been
onabort, onafterprint, onbeforeprint, onbeforeunload, onblur, oncanplay, visited. Its value can be either a browser-dependent named color or a color specified using
oncanplaythrough, onchange, onclick, oncontextmenu, ondblclick, ondrag, the hexadecimal #RRGGBB format. The CSS pseudo-class a:link should be used instead.
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
ondurationchange, onemptied, onended, onerror, onformchange, onforminput,
marginheight This Netscape-specific attribute sets the top margin for the document, in
oninput, oninvalid, onhashchange, onkeydown, onkeypress, onkeyup, onload,
onloadeddata, onloadedmetadata, onloadstart, onmessage, onmousedown,
pixels. If set to 0 or "", the top margin will be exactly on the top edge of the window or
onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onoffline, frame. It is equivalent to combining the Internet Explorer attributes bottommargin and
ononline, onpause, onplay, onplaying, onpopstate, onprogress, onratechange, topmargin. CSS margin properties should be used instead.
onreadystatechange, onredo, onresize, onscroll, onseeked, onseeking,
onselect, onshow, onstalled, onstorage, onsubmit, onsuspend, ontimeupdate, marginwidth This Netscape-specific attribute sets the left and right margins for the page, in
onundo, onunload, onvolumechange, onwaiting pixels, overriding the default margin. When set to 0 or "", the left margin is the left edge of
the window or the frame. It is equivalent to combining the Internet Explorer attributes
Events Defined by Internet Explorer leftmargin and rightmargin. CSS margin properties should be used instead.
onactivate, onafterprint, onbeforeactivate, onbeforecut, onbeforedeactivate,
onbeforeeditfocus, onbeforepaste, onbeforeprint, onbeforeunload, nowrap This Internet Explorer–specific attribute is used to control the wrapping of text
oncontextmenu, oncontrolselect, oncut, ondeactivate, ondrag, ondragend, body width. If set to yes, text should not wrap. The default is no.
ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfilterchange,
onfocusin, onfocusout, onlosecapture, onmouseenter, onmouseleave, rightmargin This Internet Explorer–specific attribute sets the right margin for the page in
onmousewheel, onmove, onmoveend, onmovestart, onpaste, onpropertychange, pixels, overriding the default margin. When set to 0 or "", the right margin is the right edge
onreadystatechange, onresizeend, onresizestart, onscroll, onselect, of the window or the frame. CSS margin properties should be used instead.
onselectstart
scroll This Internet Explorer–specific attribute turns the scroll bars on or off. The default
Element-Specific Attributes value is yes.
alink This attribute sets the color for active links within the document. Active links text This attribute sets the text color for the document. Its value can be either a named
represent the state of a link as it is being clicked. The value of the attribute can be either a color like red or a color specified using the hexadecimal #RRGGBB format. The CSS
named color like red or a color specified in the hexadecimal #RRGGBB format like property color should be used on the body element instead of this attribute.
#FF0000. The CSS pseudo-class a:active should be used instead.
topmargin This Internet Explorer–specific attribute sets the top margin for the document, in
background This attribute contains a URL for an image file, which will be tiled to provide pixels. If set to 0 or "", the top margin will be exactly on the top edge of the window or
the document background. The CSS background-image property should be used instead. frame. CSS margin properties should be used instead.
bgcolor This attribute sets the background color for the document. Its value can be either a vlink This attribute sets the color for hyperlinks within the document that have already
named color like red or a color specified using the hexadecimal #RRGGBB format like been visited. Its value can be either a browser-dependent named color or a color specified
#FF0000. The CSS background-color property should be used instead. using the hexadecimal #RRGGBB format. The CSS pseudo-class a:visited should be used
instead.
bgproperties This attribute, first introduced in Internet Explorer 2, has one value, fixed,
which causes the background image to act as a fixed watermark and not to scroll. The CSS Examples
property background-attachment provides similar functionality.
<body background="checkered.gif"
bgcolor="white"
alink="red"
Chapter 3: HTML and XHTML Element Reference 193 194 Part I: Core Markup

link="blue" itemscope="itemscope"
vlink="red" itemtype="microdata type in URL format"
text="black"> ... </body> spellcheck="true | false"
tabindex="number"

PART I
<body onload="myLoadFunction()"> ... </body>
HTML5 Event Attributes
<body> ... </body>
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
Compatibility ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
HTML 2, 3.2, 4, 4.01, 5+ Firefox 1+, Internet Explorer 2+ onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
XHTML 1.0, 1.1, Basic Netscape 1+, Opera 2.1+, Safari 1+ onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
Notes onsuspend, ontimeupdate, onvolumechange, onwaiting
• When defining text colors, it is important to be careful to specify both foreground
and background explicitly so that they are not masked out by browser defaults set Events Defined by Internet Explorer
by the user. onlayoutcomplete, onlosecapture, onreadystatechange
• Under the strict HTML and XHTML definitions as well as HTML5, CSS should be
used in place of presentation attributes like alink, background, bgcolor, link, Element-Specific Attributes
text, and vlink.
clear This attribute forces the insertion of vertical space so that the tagged text can be
• This element must be present in all documents except those declaring a frame set. positioned with respect to images. A value of left clears text that flows around left-aligned
• Under XHTML, the closing </body> tag is mandatory. images to the next full left margin; a value of right clears text that flows around right-aligned
• HTML5 returns to the old style of making the element optional. images to the next full right margin; and a value of all clears text until it can reach both full
margins. The default value according to the transitional HTML and XHTML specifications is
• HTML5 currently defines all common attributes for this element, though the meaning none, but its meaning generally is supported as just introducing a return and nothing more.
of some in the context of the entire document is a bit unclear. The CSS clear property is preferred over using this attribute.

<br> (Line Break) Examples


This empty element forces a line break. <p>This text will be broken here <br>and continued on a new line.</p>

Standard Syntax <p>XHTML<br />syntax!</p>


<br
<address>
class="class name(s)"
PINT Inc.<br>
clear="all | left | none | right" (transitional only)
2105 Garnet Ave<br>
id="unique alphanumeric identifier"
San Diego, CA 92109<br>
style="style information"
</address>
title="advisory text">

Attributes Introduced by HTML5 Compatibility


accesskey="spaced list of accelerator key(s)" HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
contenteditable="true | false | inherit" XHTML 1.0, 1.1, Basic Netscape 1+, Opera 2.1+, Safari 1+
contextmenu="id of menu"
data-X="user-defined data" Notes
draggable="true | false | auto"
hidden="hidden" • This is an empty element. A closing tag is illegal under all HTML specifications. For
itemid="microdata id in URL format" XHTML compatibility, a closing slash is required: <br />.
itemprop="microdata value"
• Under the strict (X)HTML specifications and HTML5, the clear attribute is not valid.
itemref="space-separated list of IDs that may contain microdata"
The CSS property clear provides the same functionality as the clear attribute.
Chapter 3: HTML and XHTML Element Reference 195 196 Part I: Core Markup

• HTML5 currently defines common attributes for this element that are not defined in Attributes Defined by Internet Explorer
HTML 4 and make little sense given that it is empty. Consult the latest specification contenteditable="false | true | inherit" (5.5)
for clarity. datafld="name of column supplying bound data" (4)

PART I
• Many developers opt to use margin-related CSS properties to perform the course dataformatas="html | text" (4)
datasrc="id of data source object supplying data" (4)
formatting duties that this element performed. It is arguable that degradation in the
hidefocus="true | false" (5.5)
absence of style sheets may actually favor the br element’s continued use. language="javascript | jscript | vbs | vbscript" (4)
unselectable="on | off" (5.5)
<button> (Form Button)
This element defines a rich button that may contain arbitrary content to augment what the HTML 4 Event Attributes
standard <input type="button"> provides. onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup
Standard Syntax
<button HTML5 Event Attributes
accesskey="key" onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
class="class name(s)" oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
dir="ltr | rtl" ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
disabled="disabled" onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
id="unique alphanumeric identifier" onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
lang="language code" onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
name="button name" onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
style="style information" onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
tabindex="number" onsuspend, ontimeupdate, onvolumechange, onwaiting
title="advisory text"
type="button | reset | submit" Events Defined by Internet Explorer
value="button value">
onactivate, onafterupdate, onbeforeactivate, onbeforecut, onbeforedeactivate,
</button> onbeforeeditfocus, onbeforepaste, onbeforeupdate, oncontextmenu, onclick,
oncontrolselect, oncut, ondblclick, ondeactivate, ondragenter, ondragleave,
ondragover, ondrop, onerrorupdate, onfilterchange, onfocusin, onfocusout,
Attributes Introduced by HTML5
onhelp, onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown,
autofocus="autofocus" onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup,
contenteditable="true | false | inherit" onmousewheel, onmove, onmoveend, onmovestart, onpaste, onpropertychange,
contextmenu="id of menu" onreadystatechange, onresize, onresizeend, onresizestart, onselectstart
data-X="user-defined data"
draggable="true | false | auto" Element-Specific Attributes
enctype="mimetype" (for type submit)
form="id of related form element" autofocus This HTML5 Boolean attribute is used to indicate that the user agent should
formaction="URL of form action"
formenctype="MIME type of form encoding"
immediately focus this form item once its containing window object (usually the document)
formmethod="GET | POST | PUT | DELETE" is made active. It takes an attribute value of autofocus when using the XML-style syntax
formnovalidate="true | false" for XHTML5.
formtarget="name of target frame, region or window"
hidden="hidden" form This HTML5 attribute should be set to a string that corresponds to the id of the form
itemid="microdata id in URL format" element that the button is associated with. This allows form elements in one form to trigger
itemprop="microdata value" actions in others.
itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope" formaction This HTML5 attribute specifies a URL to target when the button is clicked,
itemtype="microdata type in URL format" similar to the use of the action attribute on a form element.
spellcheck="true | false"
tabindex="number" formenctype Under HTML5 this attribute is set to the MIME type for how data should be
type="add | remove | move-down | move-up"
transmitted to the URL specified in the action attribute. Common values include
Chapter 3: HTML and XHTML Element Reference 197 198 Part I: Core Markup

application/x-www-form-urlencoded (the default value when not specified), Notes


multipart/formdata, and text/plain.
• It is not appropriate to associate an image map with an <img> tag that appears as
formmethod This HTML5 attribute indicates how form information should be transferred the content of a button element.

PART I
to the server using a particular HTTP method. A get value in the attribute indicates that • HTML5 may eventually add new values to the type attribute. Already many new
form data should be appended to the URL specified by the action attribute creating a type values have been proposed in different forums, such as add, remove, move-up,
query string. This approach is quite simple but imposes a size limitation that is difficult to and move-down. These may produce predefined button styles, including icons in
gauge (may be as low as 2 kilobytes or even ~300 characters in real situations). A value of some user agents, but so far their inclusion is far from certain.
post for this attribute transfers the data of the form in the message body using the HTTP
• The HTML 4.01 specification reserves the data-binding attributes datafld,
POST method, which imposes no data size limitation. Browsers may allow for other HTTP
dataformatas, and datasrc for future use. Internet Explorer does support them.
methods like delete or put, as suggested by the HTML5 specification, but so far such
usage is rare. The post value must be used when file attachments are used in a form. • The default type of a <button> is submit under Internet Explorer 8’s standards
mode, and is button under IE 8’s compatibility mode.
formnovalidate This HTML5 Boolean attribute is used to indicate a form should not be
• Under Internet Explorer 8, the value of a submitted button depends on the
validated during submission. It is false by default but may be controlled either on the
compatibility mode of the browser. In IE 8 standards mode, the contents of the
button directly or on a containing or related form. Initially this was simply known as
attribute value is sent, as compared to IE 8 compatibility mode, where the
novalidate.
innerText value of the <button> tag used is sent.
formtarget This HTML5 attribute is set to the name of a window or frame that the button
action will target the result of action, similar to the target attribute on <a> and <form> <canvas> (Canvas for Drawing)
tags. Initially, this attribute was simply target in early drafts of HTML5. This element defines a region in the document to be used as a bitmap canvas where script
name This attribute is used to define a name for the button so that it can be scripted by code can be used to render graphics interactively. It should be noted that the markup syntax
older browsers or used to provide a name for submit buttons when a page has more than of this element is a relatively minor portion of what is required to effectively utilize the
one. The id attribute is preferred for scripting purposes. drawing technology found within.

type This attribute defines the action of the button. Possible values include button, reset, HTML5 Standard Syntax
and submit, which are used to indicate that the button is a plain button, form reset button, <canvas
or form submission button, respectively. The XHTML specification indicates submit is the accesskey="spaced list of accelerator key(s)"
default, but browsers may not enforce this in practice. class="class name(s)"
contenteditable="true | false | inherit"
value contextmenu="id of menu"
This attribute defines the value that is sent to the server when the button is clicked. This data-X="user-defined data"
might be useful when using multiple submit buttons that perform different actions, to dir="ltr | rtl"
draggable="true | false | auto"
indicate to the handling server-side program which button was clicked. height="pixels"
hidden="hidden"
Examples id="unique alphanumeric identifier"
<button name="Submit" itemid="microdata id in URL format"
value="Submit" itemprop="microdata value"
type="Submit">Submit Request</button> itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
<button type="button" itemtype="microdata type in URL format"
onclick="doSomething();">Click This Button</button> lang="language code"
spellcheck="true | false"
<button type="button"> style="style information"
<img src="polkadot.gif" alt="Polkadot"></button> tabindex="number"
title="advisory text"
Compatibility width="pixels">

HTML 4, 4.01, 5 Firefox 1+, Internet Explorer 4+, </canvas>


XHTML 1.0, 1.1 Netscape 6+, Opera 5+, Safari 1+
Chapter 3: HTML and XHTML Element Reference 199 200 Part I: Core Markup

HTML5 Event Attributes Name Description Example


onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, addColorStop(offset, Adds a new stop to the gradient. lg.addColorStop(0,

PART I
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, color) offset must be a number "#B03060");
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, between 0 and 1. color must lg.addColorStop(0.5,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, be a CSS color. "#4169E1");
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, lg.addColorStop(1,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, "#FFE4E1");
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting TABLE 3-10 CanvasGradient Methods

API Reference
A brief overview of the canvas scripting API is provided in Tables 3-9 through 3-21. Selected
examples of use can be found in Chapter 2. Name Description Example
Example restore() Retrieves the last state saved by the save() context.restore();
<canvas id="canvas1" height="400" width="400"> function and resets settings to that state.
<p class="error">Canvas-Supporting Browser Required</p> save() Adds the current state to the drawing state stack. context.save();
</canvas>
<script type="text/javascript"> TABLE 3-11 canvas State Preservation Methods
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
/* draw simple figure of red and green squares */
context.fillStyle = "rgb(255,0,0)";
context.fillRect(0,0,100,100); Name Description Example
context.fillStyle = "rgb(0,255,0)";
context.fillRect(25,25,50,50);
rotate(angle) Adds a clockwise rotation specified context.rotate(Math
</script> by angle transformation to the .PI/8);
transformation matrix.
scale(x, y) Adds the scaling transformation to the context.scale(2, 2);
transformation matrix. x and y define
Name Description Example how much to stretch on the x and y
axis respectively.
getContext Returns an object that exposes var context = canvas
setTransform (m11, Resets the transformation matrix context.setTransform
(contextId) the API necessary for accessing .getContext('2d');
m12, m21, m22, dx, to the identity matrix and then calls (1, 1, 1 ,0, 0, 0);
the drawing functions. Currently,
dy) transform (m11, m12, m21,
the only contextId is '2d'.
m22, dx, dy).
toDataUrl([type]) Returns a data: URL of the var dataurl = canvas
transform(m11, m12, Multiplies the current transformation var sin = Math
canvas image as a file of the .toDataUrl();
m21, m22, dx, dy) matrix by the matrix defined by: .sin(Math.PI/6);
specified type or a PNG file by
m11 m21 dx var cos = Math
default.
m12 m22 dy .cos(Math.PI/6);
height Height of the canvas element. var canvas = document 0 0 1 context.transform(sin,
Default value is 150. .getElementById("canvas1"); cos, -cos, sin, 0, 0);
canvas.height = 300;
translate(x, y) Adds the translation transformation to context.translate
width Width of the canvas element. var canvas = document the current transformation matrix. The (100, 100);
Default value is 300. .getElementById("canvas1"); transformation moves the origin to the
canvas.width = 600; location specified by (x, y).

TABLE 3-9 Primary canvas Methods and Properties TABLE 3-12 Primary canvas Transformation Methods
Chapter 3: HTML and XHTML Element Reference 201 202 Part I: Core Markup

Name Description Example Name Description Example


globalAlpha The default alpha value for context.globalAlpha = .6; createLinearGradient Creates a new var lg = context

PART I
all fills and strokes. Value (x0, y0, x1, y1) CanvasGradient object with .createLinearGradient
must be between 0 and 1. the start point (x0,y0) and the (0, 0, 300, 200);
The default is 1.0. end point (x1,y1).
globalCompositeOperation Sets how shapes and context. createPattern Creates a CanvasPattern that pattern = context
images are written to the globalCompositeOperation (image, repetition) can be used as a fillStyle .createPattern(img,
canvas. See Table 3-14 for = "destination-over"; or strokeStyle. The pattern "repeat");
the various options. A is the starts with the specified image context.fillStyle =
object being written (source) and then repeats according pattern;
and B is the current canvas to repetition. Options are
drawing (destination). The repeat, repeat-x, repeat-y,
default is source-over. and no-repeat.
createRadialGradient Creates a RadialGradient var rg = context
TABLE 3-13 canvas Compositing Properties (x0, y0, r0, x1, with the start circle at origin .createRadialGradient
y1, r1) (x0,y0) with radius r0 and the (105,105,40,112,120,70);
end circle at origin (x1,y1) with
radius r1.
fillStyle The color or style applied on context.fillStyle =
Compositing Operation Keyword Description an invocation of fill(). The "rgb(166,42,42)";
copy Displays only A. value can be a CSS color, a
CanvasGradient as created
destination-atop Displays B where A and B overlap. Displays A where they do not by createRadialGradient()
overlap. Does not display B where they do not overlap. and
destination-in Displays B only in the region that A and B overlap. No A is createLinearGradient(), or
displayed. a CanvasPattern as created
by createPattern(). The
destination-out Displays B only in the region that A and B do not overlap. No A is
default fill style is black.
displayed.
strokeStyle The color or style applied on the context.strokeStyle =
destination-over Displays all of B and displays A where they do not overlap.
invocation of stroke(). The "rgba(218, 112, 214,
lighter In overlapping regions, displays the sum of A and B. In value can be a CSS color value, 0.4)";
nonoverlapping regions, A and B appear normally. a CanvasGradient as created
source-atop Displays A where A and B overlap. Displays B where they do not by createRadialGradient()
overlap. Does not display A where they do not overlap. and
createLinearGradient(), or
source-in Displays A only in the region that A and B overlap. No B is a CanvasPattern as created
displayed. by createPattern(). The
source-out Displays A only in the region that A and B do not overlap. No B is default stroke style is black.
displayed.
TABLE 3-15 canvas Color and Style Properties and Methods
source-over Displays all of A and displays B where they do not overlap.
xor In overlapping regions, nothing is displayed. In nonoverlapping
regions, A and B appear normally.

TABLE 3-14 canvas Compositing Options


Chapter 3: HTML and XHTML Element Reference 203 204 Part I: Core Markup

Name Description Example Name Description Example


lineCap Sets the type of endings that are put on lines. The context.lineCap = clearRect Clears the pixels of the specified rectangle context.fillRect

PART I
choices are butt, round, and square. A value "round"; (x, y, w, h) with starting point (x,y) and width w and (100, 100, 100, 100);
of butt indicates that there is a flat edge at the height h. context.clearRect(125,
end of the specified line. A value of round adds 125, 50, 50);
a semicircle with a diameter the width of the line fillRect Fills the rectangle defined by the starting context.fillRect
to the end of the line. A value of square adds a (x, y, w, h) point (x,y) and the width w and height h. (100, 100, 100, 100);
rectangle with a width half of the line’s width and Uses the fillStyle to determine how the
a length equal to the line’s width at the end of the fill should appear.
line. The default is butt.
strokeRect Draws the outline for the rectangle defined context.strokeRect
lineJoin Sets the type of corners that occur when two context.lineJoin = (x, y, w, h) by the starting point (x,y) and the (50, 100, 200, 100);
lines meet. The choices are miter, bevel, and "round"; width w and height h. Uses lineWidth,
round. On all joins, a filled triangle connecting the lineCap, lineJoin, miterLimit, and
two lines is connected. A value of bevel uses only strokeStyle to determine how the stroke
this filled triangle. A value of miter indicates that should appear.
in addition to the triangle, a second filled triangle
is created. The second triangle consists of a line
TABLE 3-18 canvas Rectangle Methods
that connects the two lines as well as the two lines
themselves extended until they meet. A value of
round indicates that corners should be rounded
when lines meet. The arc has a diameter equal to
the width of the line. The default is miter. Name Description Example
lineWidth Sets the width of the lines. The default value is 1. context.lineWidth = 5; arc (x, y, radius, Draws an arc between two context.arc(115,120,5,0,
miterLimit Sets the max length that a line will be extended if context.miterLimit = 1; startAngle, endAngle, points that has an origin set Math.PI*2,true);
lineJoin is set to miter. If the length necessary anticlockwise) to (x,y) and a radius set as
to join the lines is greater than the miterLimit, defined by radius. The start
the join will not occur. The default is 10. point is defined as the point
on the arc where the angle is
TABLE 3-16 canvas Line Properties startAngle, and the end
point is the point on the arc
where the angle is endAngle.
The actual arc is drawn along
Name Description Example the circumference between the
two points either clockwise or
shadowBlur Sets the size of the blurring effect. context.shadowBlur = 4; counterclockwise depending on
The default value is 0. the setting.
shadowColor Sets the color of the shadow. The context.shadowColor = arcTo (x1, y1, x2, Draws an arc with the radius context.moveTo(80, 50);
default is transparent black. "rgba(255, 48, 48, 0.5)"; y2, radius) radius and that goes context.arcTo(250, 50,
shadowOffsetX Sets the distance that the shadow will context.shadowOffsetX = 5; between two points that are 250, 250, 30);
be offset in the horizontal direction. determined by getting tangent
The default value is 0. points on two lines. The first
line is drawn from the last
shadowOffsetY Sets the distance that the shadow context.shadowOffsetY = -10; point in the subpath to (x1,
will be offset in the vertical direction. y1). The second line is drawn
The default value is 0. from (x1, y1) to (x2, y2).

TABLE 3-17 canvas Shadow Properties TABLE 3-19 canvas Path API Methods
Chapter 3: HTML and XHTML Element Reference 205 206 Part I: Core Markup

Name Description Example Name Description Example


beginPath() Sets the subpath list to 0. Any context.beginPath(); fillText(text, x, Writes text at location context.font = "30px

PART I
paths set and undrawn at this y [, maxWidth]) (x,y) and fills it according sans-serif";
point will not be displayed. to the fillStyle. The context.fillStyle = "rgba
text is written according (0, 255, 0, .5)";
bezierCurveTo Connects the last point in context.moveTo(50,50);
to the values set for context.fillText("Canvas is
(cp1x, cp1y, cp2x, the subpath to (x,y) using context.bezierCurveTo(65,
font, textAlign, and great!", 10, 40);
cp2y, x, y) (cp1x, cp1y) and (cp2x, 25, 85, 25, 100, 50);
textBaseline.
cp2y) as control points for a
cubic Bézier curve. font Sets the font for a text context.font = "bold 20px
string. Must be in the same Courier New";
clip() Creates a new clipping region context
format as CSS fonts. The
by intersecting the current .arc(150,150,100,0,Math
default is 10px sans-
clipping region with the area .PI*2,true);
serif.
defined in the current path. context.clip();
measureText(text) Returns a TextMetrics context.font = "bold 20px
closePath() Closes the last subpath and context.closePath();
object for the given text. Verdana";
creates a new subpath that
Currently, the only property tm = context.measureText
has the previous subpath’s
for that object is width. ("I love Canvas");
last point as its first point.
var width = tm.width;
fill() Fills any open subpaths and context.lineTo(100,100);
strokeText(text, Writes text at location context.font = '30px
then closes them. Uses the context.lineTo(0,200);
x, y (x,y) according to the sans-serif';
fillStyle to determine how context.lineTo(100,300);
[, maxWidth]) strokeStyle. The context.strokeStyle = "orange";
the fill should appear. context.fill();
text is written according context.strokeText('Canvas is
lineTo(x, y) Draws a line from the last point context.lineTo(100,100); to the values set for great!', 10, 40);
in the subpath to the point font, textAlign, and
defined by (x, y). textBaseline.
moveTo(x, y) Creates a new subpath with context.moveTo(150,50); textAlign Sets the alignment of context.textAlign = "end";
the point (x, y) added to it. a text string. The x, y
quadraticCurveTo Connects the last point in context.moveTo(50,150); points specified will line
(cpx, cpy, x, y) the subpath to (x,y) using context up according to the option
(cpx, cpy) as the control .quadraticCurveTo(125, chosen. The options are
point for a quadratic Bézier 225, 200, 150); start, end, left, right,
curve. and center. The default
value is start.
rect (x, y, w, h) Creates a new subpath context.rect (50, 50, 100,
containing the rectangle 100); textBaseline Sets the text baseline for context.textBaseline =
defined by starting point (x, a text string. The options "ideographic";
y) with width w and height h. are top, hanging,
middle, alphabetic,
stroke() Draws the strokes of the context.moveTo(50, 250); ideographic, and
current path and display based context.lineTo(0, 200); bottom. The default value
on the settings specified context.lineTo(50, 150); is alphabetic.
by lineWidth, lineCap, context.lineTo(0,100);
lineJoin, miterLimit, and context.lineTo(50, 50); TABLE 3-20 canvas Text API Methods and Properties
strokeStyle. context.stroke();

TABLE 3-19 canvas Path API Methods (continued)


Chapter 3: HTML and XHTML Element Reference 207 208 Part I: Core Markup

• User agents that do not understand <canvas> should render the contents of the
Name Description Example
element instead.
createImageData(w, h) Instantiates a new blank context.createImageData • It is possible to simulate the <canvas> tag under Internet Explorer using one of

PART I
createImageData ImageData object with the (100,200); numerous libraries such as Google’s ExplorerCanvas (http://excanvas.sourceforge
(imagedata) width w and height h or with .net/). Such libraries rely on the use of IE’s proprietary VML (Vector Markup
the same dimensions as
Language) technology and are likely going to operate slowly given the required
imagedata.
translation as compared to a native <canvas> implementation.
drawImage(image, dx, dy) Draws an image specified by context.drawImage
• Chapter 2 has a discussion of <canvas> and its use with JavaScript.
drawImage(image, dx, dy, image onto the canvas. The (img,200,75,100,100,50,
dw, dh) image is placed at (dx,dy). 50,300,300);
drawImage(image, sx, sy, If dw and dh are specified, the context.drawImage <caption> (Table Caption)
sw, sh, dx, dy, dw, dh) image will have that width and (img,0,0,400,400); This element is used within the table element to define a caption.
height, respectively. In the last
case, the section of the image Standard Syntax
to be placed on the canvas <caption
is specified by the rectangle align="bottom | left | right | top" (transitional only)
defined by sx, sy, sw, and sh. class="class name(s)"
getImageData (sx, sy, Returns an ImageData object var img = context dir="ltr | rtl"
id="unique alphanumeric identifier"
sw, sh) that contains the pixel data .getImageData(0, 0,
lang="language code"
for the rectangle that starts at 100, 100);
style="style information"
(sx, sy) with a width sw and title="advisory text">
height sh.
putImageData( imagedata, Writes the specified ImageData context.putImageData </caption>
dx, dy[, dirtyX, to the canvas. (img, 75, 75);
dirtyY, dirtyWidth, Attributes Introduced by HTML5
dirtyHeight]) accesskey="spaced list of accelerator key(s)"
data Represents the pixels in the alert(img.data.length); contenteditable="true | false | inherit"
contextmenu="id of menu"
image.
data-X="user-defined data"
height Height of the image in pixels. alert(img.height); draggable="true | false | auto"
hidden="hidden"
width Width of the image in pixels. alert(img.width);
itemid="microdata id in URL format"
itemprop="microdata value"
TABLE 3-21 canvas ImageData API Methods and Properties itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
itemtype="microdata type in URL format"
spellcheck="true | false"
Compatibility tabindex="number"

HTML5 Firefox 1.5+, Attributes Defined by Internet Explorer


Opera 9+, Safari 2+
accesskey="key" (5.5)
contenteditable="false | true | inherit" (5.5)
Notes hidefocus="true | false" (5.5)
• When this element was initially introduced in 2004 by Apple, it caused some degree language="javascript | jscript | vbs | vbscript" (4)
of controversy in the Web community because developers assumed that it would tabindex="number" (5.5)
open the floodgates to vendor-specific extensions. unselectable="on | off" (5.5)
valign="bottom | top" (4)
• Under some Safari implementations, the close </canvas> tag is not required or
understood.
Chapter 3: HTML and XHTML Element Reference 209 210 Part I: Core Markup

HTML 4 Event Attributes Notes


onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, • There should be only one caption per table.
onmousemove, onmouseout, onmouseover, onmouseup
• HTML 3.2 defines only the align attribute with values of bottom and top. No

PART I
HTML5 Event Attributes other attributes are defined prior to HTML 4.
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, <center> (Center Alignment)
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, This element causes the enclosed content to be centered within the margins currently in
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, effect. Margins are either the default page margins or those imposed by overriding elements
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, such as tables. The element is considered deprecated or obsolete, and CSS properties such as
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, text-align and margin should be used instead.
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting
Standard Syntax (Transitional Only)
<center
Events Defined by Internet Explorer class="class name(s)"
dir="ltr | rtl"
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate, id="unique alphanumeric identifier"
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu, lang="language code"
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag, style="style information"
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, title="advisory text">
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, </center>
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
onmovestart, onpaste, onpropertychange, onreadystatechange, onresizeend,
onresizestart, onselectstart, ontimeerror
Attributes Defined by Internet Explorer
accesskey="key" (5.5)
Element-Specific Attributes contenteditable="false | true | inherit" (5.5)
disabled="false | true" (5.5)
align This attribute specifies the alignment of the caption. HTML 4 defines bottom, left, hidefocus="true | false" (5.5)
language="javascript | jscript | vbs | vbscript" (4)
right, and top as legal values. Internet Explorer also supports center. Because this
tabindex="number" (5.5)
attribute does not provide the possibility to combine vertical and horizontal alignments, unselectable="on | off" (5.5)
Microsoft has introduced the valign attribute for the caption element.
HTML 4 Event Attributes
valign This Internet Explorer–specific attribute specifies whether the table caption appears
at the top or bottom. The default is top. onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup
Example
Events Defined by Internet Explorer
<table border="1">
<caption align="top">Our High-Priced Menu</caption> onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
<tr> onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
<td>Escargot</td> oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
<td>Filet Mignon</td> ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
<td>Big Mac</td> onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
</tr> onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
</table> onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
onmovestart, onpaste, onpropertychange, onreadystatechange, onresizeend,
onresizestart, onselectstart, ontimeerror
Compatibility
HTML 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 4+,
XHTML 1.0, 1.1, Basic Netscape 3+, Opera 4+, Safari 1+
Chapter 3: HTML and XHTML Element Reference 211 212 Part I: Core Markup

Examples itemid="microdata id in URL format"


itemprop="microdata value"
<center>This is in the center of the page.</center> itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"

PART I
<center> itemtype="microdata type in URL format"
<p>Larry</p> spellcheck="true | false"
<p>Curly</p> tabindex="number"
<p>Moe</p>
</center>
Attributes Defined by Internet Explorer
Compatibility accesskey="key" (5.5)
contenteditable="false | true | inherit" (5.5)
HTML 3.2, 4, 4.01 (transitional) Firefox 1+, Internet Explorer 2+, disabled="false | true" (5.5)
XHTML 1.0 (transitional) Netscape 1+, Opera 4+, Safari 1+ hidefocus="true | false" (5.5)
language="javascript | jscript | vbs | vbscript" (4)
Notes tabindex="number" (5.5)
unselectable="on | off" (5.5)
• The center element defined by the W3C is a shorthand notation for <div
align="center">. The content model for this element is odd, as the <center> tag HTML 4 Event Attributes
is often found enclosing large sections of content or fragments. Typically, it has been
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
noted that page authors who tend to use the element don’t care about the content onmousemove, onmouseout, onmouseover, onmouseup
model and use tags out of context freely.
• The strict versions of HTML and XHTML do not include the center element, but it HTML5 Event Attributes
is easily imitated with the text-align CSS property. onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
• HTML5 defines the center element as obsolete. oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
• HTML 3.2 does not support any attributes for this element. onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
<cite> (Citation) onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
This element indicates a citation from a book or other published source and usually is onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
rendered in italics by a browser. onsuspend, ontimeupdate, onvolumechange, onwaiting

Standard Syntax Events Defined by Internet Explorer


<cite onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
class="class name(s)" onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
dir="ltr | rtl" oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
id="unique alphanumeric identifier" ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
lang="language code" onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
style="style information" onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
title="advisory text"> onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
onmovestart, onpaste, onpropertychange, onreadystatechange, onresizeend,
</cite> onresizestart, onselectstart, ontimeerror

Attributes Introduced by HTML5 Example


accesskey="spaced list of accelerator key(s)" <p>This example is taken from <cite>HTML &amp; CSS: The Complete
contenteditable="true | false | inherit" Reference</cite> a book by Thomas Powell.</p>
contextmenu="id of menu"
data-X="user-defined data"
draggable="true | false | auto"
Compatibility
hidden="hidden" HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
XHTML 1.0, 1.1, Basic Netscape 1+, Opera 4+, Safari 1+
Chapter 3: HTML and XHTML Element Reference 213 214 Part I: Core Markup

Note onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,


onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
• HTML 2 and 3.2 do not indicate any attributes for this element. onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting

PART I
<code> (Code Listing)
This element indicates that the enclosed text is source code in a programming language. Events Defined by Internet Explorer
Usually it is rendered in a monospaced font. onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
Standard Syntax oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
<code
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
class="class name(s)"
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
dir="ltr | rtl"
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
id="unique alphanumeric identifier"
onmovestart, onpaste, onpropertychange, onreadystatechange, onresizeend,
lang="language code"
onresizestart, onselectstart, ontimeerror
style="style information"
title="advisory text">
Example
</code> <p>To increment a variable <var>count</var>, use
<code> count++ </code> or <code> count = count + 1 </code>.</p>
Attributes Introduced by HTML5
accesskey="spaced list of accelerator key(s)" Compatibility
contenteditable="true | false | inherit"
contextmenu="id of menu" HTML 2, 3.2, 4, 4.01,5 Firefox 1+, Internet Explorer 2+,
data-X="user-defined data" XHTML 1.0, 1.1, Basic Netscape 1+, Opera 4+, Safari 1+
draggable="true | false | auto"
hidden="hidden" Notes
itemid="microdata id in URL format" • This element is best used for short code fragments because it does not preserve
itemprop="microdata value"
white space.
itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope" • HTML 2.0 and 3.2 do not support any attributes for this element.
itemtype="microdata type in URL format"
• Internet Explorer documentation does not list accesskey or tabindex for this
spellcheck="true | false"
tabindex="number" element. This is likely an oversight, as it is found on nearly all other elements in the
IE object model.
Attributes Defined by Internet Explorer
contenteditable="false | true | inherit" (5.5) <col> (Table Column)
disabled="false | true" (5.5) This element defines a column within a table and is used for grouping and alignment
language="javascript | jscript | vbs | vbscript" (4) purposes. It is always found within a colgroup element.
unselectable="on | off" (5.5)
Standard Syntax
HTML 4 Event Attributes <col
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, align="center | char | justify | left | right"
onmousemove, onmouseout, onmouseover, onmouseup char="character"
charoff="number"
HTML5 Event Attributes class="class name(s)"
dir="ltr | rtl"
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, id="unique alphanumeric identifier"
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, lang="language code"
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, span="number"
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, style="style information"
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
Chapter 3: HTML and XHTML Element Reference 215 216 Part I: Core Markup

title="advisory text" charoff This attribute is used to indicate the number of characters by which the column
valign="baseline | bottom | middle | top" data should be offset from the alignment characters specified by the char value.
width="column width specification">

PART I
span When present, this attribute applies the attributes of the col element to additional
Attributes Introduced by HTML5 consecutive columns.
accesskey="spaced list of accelerator key(s)"
contenteditable="true | false | inherit" valign This attribute specifies the vertical alignment of the text within the cell. Possible
contextmenu="id of menu" values for this attribute are baseline, bottom, middle, and top.
data-X="user-defined data"
draggable="true | false | auto" width This attribute specifies a default width for each column in the current column group.
hidden="hidden" In addition to the standard pixel and percentage values, this attribute might take the special
itemid="microdata id in URL format" form 0*, which means that the width of each column in the group should be the minimum
itemprop="microdata value"
width necessary to hold the column’s contents. Relative widths, such as 0.5*, also can be
itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope" used.
itemtype="microdata type in URL format"
spellcheck="true | false" Example
tabindex="number" <table border="1" width="400">
<colgroup>
Attributes Defined by Internet Explorer <col align="center" width="150" />
<col align="right" />
bgcolor="color name | #RRGGBB" (5.5)
</colgroup>
<td>This column is aligned to the center.</td>
HTML 4 Event Attributes <td>This one is aligned to the right.</td>
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, </td>
onmousemove, onmouseout, onmouseover, onmouseup <tr><td>!</td><td>?</td></tr>

HTML5 Event Attributes <tr><td>!</td><td>?</td></tr>


</table>
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
Compatibility
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
HTML 4, 4.01, 5 Firefox 1+, Internet Explorer 4+,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
XHTML 1.0, 1.1 Netscape 6+, Opera 7+, Safari 1+
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, Notes
onsuspend, ontimeupdate, onvolumechange, onwaiting • Under XHTML 1.0 and XHTML5, <col> requires a trailing slash: <col />.
• This element should appear within a colgroup element, and, like that element, it is
Event Defined by Internet Explorer
somewhat of a convenience feature used to set attributes with one or more table
onreadystatechange columns. In practice, few developers seem to use it.
Element-Specific Attributes
<colgroup> (Table Column Group)
bgcolor This Internet Explorer–specific attribute sets the background color for the column. This element creates an explicit group of table columns containing col elements to provide
Its value can be either a browser-dependent named color or a color specified using the for table column-level scripting or formatting.
hexadecimal #RRGGBB format.
Standard Syntax
char This attribute is used to set the character on which the cells in a column should be <colgroup
aligned. A typical value for this is a period (.) for aligning numbers or monetary values. align="center | char | justify | left | right"
char="character"
Chapter 3: HTML and XHTML Element Reference 217 218 Part I: Core Markup

charoff="number" Element-Specific Attributes


class="class name(s)"
dir="ltr | rtl" align This attribute specifies horizontal alignment of the contents of the cells in the column
id="unique alphanumeric identifier"

PART I
group. The values of center, left, and right have obvious meanings. A value of justify
lang="language code"
for the attribute attempts to justify all the column’s contents. A value of char attempts to
span="number"
style="style information" align the contents based on the value of the char attribute in conjunction with charoff.
title="advisory text"
valign="baseline | bottom | middle | top" bgcolor This Internet Explorer–specific attribute sets the background color for the columns
width="column width specification"> in the column group. Its value can be either a browser-dependent named color or a color
specified using the hexadecimal #RRGGBB format.
col elements only
char This attribute is used to set the character on which the cells in a column should be
</colgroup> aligned. A typical value for this attribute is a period (.) for aligning numbers or monetary
values.
Attributes Introduced by HTML5
accesskey="spaced list of accelerator key(s)" charoff This attribute is used to indicate the number of characters by which the column
contenteditable="true | false | inherit" data should be offset from the alignment characters specified by the char value.
contextmenu="id of menu"
data-X="user-defined data" span When present, this attribute specifies the default number of columns in this group.
draggable="true | false | auto" Browsers should ignore this attribute if the current column group contains one or more
hidden="hidden" <col> tags. The default value of this attribute is 1.
itemid="microdata id in URL format"
itemprop="microdata value" valign This attribute specifies the vertical alignment of the contents of the cells within the
itemref="space-separated list of IDs that may contain microdata" column group.
itemscope="itemscope"
itemtype="microdata type in URL format" width This attribute specifies a default width for each column and its cells in the current
spellcheck="true | false"
tabindex="number"
column group. In addition to the standard pixel and percentage values, this attribute can
take the special form 0*, which means that the width of each column in the group should be
Attributes Defined by Internet Explorer the minimum width necessary to hold the column’s contents.

bgcolor="color name | #RRGGBB" (5.5) Examples


<colgroup span="2" align="char" char=":" valign="center">
HTML 4 Event Attributes <col /><col /><col />
</colgroup>
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup
<colgroup style="background-color: green;">
<col align="left" />
HTML5 Event Attributes <col align="center" />
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, </colgroup>
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, Compatibility
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, HTML 4, 4.01, 5 Firefox 1+, Internet Explorer 4+,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, XHTML 1.0, 1.1 Netscape 6+, Opera 7+, Safari 1+
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, Notes
onsuspend, ontimeupdate, onvolumechange, onwaiting
• Each column group defined by a <colgroup> tag can contain zero or more <col>
Event Defined by Internet Explorer tags.
onreadystatechange • Under XHTML 1.0, the closing </colgroup> tag is mandatory.
Chapter 3: HTML and XHTML Element Reference 219 220 Part I: Core Markup

<command> (Command) Compatibility


This HTML5 element represents a command a user can invoke and is found within a menu
HTML5 Not currently supported by any browser, but addressed with
element. Commands may be simple actions or toggles among various states or options.

PART I
a custom element combined with JavaScript.
HTML5 Standard Syntax Note
<command
accesskey="spaced list of accelerator key(s)"
• This element is currently in extremely raw form and without implementations its
class="class name(s)" usage should be considered speculative.
contenteditable="true | false | inherit"
contextmenu="id of menu" <comment> (Comment Information)
data-X="user-defined data"
This nonstandard Internet Explorer element treats enclosed text as comments. This element
default="default"
dir="ltr | rtl" should not be used.
disabled="disabled"
draggable="true | false | auto" Syntax Defined by Internet Explorer
hidden="hidden" <comment
icon="URL for image to use with command" data="URL" (6)
id="unique alphanumeric identifier" id="unique alphanumeric identifier" (4)
itemid="microdata id in URL format" lang="language code" (4)
itemprop="microdata value" title="advisory text"> (4)
itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope" </comment>
itemtype="microdata type in URL format"
label="descriptive string for command"
lang="language code" Event Defined by Internet Explorer
radiogroup="radiogroup name"
onlayoutcomplete
spellcheck="true | false"
style="style information"
tabindex="number" Element-Specific Attribute
title="advisory text describing command"
type="checkbox | command | radio"> data This attribute references a URL that contains the comment information.

HTML5 Event Attributes Example


onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, <comment>This is not the proper way to form
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, comments!!!</comment>
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, Compatibility
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, No standards support Internet Explorer 4, 5, 5.5, 6
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, Notes
onsuspend, ontimeupdate, onvolumechange, onwaiting
• It is better to use standard <!--. . .--> comment rather than this tag.
Example • Because the comment element is not supported by all browsers, commented text
<menu>
done in this fashion will appear in other browsers.
<command label="Add" type="Command" icon="plus.png">
<command label="Edit" type="Command" default> <datalist> (List of Prefill Data)
<command label="Delete" type="Command" disabled> This HTML5 element contains option elements that populate an input element with
<hr>
type="list". These listed items would be considered the quick choices for the field, not
<command label="Sort Ascending" type="radio" radiogroup="sort">
<command label="Sort Descending" type="radio" radiogroup="sort"> a limitation of what can be entered, which would be the functionality of a select menu.
</menu>
Chapter 3: HTML and XHTML Element Reference 221 222 Part I: Core Markup

HTML5 Standard Syntax <option>Mr. Pibb</option>


<option>Mt. Dew</option>
<datalist <option>7-Up</option>
accesskey="spaced list of accelerator key(s)" </datalist>

PART I
class="class name(s)" </form>
contenteditable="true | false | inherit" </body>
contextmenu="id of menu" </html>
data-X="user-defined data"
dir="ltr | rtl"
draggable="true | false | auto" Compatibility
hidden="hidden"
id="unique alphanumeric identifier"
HTML5 Opera 9.5+
itemid="microdata id in URL format"
itemprop="microdata value" Note
itemref="space-separated list of IDs that may contain microdata" • This element could be simulated with other browsers using script, custom elements,
itemscope="itemscope" and careful use of CSS.
itemtype="microdata type in URL format"
lang="language code"
spellcheck="true | false" <dd> (Definition Description in a Definition List
style="style information"
tabindex="number"
or Content in Details or Figure)
title="advisory text"> This element indicates the definition of a term within a list of defined terms (<dt>) enclosed
by a definition list (<dl>). Under HTML5, the element is also found with details and
option elements only figure elements enclosing the content of the element.

</datalist> Standard Syntax


<dd
HTML5 Event Attributes class="class name(s)"
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, dir="ltr | rtl"
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, id="unique alphanumeric identifier"
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, lang="language code"
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, style="style information"
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, title="advisory text">
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, </dd>
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting Attributes Introduced by HTML5
accesskey="spaced list of accelerator key(s)"
Example contenteditable="true | false | inherit"
<!DOCTYPE html> contextmenu="id of menu"
<html> data-X="user-defined data"
<head> draggable="true | false | auto"
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> hidden="hidden"
<title>Datalist Test</title> itemid="microdata id in URL format"
</head> itemprop="microdata value"
<body> itemref="space-separated list of IDs that may contain microdata"
<form action="#" method="get"> itemscope="itemscope"
<p><label>Drinks: <input list="soda"></label></p> itemtype="microdata type in URL format"
<datalist id="soda"> spellcheck="true | false"
<option>Coke</option> tabindex="number"
<option>Pepsi</option>
<option>Dr. Pepper</option>
Chapter 3: HTML and XHTML Element Reference 223 224 Part I: Core Markup

Attributes Defined by Internet Explorer <!-- HTML5 Example -->


accesskey="key" (5.5) <details>
contenteditable="false | true | inherit" (5.5) <dt>Important Note</dt>

PART I
disabled="false | true" (5.5) <dd>This tag seems to be reused too much under HTML5!<dd>
hidefocus="true | false" (5.5) </details>
language="javascript | jscript | vbs | vbscript" (4)
nowrap="no | yes" (4) <figure>
tabindex="number" (5.5) <dt>Moose Baby!</dt>
unselectable="on | off" (5.5) <dd>
<img src="desmond.jpg" alt="Desmond Baby" height="320" width="150">
HTML 4 Event Attributes <p>A photo of Desmond circa 2010.</p>
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, </dd>
onmousemove, onmouseout, onmouseover, onmouseup </figure>

HTML5 Event Attributes Compatibility


onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, HTML 2, 3.2, 4, 4.01,5 Firefox 1+, Internet Explorer 2+,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
XHTML 1.0, 1.1, Basic Netscape 1+, Opera 2.1+, Safari 1+
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
Notes
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, • Under HTML specifications, including HTML5, the closing tag for this element is
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, optional, though using it is encouraged when it will help make the list more
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, understandable.
onsuspend, ontimeupdate, onvolumechange, onwaiting
• Under XHTML 1.0, the closing </dd> tag is mandatory.
Events Defined by Internet Explorer • This element occurs within a list of defined terms enclosed by a <dl> tag. Typically
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate, associated with it is the term it defines, indicated by the <dt> tag that precedes it,
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu, though it doesn’t have to match because there are not correspondence requirements
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag, for definition lists.
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup, • Under HTML5, this element has an overloaded meaning and may also be used to
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, enclose the content within <details> and <figure> tags.
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, • In early versions of HTML5, this element occurred within a <dialog> tag for
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,
indication of dialog.
onresizeend, onresizestart, onselectstart, ontimeerror
• HTML 2 and 3.2 define no attributes for this element.
Element-Specific Attribute
<del> (Deleted Text)
nowrap This Internet Explorer–specific attribute is used to control the wrapping of text
This element is used to indicate that text has been deleted from a document. A browser
within a <dd> tag. If set to yes, text should not wrap. The default is no. CSS rules should be
might render deleted text as strikethrough text.
used instead of this attribute.

Examples Standard Syntax


<del
<dl>
cite="URL"
<dt>DOG</dt>
class="class name(s)"
<dd>A domesticated animal that craves attention all the time</dd>
datetime="date"
<dt>CAT</dt>
dir="ltr | rtl"
<dd>An animal that would just as soon ignore you until it
id="unique alphanumeric identifier"
gets hungry</dd>
</dl>
Chapter 3: HTML and XHTML Element Reference 225 226 Part I: Core Markup

lang="language code"
style="style information"
NOTE MSDN documentation for this element appears incorrect for event handlers. Not all core
title="advisory text"> events are listed, but during testing they all worked. Other extended events like onbeforecopy,
oncopy, oncontextmenu, and more were also verified as functional under Internet Explorer 8.

PART I
</del>
Element-Specific Attributes
Attributes Introduced by HTML5
cite The value of this attribute is a URL that designates a source document or message that
accesskey="spaced list of accelerator key(s)"
contenteditable="true | false | inherit"
might explain why the information was deleted.
contextmenu="id of menu"
data-X="user-defined data" datetime This attribute is used to indicate the date and time the deletion was made. The value
draggable="true | false | auto" of the attribute is a date in a special format as defined by ISO 8601. The basic date format is
hidden="hidden"
itemid="microdata id in URL format" YYYY-MM-DDThh:mm:ssTZD
itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata" where the following is true:
itemscope="itemscope"
itemtype="microdata type in URL format" YYYY=four-digit year such as 1999
spellcheck="true | false" MM=two-digit month (01=January, 02=February, and so on.)
tabindex="number" DD=two-digit day of the month (01 through 31)
hh=two-digit hour (00 to 23) (24-hour clock, not AM or PM)
Attributes Defined by Internet Explorer mm=two-digit minute (00 through 59)
ss=two-digit second (00 through 59)
accesskey="key" (5.5) TZD=time zone designator
contenteditable="false | true | inherit" (5.5)
disabled="false | true" (5.5) The time zone designator is either Z, which indicates Universal Time Coordinate or
language="javascript | jscript | vbs | vbscript" (4) coordinated universal time format (UTC), or +hh:mm, which indicates that the time is a local
tabindex="number" (5.5)
time that is hh hours and mm minutes ahead of UTC. Alternatively, the format for the time
unselectable="on | off" (5.5)
zone designator could be –hh:mm, which indicates that the local time is behind UTC. Note
HTML 4 Event Attributes that the letter T actually appears in the string, all digits must be used, and 00 values for
minutes and seconds might be required. An example value for the datetime attribute
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
might be 1999-10-6T09:15:00-05:00, which corresponds to October 6, 1999, 9:15 A.M.,
onmousemove, onmouseout, onmouseover, onmouseup
U.S. Eastern Standard Time.
HTML5 Event Attributes Example
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
<p><del cite="http://www.democompany.com/changes/oct.html"
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
datetime="2008-10-06T09:15:00-05:00">
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
The penalty clause applies to client lateness as well.
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
</del> <ins>No more penalties</ins></p>
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, Compatibility
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting HTML 4, 4.01, 5 Firefox 1+, Internet Explorer 4+,
XHTML 1.0, 1.1 Netscape 6+, Opera 7+, Safari 1+
Events Defined by Internet Explorer
Notes
onbeforeeditfocus, onblur, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, onfocus, onkeydown, onkeypress, onkeyup, • Browsers can render deleted (<del>) text in a different style to show the changes
onreadystatechange, onselectstart, ontimeerror that have been made to the document. Internet Explorer renders the deleted text as
strikethrough text. Eventually, a browser could have a way to show a revision
history on a document.
Chapter 3: HTML and XHTML Element Reference 227 228 Part I: Core Markup

• User agents that do not understand <del> or <ins> will show the information onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
anyway, so there is no harm in adding information—only in deleting it. Because of onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
the fact that <del>-enclosed text might show up, it might be wise to comment it out onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,

PART I
within the element, as shown here:
onsuspend, ontimeupdate, onvolumechange, onwaiting
<del>
<!-- This is old information. --> Example
</del>
<details onclick="this.open='open';">
<dt>Help?</dt>
<details> (Additional Details) <dd>
This HTML5 element represents additional information or interactive elements that can be <p>This could give you help with HTML5 but we need more implementations to
shown on demand. prove how things will work.</p>
</dd>
HTML5 Standard Syntax </details>

<details
accesskey="spaced list of accelerator key(s)"
Compatibility
class="class name(s)" HTML5 Not currently supported by any browser, but addressed with a custom element.
contenteditable="true | false | inherit"
contextmenu="id of menu"
data-X="user-defined data"
Notes
dir="ltr | rtl" • This element may contain one dt element describing the caption of the detailed
draggable="true | false | auto" content, and one dd element, which contains the content to show.
hidden="hidden"
id="unique alphanumeric identifier" • In early drafts of HTML5 specification, the legend element was used instead of the
itemid="microdata id in URL format" dt and dd elements added later.
itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata" <dfn> (Definition)
itemscope="itemscope"
itemtype="microdata type in URL format" This inline logical element encloses the defining instance of a term. It usually is rendered as
lang="language code" bold or bold italic text.
open="true | false"
spellcheck="true | false" Standard Syntax
style="style information" <dfn
tabindex="number" class="class name(s)"
title="advisory text"> dir="ltr | rtl"
id="unique alphanumeric identifier"
dt or dd elements and other content or controls lang="language code"
style="style information"
</details> title="advisory text">

Element-Specific Attribute </dfn>

open This Boolean attribute indicates whether details should be shown to the user. If not Attributes Introduced by HTML5
they are not shown, and would likely be exposed via a script event.
accesskey="spaced list of accelerator key(s)"
contenteditable="true | false | inherit"
HTML5 Event Attributes contextmenu="id of menu"
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, data-X="user-defined data"
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, draggable="true | false | auto"
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, hidden="hidden"
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, itemid="microdata id in URL format"
itemprop="microdata value"
Chapter 3: HTML and XHTML Element Reference 229 230 Part I: Core Markup

itemref="space-separated list of IDs that may contain microdata" Notes


itemscope="itemscope"
itemtype="microdata type in URL format" • HTML 2 and 3.2 defined no attributes for this element.
spellcheck="true | false" • HTML5 suggests that the section or content grouping nearest an occurrence of a dfn

PART I
tabindex="number" element must contain the actual definition.
Attributes Defined by Internet Explorer
<dir> (Directory List)
accesskey="key" (5.5)
contenteditable="false | true | inherit" (5.5)
This element encloses a list of brief, unordered items, such as might occur in a menu or
disabled="false | true" (5.5) directory. It is deprecated or obsolete under most specifications.
hidefocus="true | false" (5.5)
language="javascript | jscript | vbs | vbscript" (4) Standard Syntax (Transitional Only—Deprecated)
tabindex="number" (5.5) <dir
unselectable="on | off" (5.5) class="class name(s)"
compact="compact"
HTML 4 Event Attributes dir="ltr | rtl"
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, id="unique alphanumeric identifier"
onmousemove, onmouseout, onmouseover, onmouseup lang="language code"
style="style information"
title="advisory text">
HTML5 Event Attributes
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, li elements only
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, </dir>
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, Attributes Defined by Internet Explorer
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, accesskey="key" (5.5)
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, contenteditable="false | true | inherit" (5.5)
onsuspend, ontimeupdate, onvolumechange, onwaiting disabled="false | true" (5.5)
hidefocus="true | false" (5.5)
language="javascript | jscript | vbs | vbscript" (4)
Events Defined by Internet Explorer tabindex="number" (5.5)
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate, unselectable="on | off" (5.5)
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag, HTML 4 Event Attributes
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmousemove, onmouseout, onmouseover, onmouseup
onmouseout, onmouseover, onmousewheel, onmove, onmoveend, onmovestart,
onpaste, onpropertychange, onreadystatechange, onresize, onresizeend, Events Defined by Internet Explorer
onresizestart, onselectstart onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
Example oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
<p>The <dfn>dfn</dfn> element is an element which is used to set off the ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
defining instance of a term. Now that's a self-contained example!</p> onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
Compatibility onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,
onresizeend, onresizestart, onselectstart, ontimeerror
HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
XHTML 1.0, 1.1, Basic Netscape 6+, Opera 4+, Safari 1+
Chapter 3: HTML and XHTML Element Reference 231 232 Part I: Core Markup

Element-Specific Attribute data-X="user-defined data"


draggable="true | false | auto"
compact This attribute reduces the white space between list items. hidden="hidden"
itemid="microdata id in URL format"

PART I
Example itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata"
<dir> itemscope="itemscope"
<li>Header Files</li> itemtype="microdata type in URL format"
<li>Code Files</li> spellcheck="true | false"
<li>Comment Files</li> tabindex="number"
</dir>
Attributes Defined by Internet Explorer
Compatibility
accesskey="key" (5.5)
HTML 2, 3.2, 4, 4.01 (transitional) Firefox 1+, Internet Explorer 2+, contenteditable="false | true | inherit" (5.5)
XHTML 1.0 (transitional) Netscape 1+, Opera 2.1+, Safari 1+ datafld="name of column supplying bound data" (4)
dataformatas="html | text" (4)
Notes datasrc="id of data source object supplying data" (4)
disabled="false | true" (5.5)
• Because the <dir> tag is supposed to be used with short lists, the items in the list hidefocus="true | false" (5.5)
should have a maximum width of 20 characters. This is rarely if ever respected. language="javascript | jscript | vbs | vbscript" (4)
nowrap="no | yes" (4)
• The HTML and XHTML strict specifications do not support this element, and the tabindex="number" (5.5)
HTML5 specification has marked it as obsolete and suggests using a <ul> tag unselectable="on | off" (5.5)
instead.
• Most browsers will not render a <dir> tag any differently from the <ul> tag. HTML 4 Event Attributes
• HTML 2 and 3.2 define only the compact attribute. onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup
• Most browsers will not render the compact list style.
• For XHTML transitional compatibility, the compact attribute must have a value: HTML5 Event Attributes
<dir compact="compact">. onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
<div> (Division) ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
This element indicates a generic block of content that should be treated as a logical unit for
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
scripting or styling purposes. onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
Standard Syntax onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
<div onsuspend, ontimeupdate, onvolumechange, onwaiting
align="center | justify | left | right" (transitional only)
class="class name(s)" Events Defined by Internet Explorer
dir="ltr | rtl"
id="unique alphanumeric identifier" onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
lang="language code" onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
style="style information" oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
title="advisory text"> ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
</div> onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,
Attributes Introduced by HTML5 onresizeend, onresizestart, onselectstart, ontimeerror
accesskey="spaced list of accelerator key(s)"
contenteditable="true | false | inherit"
contextmenu="id of menu"
Chapter 3: HTML and XHTML Element Reference 233 234 Part I: Core Markup

Element-Specific Attribute dir="ltr | rtl"


id="unique alphanumeric identifier"
nowrap This Internet Explorer–specific attribute is used to control the wrapping of text lang="language code"
style="style information"

PART I
within a <div> tag. If set to yes, text should not wrap. The default is no. CSS rules should
title="advisory text">
be used instead of this attribute.
dt and dd elements only
Examples
<div align="justify"> </dl>
<!-- IE syntax -->
All text within this division will be justified Attributes Introduced by HTML5
</div>
accesskey="spaced list of accelerator key(s)"
<div class="special" id="div1" style="background-color: yellow;"> contenteditable="true | false | inherit"
Divs are useful for setting arbitrary style contextmenu="id of menu"
</div> data-X="user-defined data"
draggable="true | false | auto"
<div class="container"> hidden="hidden"
<div class="wrapper"> itemid="microdata id in URL format"
<div class="content"><p>I have divitis</p></div> itemprop="microdata value"
</div> itemref="space-separated list of IDs that may contain microdata"
</div> itemscope="itemscope"
itemtype="microdata type in URL format"
spellcheck="true | false"
Compatibility tabindex="number"
HTML 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
XHTML 1.0, 1.1, Basic Netscape 2+, Opera 4+, Safari 1+ Attributes Defined by Internet Explorer
accesskey="key" (5.5)
Notes contenteditable="false | true | inherit" (5.5)
disabled="false | true" (5.5)
• A <div> tag is a generic block tag and is very useful for binding scripts or styles to hidefocus="true | false" (5.5)
an arbitrary section of a document. It complements <span>, which is used inline. language="javascript | jscript | vbs | vbscript" (4)
• Excessive use of <div> tags is almost as bad as excessive use of tables, particularly tabindex="number" (5.5)
unselectable="on | off" (5.5)
when structuring page content.
• The HTML 4 specification specifies that the datafld, dataformatas, and datasrc HTML 4 Event Attributes
attributes are reserved for <div> and might be supported in the future. They were
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
removed from XHTML, but Internet Explorer supports them for data binding. onmousemove, onmouseout, onmouseover, onmouseup
• Under the HTML 4.01 strict specification, the align attribute is not supported.
• HTML 3.2 supports only the align attribute.
HTML5 Event Attributes
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
<dl> (Definition List) ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
This element encloses a list of terms and definitions. A common use for this element is to onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
implement a glossary. onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
Standard Syntax onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
<dl
onsuspend, ontimeupdate, onvolumechange, onwaiting
class="class name(s)"
compact="compact" (transitional only)
Chapter 3: HTML and XHTML Element Reference 235 236 Part I: Core Markup

Events Defined by Internet Explorer • HTML 2 and 3.2 support only the compact attribute for this element.
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate, • For XHTML compatibility, the compact attribute must be expanded:
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu, <dl compact="compact"> under the transitional form. It is deprecated under the

PART I
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag, strict specification. In practice, regardless of whether it is indicated, the compact
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
attribute generally has no effect.
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, <dt> (Term in a Definition List or Caption in Figure or Details)
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, This element identifies a definition list term in a list of terms and definitions. Under
onresizeend, onresizestart, onselectstart, ontimeerror HTML5, the element is also used within <details> and <figure> tags to represent a
caption for content.
Element-Specific Attribute
Standard Syntax
compact This attribute reduces the white space between list items.
<dt
Examples class="class name(s)"
dir="ltr | rtl"
<dl> id="unique alphanumeric identifier"
<dt>Cat</dt> lang="language code"
<dd>A domestic animal that likes fish.</dd> style="style information"
<dt>Skunk</dt> title="advisory text">
<dd>A wild animal that needs deodorant.</dd>
</dl> </dt>

<!-- Terms definitions don't have to pair match -->


<dl>
Attributes Introduced by HTML5
<dt>Cat</dt> accesskey="spaced list of accelerator key(s)"
<dt>Fritz</dt> contenteditable="true | false | inherit"
<dt>Sylvester</dt> contextmenu="id of menu"
<dd>A domestic animal that likes fish.</dd> data-X="user-defined data"
<dt>Skunk</dt> draggable="true | false | auto"
<dt>Pepe Le Pew</dt> hidden="hidden"
<dd>A wild animal that needs deodorant.</dd> itemid="microdata id in URL format"
<dt>Tasmanian Devil</dt> itemprop="microdata value"
</dl> itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
Compatibility itemtype="microdata type in URL format"
spellcheck="true | false"
HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+, tabindex="number"
XHTML 1.0, 1.1, Basic Netscape 1+, Opera 2.1+, Safari 1+
Attributes Defined by Internet Explorer
Notes accesskey="key" (5.5)
• The items in the list comprise two parts: the term, indicated by the dt element, and contenteditable="false | true | inherit" (5.5)
disabled="false | true" (5.5)
its definition, indicated by the dd element. However, there is no requirement to
hidefocus="true | false" (5.5)
match these elements, alternate them, or anything else, at least syntax-wise. language="javascript | jscript | vbs | vbscript" (4)
• Some page designers might use a <dl> tag or <ul> tag to create text indention. nowrap="true | false" (5.5)
Although this is a common practice on the Web, it is not advisable because it tabindex="number" (5.5)
unselectable="on | off" (5.5)
confuses the meaning of the element by making it a physical layout device rather
than a list. A CSS property like margin or position should be used instead.
HTML 4 Event Attributes
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup
Chapter 3: HTML and XHTML Element Reference 237 238 Part I: Core Markup

HTML5 Event Attributes Compatibility


onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,

PART I
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, XHTML 1.0, 1.1, Basic Netscape 1+, Opera 2.1+, Safari 1+
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, Notes
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, • Traditionally, this element occurs within a list of defined terms enclosed by a <dl>
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, tag. It is generally used in conjunction with a <dd> tag, which indicates its
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting
definition. However, <dt> tags do not require a one-to-one correspondence with
<dd> tags.
Events Defined by Internet Explorer • HTML5 overloads the meaning of this element so that it also serves as the caption of
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate, content enclosed within <details> and <figure> tags.
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu, • Under early drafts of HTML5,this element is also found within <dialog> tags and
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag, defines the speakers of particular statements. When used within such tags, it must
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
be paired with <dd> tags in a one-to-one fashion. That syntax was eventually
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, dropped.
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, • The close tag for the element is optional under older versions of HTML as well as
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, HTML5, but including it is suggested, especially when it will make things clearer,
onresizeend, onresizestart, onselectstart, ontimeerror
particularly with multiple-line definitions.
Element-Specific Attribute • Under XHTML 1.0, the closing </dt> tag is mandatory.
• HTML 2 and 3.2 support no attributes for this element.
nowrap This Internet Explorer–specific attribute is used to control the wrapping of text
within a <dt> tag. If set to yes, text should not wrap. The default is no. CSS properties
should be used instead of this attribute.
<em> (Emphasis)
This inline element indicates emphasized text, which many browsers will display as italic text.
Examples
Standard Syntax
<!-- Typical definition list usage -->
<dl> <em
<dt>Vole</dt> class="class name(s)"
<dd>Small creature related to the weasel</dd> dir="ltr | rtl"
<dt>Weasel</dt> id="unique alphanumeric identifier"
<dd>Small creature related to the vole</dd> lang="language code"
</dl> style="style information"
title="advisory text">
<!-- HTML5 examples -->
</em>
<details>
<dt>Important Notes</dt> Attributes Introduced by HTML5
<dd>This tag seems to be reused too much under HTML5!<dd> accesskey="spaced list of accelerator key(s)"
</details> contenteditable="true | false | inherit"
contextmenu="id of menu"
<figure> data-X="user-defined data"
<dt>Moose Baby!</dt> draggable="true | false | auto"
<dd> hidden="hidden"
<img src="desmond.jpg" alt="Desmond Baby" height="320" width="150"> itemid="microdata id in URL format"
<p>A photo of Desmond circa 2010.</p> itemprop="microdata value"
</dd>
</figure>
Chapter 3: HTML and XHTML Element Reference 239 240 Part I: Core Markup

itemref="space-separated list of IDs that may contain microdata" Notes


itemscope="itemscope"
itemtype="microdata type in URL format" • As a logical element, em is a prime candidate to bind style information to. For
spellcheck="true | false" example, to define emphasis to mean a larger font size in the Impact font instead of

PART I
tabindex="number" italics, you might use a CSS rule like the following in a document-wide style sheet:
em {font-size: larger; font-family: Impact; font-style: normal;}
Attributes Defined by Internet Explorer
accesskey="key" (5.5) • HTML 2 and 3.2 support no attributes for this element.
contenteditable="false | true | inherit" (5.5)
disabled="false | true" (5.5) <embed> (Embedded Object)
hidefocus="true | false" (5.5)
This widely supported nonstandard element specifies an object, typically a multimedia
language="javascript | jscript | vbs | vbscript" (4)
tabindex="number" (5.5) element, to be embedded in an HTML document. The syntax can be somewhat variable
unselectable="on | off" (5.5) given the plug-in–specific attributes found, so the reference covers those commonly found.

HTML 4 Event Attributes Proprietary Syntax (Commonly Supported)


onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, <embed
onmousemove, onmouseout, onmouseover, onmouseup accesskey="key"
align="absbottom | absmiddle | baseline | bottom |
left | middle | right | texttop | top" (4)
HTML5 Event Attributes alt="alternative text"
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, border="pixels"
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, class="class name(s)"
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, code="filename"
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, codebase="URL"
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, height="pixels"
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, hspace="pixels"
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, id="unique alphanumeric identifier" (4)
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, language="javascript | jscript | vbs | vbscript | xml" (5.5)
onsuspend, ontimeupdate, onvolumechange, onwaiting name="string"
palette="background | foreground" (4)
Events Defined by Internet Explorer pluginspage="URL"
src="URL"
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
style="style information"
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
title="advisory text"
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
type="mime type"
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
units="em | pixels"
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
unselectable="on | off"
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
vspace="pixels"
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
width="pixels">
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,
onresizeend, onresizestart, onselectstart, ontimeerror
</embed>

Example Attributes Introduced by HTML5


<p><em>This is the important point</em> to consider, not this other less
contenteditable="true | false | inherit"
exciting point.</p>
contextmenu="id of menu"
data-X="user-defined data"
Compatibility draggable="true | false | auto"
hidden="hidden"
HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+, itemid="microdata id in URL format"
XHTML 1.0, 1.1, Basic Netscape 1+, Opera 2.1+, Safari 1+ itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata"
Chapter 3: HTML and XHTML Element Reference 241 242 Part I: Core Markup

itemscope="itemscope" src This attribute specifies the URL of source content for the embedded object.
itemtype="microdata type in URL format"
spellcheck="true | false" type This attribute specifies the MIME type of the embedded object. It is used by the
tabindex="number"

PART I
browser to determine an appropriate plug-in for rendering the object. It can be used instead
of the src attribute for plug-ins that have no content or that fetch it dynamically.
HTML5 Event Attributes
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, units This Netscape 4+–specific attribute is used to set the units for measurement for the
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, embedded object in pixels or as a relative em value.
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, vspace This attribute specifies, in pixels, the size of the top and bottom margins between
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, the embedded object and surrounding text.
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, Example
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting <!-- embed with a close tag -->
<embed src="testmovie.mov" height="150" width="150">
<noembed>
Events Defined by Internet Explorer <img src="testgif.gif" height="150" width="150" alt="Test Image">
onactivate, onbeforeactivate, onbeforecut, onbeforedeactivate, onbeforepaste, </noembed>
onblur, oncontextmenu, oncontrolselect, oncut, ondeactivate, onfocus, </embed>
onfocusin, onfocusout, onhelp, onload, onlosecapture, onmouseenter,
onmouseleave, onmousewheel, onmove, onmoveend, onmovestart, onpaste, Compatibility
onpropertychange, onreadystatechange, onresize, onresizeend, onresizestart,
onscroll No standard initially, but widely supported Firefox 1+, Internet Explorer 4+,
HTML5 Netscape 2+, Opera 4+, Safari 1+
Element-Specific Attributes
Notes
align This attribute controls the alignment of adjacent text with respect to the embedded
object. The default value is left. • Historically, it has been unclear whether or not the close tag for <embed> is required.
Many sites tended not to use it, and documentation is not consistent. A close </embed>
alt This attribute indicates the text to be displayed if the embedded object cannot be tag should be required and should surround any alternative content in a noembed
executed. element.
• This element was supposed to be phased out in favor of the object element, but so
border This attribute specifies the size, in pixels, of the border around the embedded far its usage seems to have diminished only slightly.
object.
• The embed element is not favored by the W3C and was dropped by (X)HTML
code This attribute specifies the name of the file containing the compiled Java class if the specifications previous to HTML5.
embed element is used to include a Java applet. This is a strange alternative form of Java • Embedded objects are multimedia content files of arbitrary type that are rendered by
inclusion documented by Microsoft. browser plug-ins. The type attribute uses a file’s MIME type to determine an
appropriate browser plug-in. Any attributes not defined are treated as object-specific
codebase This specifies the base URL for the plug-in or potential applet in the case of the
parameters and are passed through to the embedded object. Consult the plug-in or
alternative form under Internet Explorer.
object documentation to determine these.
name This attribute specifies a name for the embedded object, so that it can be referenced
by client-side programs in an embedded scripting language. <fieldset> (Form Field Grouping)
This element allows form designers to group thematically related controls together. The
palette This attribute is used only on Windows systems to select the color palette used for element usually contains a legend element, which labels the grouped form controls.
the plug-in and might be set to background or foreground. The default is background.
Standard Syntax
pluginspage This attribute contains the URL of instructions for installing the plug-in
<fieldset
required to render the embedded object. class="class name(s)"
dir="ltr | rtl"
Chapter 3: HTML and XHTML Element Reference 243 244 Part I: Core Markup

id="unique alphanumeric identifier" Events Defined by Internet Explorer


lang="language code"
style="style information" onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
title="advisory text"> onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,

PART I
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
</fieldset> ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
Attributes Introduced by HTML5 onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
accesskey="spaced list of accelerator key(s)" onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,
contenteditable="true | false | inherit" onresizeend, onresizestart, onselectstart, ontimeerror
contextmenu="id of menu"
data-X="user-defined data" Example
disabled="disabled"
draggable="true | false | auto" <fieldset>
form="id of related form" <legend>Customer Identification</legend>
hidden="hidden" <br>
itemid="microdata id in URL format" <label>Customer Name:
itemprop="microdata value" <input type="text" id="CustName" size="25">
itemref="space-separated list of IDs that may contain microdata" </label>
itemscope="itemscope" </fieldset>
itemtype="microdata type in URL format"
spellcheck="true | false" Compatibility
tabindex="number"
HTML 4, 4.01, 5 Firefox 1+, Internet Explorer 4+,
Attributes Defined by Internet Explorer XHTML 1.0, 1.1 Netscape 6+, Opera 4+, Safari 1+
accesskey="char" (5.5) Notes
align="center | left | right" (4)
contenteditable="false | true | inherit" (5.5) • Grouping controls makes it easier for users to understand the purposes of the
datafld="name of column supplying bound data" (4) controls while simultaneously facilitating tabbing navigation for visual user agents
disabled="false | true" (5.5) and speech navigation for speech-oriented user agents. The proper use of this
hidefocus="true | false" (5.5) element makes documents more accessible to users with disabilities.
language="javascript | jscript | vbs | vbscript" (4)
tabindex="number" (5.5) • The full set of data-binding attributes likely needs to be bound to this element but is
unselectable="on | off" (5.5) missing from MSDN documentation.
• The caption for a <fieldset> tag can be defined by the legend element. There
HTML 4 Event Attributes should only be a single legend element within the element.
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup
<figure> (Figure)
HTML5 Event Attributes This HTML5 element represents a group of content enclosed in a dd element, often with a
caption defined by a dt element, that can be moved away from the main flow of the
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
document. The way in which this element is implemented is similar to how the figures in
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, this book are presented—not necessarily directly adjacent to the text discussing them.
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, HTML5 Standard Syntax
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, <figure
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, accesskey="spaced list of accelerator key(s)"
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, class="class name(s)"
onsuspend, ontimeupdate, onvolumechange, onwaiting contenteditable="true | false | inherit"
contextmenu="id of menu"
data-X="user-defined data"
dir="ltr | rtl"
Chapter 3: HTML and XHTML Element Reference 245 246 Part I: Core Markup

draggable="true | false | auto" Compatibility


hidden="hidden"
id="unique alphanumeric identifier" HTML5 Not currently supported by any browser, but addressed with a custom element.
itemid="microdata id in URL format"

PART I
itemprop="microdata value" Notes
itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope" • While this element is not yet supported, it is easily simulated by using a custom tag
itemtype="microdata type in URL format" or using a <div> tag with a special class.
lang="language code" • Early drafts of HTML5 suggested using a <legend> tag for captioning; later, the
spellcheck="true | false"
style="style information"
<dt> and <dd> tags were introduced for containing figure caption and figure
tabindex="number" content, respectively.
title="advisory text">
<font> (Font Definition)
</figure>
This element allows specification of the size, color, and font of the text it encloses.
HTML5 Event Attributes Standard Syntax (Transitional Only)
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, <font
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, class="class name(s)"
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, color="color name | #RRGGBB"
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, dir="ltr | rtl"
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, face="font name"
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, id="unique alphanumeric identifier"
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, lang="language code"
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, size="1 to 7 | +1 to +6 | -1 to -6"
onsuspend, ontimeupdate, onvolumechange, onwaiting style="style information"
title="advisory text">
Example
<!DOCTYPE html> </font>
<html>
<head> Attributes Defined by Internet Explorer
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> accesskey="key" (5.5)
<title>Figure It Out</title> contenteditable="false | true | inherit" (5.5)
</head> disabled="false | true" (5.5)
<body> hidefocus="true | false" (5.5)
<header><h1>Welcome to the Example</h1></header> language="javascript | jscript | vbs | vbscript" (4)
<p>Yes it is another boring example. In this case we would like you tabindex="number" (5.5)
to review <a href="#fig1">Figure Ex-1</a></p> unselectable="on | off"(5.5)
<p>More and more text is found until eventually the figure is
located.</p> Attributes Defined by Netscape
<figure>
<dd> point-size="point size for font" (4)
<img src="screensnap.png" weight="100 | 200 | 300 | 400 | 500
alt="A screen capture of the Figure Element in action"> 600 | 700 | 800 | 900" (4)
<p>The mighty fig tag has returned from HTML 3 as figure to haunt
your dreams.</p> Events Defined by Internet Explorer
</dd> onactivate, onbeforedeactivate, onbeforeeditfocus, onblur, onclick,
<dt>Figure Ex-1</dt> oncontrolselect, ondblclick, ondeactivate, ondrag, ondragend, ondragenter,
</figure> ondragleave, ondragover, ondragstart, ondrop, onfocus, onkeydown,
onkeypress, onkeyup, onhelp, onmousedown, onmouseenter, onmouseleave,
<p>Maybe some more content here.</p> onmousemove, onmouseout, onmouseover, onmouseup, onmove, onmoveend,
</body> onmovestart, onreadystatechange, onresizeend, onresizestart, onselectstart,
</html> ontimeerror
Chapter 3: HTML and XHTML Element Reference 247 248 Part I: Core Markup

Element-Specific Attributes <footer> (Footer)


This HTML5 element represents the footer section of a document or a section element it is
color This attribute sets the text color using either a browser-dependent named color or a
contained within. Like a typical document footer in print, it should contain supplementary

PART I
color specified in the hexadecimal #RRGGBB format.
information about the related content.
face This attribute contains a list of one or more font names separated by commas. The
user agent looks through the specified font names and renders the text in the first font that
HTML5 Standard Syntax
is supported. <footer
accesskey="spaced list of accelerator key(s)"
point-size This Netscape 4–specific attribute specifies the point size of text and is used with class="class name(s)"
contenteditable="true | false | inherit"
downloadable fonts. It is listed for historical purposes only and is easily mimicked using the
contextmenu="id of menu"
font-size CSS property. data-X="user-defined data"
dir="ltr | rtl"
size This attribute specifies the font size as either a numeric or relative value. Numeric draggable="true | false | auto"
values range from 1 to 7, with 1 being the smallest and 3 the default. The relative values, + hidden="hidden"
and -, increment or decrement the font size relative to the current size. The value for id="unique alphanumeric identifier"
increment or decrement should range only from +1 to +6 or -1 to -6. itemid="microdata id in URL format"
itemprop="microdata value"
weight Under Netscape 4, this attribute specifies the weight of the font, with a value of 100 itemref="space-separated list of IDs that may contain microdata"
being lightest and 900 being heaviest. This is listed primarily for historical purposes; such itemscope="itemscope"
visual changes are best implemented using the font-weight CSS property. itemtype="microdata type in URL format"
lang="language code"
spellcheck="true | false"
Example style="style information"
<p><font color="#FF0000" face="Helvetica, Times Roman" size="+1"> tabindex="number"
Relatively large red text in Helvetica or Times. title="advisory text">
</font></p>
</footer>
Compatibility
HTML5 Event Attributes
HTML 3.2, 4, 4.01 (transitional) Firefox 1+, Internet Explorer 2+,
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
XHTML 1.0 (transitional) Netscape 1.1+, Opera 4+, Safari 1+
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
Notes onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
• Use of this element is not encouraged, as it is not part of strict HTML and XHTML onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
specifications. HTML5 defines this element as obsolete. CSS properties like onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
font-face, color, and font-size provide a richer way of providing the same onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
functionality as this element. onsuspend, ontimeupdate, onvolumechange, onwaiting
• Interestingly, the transitional specification for some reason does not define core
events for this element. In practice, they are supported by major browsers. Example
• The default text size for a document can be set using the size attribute of the <!DOCTYPE html>
basefont element. <html>
<head>
• The HTML 3.2 specification supports only the color and size attributes for this <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
element. <title>Document Footer</title>
</head>
• HTML5 appears to define all the common attributes for this element, but does not
<body>
define those which are important to perform its stated task. <header><h1>Welcome to the Example</h1></header>
<p>Yes it is another boring example.</p>
<footer><p>&copy; 2010 Boring Examples, Inc.</p></footer>
Chapter 3: HTML and XHTML Element Reference 249 250 Part I: Core Markup

</body> Attributes Introduced by HTML5


</html>
accesskey="spaced list of accelerator key(s)"
<!-- Simple section footer --> autocomplete="on | off"

PART I
<section> contenteditable="true | false | inherit"
<header> contextmenu="id of menu"
<h1>Section Heading</h1> data-X="user-defined data"
</header> draggable="true | false | auto"
<p>Section Body</p> hidden="hidden"
<p>More Body</p> itemid="microdata id in URL format"
<footer> itemprop="microdata value"
<p>Boring Example &copy; 2010</p> itemref="space-separated list of IDs that may contain microdata"
</footer> itemscope="itemscope"
</section> itemtype="microdata type in URL format"
novalidate="novalidate"
spellcheck="true | false"
Compatibility tabindex="number"
HTML5 Not currently supported by any browser, but addressed with a custom element.
Attributes Defined by Internet Explorer
Notes autocomplete="yes | no" (5.0)
contenteditable="false | true | inherit" (5.5)
• While this element is not yet supported, it is easily simulated by using a custom tag disabled="false | true" (5.5)
or using a <div> tag with a special class. hidefocus="true | false" (5.5)
• A footer element should be included in the HTML5 outlining process. language="javascript | jscript | vbs | vbscript" (4)
tabindex="number" (5.5)
unselectable="on | off" (5.5)
<form> (Form for User Input)
The element defines a fill-in form that can contain labels and form controls, such as menus HTML 4 Event Attributes
and text entry boxes that might be filled in by a user. onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup, onreset, onsubmit
Standard Syntax
<form HTML5 Event Attributes
accept-charset="list of supported character sets"
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
action="URL"
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
class="class name(s)"
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
dir="ltr | rtl"
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
enctype="application/x-www-form-urlencoded |
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
multipart/form-data | text/plain |
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
Media Type as per RFC 2045"
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
id="unique alphanumeric identifier"
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
lang="language code"
onsuspend, ontimeupdate, onvolumechange, onwaiting
method="get | post"
name="form's name for scripting"
style="style information" Events Defined by Internet Explorer
target="_blank | frame name | _parent | _self | onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
_top" (transitional only) onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
title="advisory text"> oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
</form> onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
onmovestart, onpaste, onpropertychange, onreadystatechange, onreset
onresizeend, onresizestart, onselectstart, onsubmit, ontimeerror
Chapter 3: HTML and XHTML Element Reference 251 252 Part I: Core Markup

Element-Specific Attributes the parent frame set containing the source link. The _self value indicates the frame
containing the source link. The _top value indicates the full browser window. HTML5 may
accept-charset This attribute specifies the list of character encodings for input data that allow for targeting of nonframed regions of the page.

PART I
must be accepted by the server processing the form. The value is a space- or comma-
delimited list of character sets as defined in RFC 2045. The default value for this attribute is Example
the reserved value unknown. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/
html4/strict.dtd">
action This attribute contains the URL of the server program that will process the contents <html>
of the form. Some browsers also might support a mailto URL, which can mail the results to <head>
the specified address. Otherwise, the delivery of the data in the form is defined by the <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
method attribute. <title>Form Test</title>
</head>
autocomplete This Microsoft proprietary attribute, introduced in Internet Explorer 5.0 and <body>
redefined under HTML5, will automatically finish filling in information that the user has <form action="dosomething.php"
method="post" name="testform" onsubmit="return validate();">
previously input into an input field. Auto-filled information will likely be stored locally on <div>
the end-user’s system by some program, typically the browser itself. <label><strong>Username:</strong>
<input type="text" name="username">
enctype This attribute indicates how form data should be encoded before being sent to the </label>
server. The default is application/x-www-form-urlencoded. This encoding replaces <br>
blank characters in the data with a plus character (+) and all other nonprinting characters <label><strong>Comments:</strong>
with a percent sign (%) followed by the character’s ASCII HEX representation. The <textarea name="comments" cols="30" rows="8"></textarea>
multipart/form-data option does not perform character conversion and transfers the </label>
<br>
information as a compound MIME document. This must be used when using <input
<input type="submit" value="send">
type="file">. It also might be possible to use another encoding, such as text/plain <input type="reset" value="clear">
with a mailed form, but in general you should be cautious about changing the enctype. </div>
</form>
method This attribute indicates how form information should be transferred to the server </body>
using a particular HTTP method. A get value in the attribute indicates that form data </html>
should be appended to the URL specified by the action attribute, thus creating a query
string. This approach is quite simple but imposes a size limitation that is difficult to gauge Compatibility
(may be as low as 2 kilobytes in real situations). A value of post for this attribute transfers
the data of the form in the message body using the HTTP POST method which imposes no HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
data size limitation. Browsers may allow for other HTTP methods like delete or put as XHTML 1.0, 1.1, Basic Netscape 1+, Opera 4+, Safari 1+
suggested by the HTML5 specification, but so far such usage is rare. The POST method must
be used when file attachments are used in a form.
Notes
• Form content is defined using the <button>, <input>, <select>, and <textarea>
name This attribute specifies a name for the form and was traditionally used by JavaScript tags, as well as other HTML formatting and structuring elements. However, they
or other client-side programming technologies to reference forms and their contained may not contain other form elements.
elements. Since HTML 4, the core id attribute can be used instead with DOM methods such • Special grouping elements, such as fieldset, label, and legend, are provided to
as document.getElementById(). structure form fields, but more often tags like <div> and <table> are used to
novalidate This HTML5 Boolean attribute determines whether or not form validation improve form layout.
should be applied on the elements within. By default, validation is enforced unless • HTML 2 and 3.2 support only the action, enctype, and method attributes for the
overridden by this attribute on the form level or a formnovalidate attribute is found on a form element.
form element.
<frame> (Window Region)
target In documents containing frames, this attribute specifies the target frame that will
This element defines a nameable window region, known as a frame, that can independently
display the results of a form submission. In addition to named frames, several special
display its own content.
values exist. The _blank value indicates a new window. The _parent value indicates
Chapter 3: HTML and XHTML Element Reference 253 254 Part I: Core Markup

Standard Syntax security considerations of a Web page. Given its security implications, this attribute should
<frame only be set if the developer is familiar with HTAs.
class="class name(s)"

PART I
frameborder="0 | 1" bordercolor This attribute sets the color of the frame’s border using either a named color or
id="unique alphanumeric identifier" a color specified in the hexadecimal #RRGGBB format.
longdesc="URL of description"
marginheight="pixels" frameborder This attribute determines whether the frame is surrounded by an outlined
marginwidth="pixels" three-dimensional border. The HTML specification prefers the use of 1 for the frame border
name="frame name" on, and 0 for off; most browsers also acknowledge the use of no and yes.
noresize="noresize"
scrolling="auto | no | yes" longdesc This attribute specifies the URL of a document that contains a long description of
src="URL" of frame contents" the frame’s content. This attribute should be used in conjunction with the title element.
style="style information"
title="advisory text"> marginheight This attribute sets the height, in pixels, between the frame’s content and its
top and bottom borders.
Attributes Defined by Internet Explorer
allowtransparency="no | yes" (5.5) marginwidth This attribute sets the width, in pixels, between the frame’s content and its left
application="no | yes" (5) and right borders.
bordercolor="color name | #RRGGBB" (4)
datafld="name of column supplying bound data" (4) name This attribute assigns a name to the frame so that it can be the target destination of
datasrc="id of data source object supplying data" (4) hyperlinks as well as a possible candidate for manipulation via a script.
frameborder="no | yes | 0 | 1" (4)
height="pixels" (4) noresize This attribute overrides the default ability to resize frames and gives the frame a
hidefocus="true | false" (5.5)
fixed size.
lang="language code" (4)
language="javascript | jscript | vbs | vbscript" (4)
scrolling This attribute determines whether the frame has scroll bars. A yes value forces
security="restricted" (6)
tabindex="number" (5.5) scroll bars, a no value prohibits them, and an auto value lets the browser decide. When not
unselectable="on | off" (5.5) specified, the default value of auto is used. Authors are recommended to leave the value as
width="pixels" (4) auto. If you turn off scrolling and the contents end up being too large for the frame (due to
rendering differences, window size, and so forth), the user will not be able to scroll to see
Events Commonly Supported the rest of the contents. If you turn scrolling on and the contents all fit in the frame, the
onblur, onclick, ondblclick, onfocus, onload scroll bars will needlessly consume screen space. With the auto value, scroll bars appear
only when needed.
Events Defined by Internet Explorer
security This attribute sets the value indicating whether the source file of a frame has
onactivate, onafterupdate, onbeforedeactivate, onbeforeupdate, onblur,
security restrictions applied. The only allowed value is restricted.
onclick, oncontrolselect, ondblclick, ondeactivate, onerrorupdate,
onfocus, onload, onmove, onmoveend, onmovestart, onresize, onresizeend,
src This attribute contains the URL of the contents to be displayed in the frame. If it is
onresizestart, onselectstart
absent, nothing will be loaded in the frame.
Element-Specific Attributes Example
allowtransparency This Internet Explorer–specific attribute determines whether the contents <frameset rows="20%,80%">
of the <frame> is transparent or opaque. The default value is false, which means it is <frame src="controls.html" name="controls" noresize scrolling="no">
opaque. <frame src="content.html" name="body">
<noframes>
<p>Error: No frame support</p>
application This Internet Explorer–specific attribute is used to indicate whether the content
</noframes>
of a <frame> is to be considered an HTML application (HTA). HTAs are applications that </frameset>
use HTML, JavaScript, and Internet Explorer, but are not limited to the typical type of
Chapter 3: HTML and XHTML Element Reference 255 256 Part I: Core Markup

Compatibility Standard Events


onload, onunload
HTML 4, 4.01 Firefox 1+, Internet Explorer 2+,

PART I
XHTML 1.0 (frameset DTD only) Netscape 2+, Opera 4+, Safari 1+
Events Defined by Internet Explorer
Notes onactivate, onafterprint, onbeforedeactivate, onbeforeprint, onbeforeunload,
onblur, oncontrolselect, ondeactivate, onfocus, onload, onmove, onmoveend,
• XHTML 1.0 requires a trailing slash for this element: <frame />. onmovestart, onresizeend, onresizestart, onunload
• A frame must be declared as part of a frame set, as set by using the <frameset> tag,
which specifies the frame’s relationship to other frames on a page. A frame set
occurs in a special HTML document, in which the frameset element replaces the Element-Specific Attributes
body element. Another form of frames called independent frames, or floating frames,
border This attribute sets the width, in pixels, of frame borders within the frame set.
also is supported. Floating frames can be directly embedded in a document without Setting the value to 0 eliminates all frame borders. This attribute is not defined in the HTML
belonging to a frame set. These are defined with the iframe element. or XHTML specification but is widely supported.
• Many browsers do not support frames and require the use of the <noframes> tag.
bordercolor This attribute sets the color for frame borders within the frame set using either
• Frames introduce potential navigation difficulties; their use should be limited to
a named color or a color specified in the hexadecimal #RRGGBB format.
instances in which they can be shown to help navigation rather than hinder it.
• HTML5 currently does not include support for frames beyond <iframe> tags, but cols This attribute contains a comma-delimited list that specifies the number and size of
even if the specification continues to avoid them, developers undoubtedly will columns contained within a set of frames. List items indicate columns from left to right.
continue to use them. Column size is specified in three formats, which might be mixed. A column can be assigned
a fixed width, in pixels. It also can be assigned a percentage of the available width, such as
<frameset> (Frameset Definition) 50 percent. Finally, a column can be set to expand to fill the available space by setting the
This element is used to define the organization of a set of independent window regions, value to *, which acts as a wildcard.
known as frames, as defined by the frame element. This element replaces the body element
frameborder This attribute controls whether or not frame borders should be displayed.
in framing documents.
Netscape supports no and yes values. Microsoft uses 1 and 0 as well as no and yes.
Standard Syntax framespacing This attribute indicates the space between frames, in pixels.
<frameset
class="class name(s)" rows This attribute contains a comma-delimited list that specifies the number and size of
cols="list of columns" rows contained within a set of frames. The number of entries in the list indicates the number
id="unique alphanumeric identifier" of rows. Row size is specified with the same formats used for columns.
rows="list of rows"
style="style information"
title="advisory text">
Examples
<!-- This example defines a frame set of three columns. The middle column
</frameset> is 50 pixels wide. The first and last columns fill the remaining space.
-->
Attributes Defined by Internet Explorer
<frameset cols="*,50,*">
border="pixels" (4) <frame src="column1.html">
bordercolor="color name | #RRGGBB" (4) <frame src="column2.html">
frameborder="no | yes | 0 | 1" (4) <frame src="column3.html">
framespacing="pixels" (4) </frameset>
lang="language code" (4)
language="javascript | jscript | vbs | vbscript" (4) <!-- This example defines a frame set of two columns, one of which is 20%
hidefocus="true | false" (5.5) of the screen, and the other, 80%. -->
tabindex="number" (5.5)
unselectable="on | off" (5.5)
Chapter 3: HTML and XHTML Element Reference 257 258 Part I: Core Markup

<frameset cols="20%, 80%"> <h1> through <h6> (Headings)


<frame src="controls.html" name="controls">
<frame src="display.html" name="body"> These logical block tags implement six levels of document headings; <h1> is the most
<noframes> prominent and <h6> is the least prominent.

PART I
<p>Error: No frame support</p>
</noframes> Standard Syntax
</frameset> <h1
align="center | justify | left | right"
<!-- This example defines two rows, one of which is 10% of the screen, (transitional only)
and the other, whatever space is left. --> class="class name(s)"
dir="ltr | rtl"
<frameset rows="10%, *"> id="unique alphanumeric identifier"
<frame src="adbanner.html" name="ad_frame"> lang="language code"
<frame src="contents.html" name="content_frame"> style="style information"
</frameset> title="advisory text">

Compatibility </h1>

HTML 4 and 4.01 (frameset DTD) Firefox 1+, Internet Explorer 3+, Attributes Introduced by HTML5
XHTML 1.0 (frameset DTD) Netscape 2+,
accesskey="spaced list of accelerator key(s)"
Opera 4+, Safari 1+
data-X="user-defined data"
contenteditable="true | false | inherit"
Notes contextmenu="id of menu"
• The content model says that the <frameset> tag contains one or more <frame> draggable="true | false | auto"
tags, which are used to indicate the framed contents. A <frameset> tag also might hidden="hidden"
contain a <noframes> tag, whose contents will be displayed by browsers that do itemid="microdata id in URL format"
itemprop="microdata value"
not support frames.
itemref="space-separated list of IDs that may contain microdata"
• HTML5 currently does include support for frames beyond the inline frame defined itemscope="itemscope"
by an <iframe> tag. itemtype="microdata type in URL format"
spellcheck="true | false"
• The <frameset> tag replaces the <body> tag in a framing document, as shown tabindex="number"
here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" Attributes Defined by Internet Explorer
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> accesskey="key" (5.5)
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> contenteditable="false | true | inherit" (5.5)
<head> disabled="false | true" (5.5)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> hidefocus="true | false" (5.5)
<title>Frame Demo</title> language="javascript | jscript | vbs | vbscript" (4)
</head> tabindex="number" (5.5)
<frameset cols="*,50,*"> unselectable="on | off" (5.5)
<frame src="column1.html" name="col1" />
<frame src="column2.html" name="col2" /> HTML 4 Event Attributes
<frame src="column3.html" name="col3" />
<noframes> onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
<body> onmousemove, onmouseout, onmouseover, onmouseup
<p>Please visit our <a href="noframes.html">no frames</a> site.</p>
</body> HTML5 Event Attributes
</noframes> onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
</frameset> oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
</html> ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
Chapter 3: HTML and XHTML Element Reference 259 260 Part I: Core Markup

onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, • The strict definitions of HTML 4 and XHTML do not include support for the align
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, attribute. Style sheet properties like text-align should be used instead.
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, • Under HTML5, these heading elements are used to form an outline of the document.

PART I
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting <head> (Document Head)
This element indicates the document head, which contains descriptive information about
Events Defined by Internet Explorer the HTML document as well as other supplementary information, such as style rules or
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate, scripts.
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag, Standard Syntax
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup, <head
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, dir="ltr | rtl"
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, lang="language code"
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, profile="URL">
onresizeend, onresizestart, onselectstart, ontimeerror
title, base, script, style, meta, link and object elements
Examples </head>
<h1 align="justify">This is a Major Document Heading</h1>
<h2 align="center=">Second heading, aligned to the center</h2> Attributes Introduced by HTML5
<h3 align="right">Third heading, aligned to the right</h3>
<h4>Fourth heading</h4> accesskey="spaced list of accelerator key(s)"
<h5 style="font-size: 20px;">Fifth heading with style information</h5> class="class name(s)"
<h6>The least important heading</h6> contenteditable="true | false | inherit"
contextmenu="id of menu"
<!-- HTML5 example --> data-X="user-defined data"
<section> draggable="true | false | auto"
<header> hidden="hidden"
<h1>Section Heading</h1> itemid="microdata id in URL format"
<h2>Section Sub-head</h2> itemprop="microdata value"
</header> itemref="space-separated list of IDs that may contain microdata"
<p>Section body</p> itemscope="itemscope"
</section> itemtype="microdata type in URL format"
id="unique alphanumeric identifier"
spellcheck="true | false"
Compatibility tabindex="number"
HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
XHTML 1.0, 1.1, Basic Netscape 1+, Opera 4+, Safari 1+ Attributes Defined by Internet Explorer
id="unique alphanumeric identifier"
Notes class="class name(s)"
• In most implementations, heading numbers correspond inversely with the six font
sizes supported by the font element. For example, <h1> corresponds to <font HTML5 Event Attributes
size="6">. The default font size is 3. However, this approach to layout is not onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
encouraged, and page designers should consider using styles to set even relative oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
sizes. Interestingly, the HTML5 specification also clearly indicates the font size of
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
various headings like h1 (2em), h2 (1.5em), and so on, which is really not any onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
different from the relative nature of older <font> tags. onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
• HTML 3.2 supports only the align attribute. HTML 2 does not support any onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
attributes for headings. onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting
Chapter 3: HTML and XHTML Element Reference 261 262 Part I: Core Markup

Events Defined by Internet Explorer HTML5 Standard Syntax


onlayoutcomplete, onreadystatechange <header
accesskey="spaced list of accelerator key(s)"

PART I
Element-Specific Attribute class="class name(s)"
contenteditable="true | false | inherit"
profile This attribute specifies a URL for a meta-information dictionary. The specified contextmenu="id of menu"
profile should indicate the format of allowed metadata and its meaning. data-X="user-defined data"
dir="ltr | rtl"
draggable="true | false | auto"
Examples hidden="hidden"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ id="unique alphanumeric identifier"
html4/strict.dtd"> itemid="microdata id in URL format"
<html> itemprop="microdata value"
<head> itemref="space-separated list of IDs that may contain microdata"
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> itemscope="itemscope"
<title>Demo Company Home Page</title> itemtype="microdata type in URL format"
<base href="http://www.democompany.com"> lang="language code"
<meta name="Keywords" content="DemoCompany, SuperWidget"> spellcheck="true | false"
</head> style="style information"
tabindex="number"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ title="advisory text">
html4/strict.dtd">
<html> </header>
<head profile="http://www.democompany.com/metadict.xml">
HTML5 Event Attributes
Compatibility onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,
HTML 2, 3.2, 4, 4.01, 5+ Firefox 1+, Internet Explorer 2+, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,
ondragstart, ondrop, onerror, onfocus, onhashchange, onkeydown, onkeypress,
XHTML 1.0, 1.1, Basic Netscape 1+, Opera 2.1+, Safari 1+
onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseout,
onmouseover, onmouseup, onmousewheel, onresize, onscroll, onselect,
Notes onstorage, onsubmit, onunload
• Under the XHTML 1.0 specification, the head element no longer can be implied, but
rather must be used in all documents and must have a close tag. Under standard, Examples
older HTML specifications as well as HTML5, the element is actually optional. <!DOCTYPE html>
• Often, a <meta> tag specifying the character set in play should be found as the first <html>
<head>
child of the head element, particularly if the document’s title element contains
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
special characters. <title>Document Header</title>
• The meaning of the profile attribute is somewhat unclear, and no browsers appear </head>
to support it in any meaningful way. <body>
<header>
• HTML 2 and 3.2 support no attributes for this element. <h1>Welcome to the Example</h1>
<h2>The more exciting subheading</h2>
<header> (Header) </header>
<p>Yes it is yet another boring example.</p>
This HTML5 element represents the header section of a document or a section element it is <footer><p>&copy; 2010 Boring Examples, Inc.</p></footer>
contained within. Like a typical document header in print, it should contain title and </body>
heading information about the related content. </html>
Chapter 3: HTML and XHTML Element Reference 263 264 Part I: Core Markup

<!-- Simple section header --> HTML5 Event Attributes


<section>
<header> onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
<p>It was a dark and story night...</p> oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,

PART I
<h1>The Spooky Heading</h1> ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
</header> onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
<p>A fantastic story that is spooky would be found here. onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
If I weren't so busy writing HTML5 examples.</p> onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
<footer> onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
<p><cite>HTML: The Complete Reference</cite> &copy; 2010</p> onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
</footer> onsuspend, ontimeupdate, onvolumechange, onwaiting
</section>
Example
Compatibility <!DOCTYPE html>
<html>
HTML5 Not currently supported by any browser, but addressed with a custom element. <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Notes <title>hgroup Example</title>
</head>
• Under HTML5, this element may be used for automatic document outlining. <body>
• While this element is not yet supported, it is easily simulated by using a custom tag <header>
or using a <div> tag with a special class. <hgroup>
<h1>Welcome to the Example</h1>
<h2>Clearly the best example you've seen</h2>
<hgroup> (Header Group) </hgroup>
This HTML5 element represents a grouping of heading elements (h1-h6). It may be used to
cluster headings and subheadings together. <nav>
<ul>
HTML5 Standard Syntax <li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<hgroup <li><a href="#">Link</a></li>
accesskey="spaced list of accelerator key(s)" <li><a href="#">Link</a></li>
class="class name(s)" </ul>
contenteditable="true | false | inherit" </nav>
contextmenu="id of menu" </header>
data-X="user-defined data"
dir="ltr | rtl" <hgroup>
draggable="true | false | auto" <h1>Section head</h1>
hidden="hidden" <h2>A subhead</h2>
id="unique alphanumeric identifier" </hgroup>
itemid="microdata id in URL format"
itemprop="microdata value" <p>Ok here we go some content here.</p>
itemref="space-separated list of IDs that may contain microdata" <p>More content goes here and here.</p>
itemscope="itemscope"
itemtype="microdata type in URL format" <footer><p>&copy; 2010 Boring Examples, Inc.</p></footer>
lang="language code" </body>
spellcheck="true | false" </html>
style="style information"
tabindex="number"
title="advisory text">
Compatibility
HTML5 Not currently supported by any browser, but addressed with a custom element.
</hgroup>
Chapter 3: HTML and XHTML Element Reference 265 266 Part I: Core Markup

Notes hidefocus="true | false" (5.5)


tabindex="number" (5.5)
• The hgroup element is used to control the HTML5 sectioning algorithm. Its primary unselectable="on | off" (5.5)
purpose is to collapse elements that would normally add outline entries into a

PART I
single entry. For example, when multiple headings (h1–h6) are used, they will HTML 4 Event Attributes
individually add items to the outline. By containing headings together in the
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
hgroup element, they form only a single entry in an outline. As demonstrated in the onmousemove, onmouseout, onmouseover, onmouseup
preceding example, the need for this element is mostly to support subheadings.
• This element was added much later than many other HTML5 elements, and there is HTML5 Event Attributes
some controversy over what it should be called. onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
• While this element is not yet supported, it is easily simulated by using a custom tag oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
or using a <div> tag with a special class.
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
<hr> (Horizontal Rule) onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
This element is used to insert a horizontal rule to visually or thematically separate onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
document sections. Rules usually are rendered as a raised or etched line.
onsuspend, ontimeupdate, onvolumechange, onwaiting
Standard Syntax
Events Defined by Internet Explorer
<hr
align="center | left | right" (transitional only) onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
class="class name(s)" onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
dir="ltr | rtl" oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
id="unique alphanumeric identifier" ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
lang="language code"id="unique alphanumeric identifier" onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
noshade="noshade " (transitional only) onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
size="pixels" (transitional only) onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
style="style information" onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,
title="advisory information" onresizeend, onresizestart, onselectstart, ontimeerror
width="percentage | pixels"> (transitional only)
Element-Specific Attributes
Attributes Introduced by HTML5
color This attribute sets the rule color using either a named color or a color specified in the
accesskey="spaced list of accelerator key(s)" hexadecimal #RRGGBB format. This attribute currently is supported only by Internet
contenteditable="true | false | inherit"
contextmenu="id of menu"
Explorer.
data-X="user-defined data"
draggable="true | false | auto" noshade This attribute causes the rule to be rendered as a solid bar without shading.
hidden="hidden"
itemid="microdata id in URL format" size This attribute indicates the height, in pixels, of the rule.
itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata" width This attribute indicates how wide the rule should be, specified either in pixels or as a
itemscope="itemscope" percent of screen width, such as 80%.
itemtype="microdata type in URL format"
spellcheck="true | false" Examples
tabindex="number" <!-- transitional rules -->
<hr align="left" noshade="noshade" size="1" width="420">
Attributes Defined by Internet Explorer <hr align="center" width="100%" size="3" color="#000000" />
accesskey="key" (5.5)
color="color name | #RRGGBB" (4) <!-- simple XHTML style -->
language="javascript | jscript | vbs | vbscript" (4) <hr />
Chapter 3: HTML and XHTML Element Reference 267 268 Part I: Core Markup

Compatibility HTML5 Event Attributes


onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,

PART I
XHTML 1.0, 1.1 Netscape 1+, Opera 4+, Safari 1+ ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
Notes onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
• The HTML 4.01 strict and HTML5 specifications remove support for the align, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
noshade, size, and width attributes for horizontal rules. These effects are possible onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
using style sheets. onsuspend, ontimeupdate, onvolumechange, onwaiting
• As an empty element under XHTML or when using XML-style syntax for HTML5, a
trailing slash is required for this element: <hr />. Events Defined by Internet Explorer
onlayoutcomplete, onmouseenter, onmouseleave, onreadystatechange
<html> (HTML Document)
This element identifies an HTML or XHTML document. Element-Specific Attributes

Standard Syntax manifest This HTML5 attribute is set to the document’s application cache manifest, which
is used to describe the various components the page relies upon. It is generally used to
<html
dir="ltr | rtl" support offline access.
id="unique alphanumeric identifier"
lang="language code" scroll This attribute is used to set whether or not scroll bars should show for the
xmlns="http://www.w3.org/1999/xhtml | some other name space"> document. The default value of auto puts in scroll bars as needed. This attribute, while
documented by Microsoft, does not appear to work properly and should be avoided.
</html>
xmlns This attribute declares a namespace for XML-based custom tags in the document.
Attributes Introduced by HTML5 For XHTML, this value is always http://www.w3.org/1999/xhtml, though it could be
accesskey="spaced list of accelerator key(s)" some other value in the case of some custom language or mixture of languages.
class="class name(s)"
contenteditable="true | false | inherit" version This Internet Explorer 6–specific attribute was used to indicate the version of
contextmenu="id of menu" HTML being used. It is no longer used because it is redundant of what is provided by the
data-X="user-defined data" <!DOCTYPE> statement.
draggable="true | false | auto"
hidden="hidden" Example
itemid="microdata id in URL format"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
itemprop="microdata value"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
itemref="space-separated list of IDs that may contain microdata"
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
itemscope="itemscope"
<head>
itemtype="microdata type in URL format"
<title>Minimal Document</title>
manifest="URL"
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
spellcheck="true | false"
</head>
style="style information"
<body>
tabindex="number"
<p>Hello world!</p>
title="advisory text"
</body>
</html>
Attributes Defined by Internet Explorer
class="class name(s)" (4) Compatibility
scroll="yes | no | auto" (6)
version="version info" (6) HTML 2, 3.2, 4, 4.01,5 Firefox 1+, Internet Explorer 2+,
XHTML 1.0, 1.1, Basic Netscape 1+, Opera 2.1+, Safari 1+
Chapter 3: HTML and XHTML Element Reference 269 270 Part I: Core Markup

Notes HTML 4 Event Attributes


• The html element is the first element in a document. Except for comments, the only onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
tags it directly contains are <head> followed by either <body> or <frameset>. onmousemove, onmouseout, onmouseover, onmouseup

PART I
• Because it is the outermost tag in a document, the html element is called the root HTML5 Event Attributes
element.
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
• The <html> tag and its closing tag </html> are both mandatory under XHTML. oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
Under other specifications, including HTML5, the element is actually optional ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
because it is implied unless a comment is found as the first item within the onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
document. onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
<i> (Italic) onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
This element indicates that the enclosed text should be displayed in an italic typeface. onsuspend, ontimeupdate, onvolumechange, onwaiting

Standard Syntax Events Defined by Internet Explorer


<i onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
class="class name(s)" onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
dir="ltr | rtl" oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
id="unique alphanumeric identifier" ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
lang="language code" onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
style="style information" onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
title="advisory text"> onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,
</i> onresizeend, onresizestart, onselectstart, ontimeerror

Attributes Introduced by HTML5 Examples


accesskey="spaced list of accelerator key(s)" <p>Here is some <i>italicized</i> text.
contenteditable="true | false | inherit"
contextmenu="id of menu" This is also <i style="color:red;" id="myItalic">italic</i></p>
data-X="user-defined data"
draggable="true | false | auto" Compatibility
hidden="hidden"
itemid="microdata id in URL format" HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
itemprop="microdata value" XHTML 1.0, 1.1, Basic Netscape 1+, Opera 2.1+, Safari 1+
itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
itemtype="microdata type in URL format" <iframe> (Inline Frame)
spellcheck="true | false" This element indicates a floating frame, an independently controllable content region that
tabindex="number" can be embedded in a page, making it useful for including remote assets and gadgets.

Attributes Defined by Internet Explorer Standard Syntax (Transitional and Frameset Only)
accesskey="key" (5.5) <iframe
contenteditable="false | true | inherit" (5.5) align="bottom | left | middle | right | top"
disabled="false | true" (5.5) class="class name(s)"
hidefocus="true | false" (5.5) dir="ltr | rtl"
language="javascript | jscript | vbs | vbscript" (4) frameborder="1 | 0"
tabindex="number" (5.5) height="percentage | pixels"
unselectable="off | on" (5.5) id="unique alphanumeric identifier"
lang="language code"
Chapter 3: HTML and XHTML Element Reference 271 272 Part I: Core Markup

longdesc="URL of description" Events Defined by HTML5


marginheight="pixels"
marginwidth="pixels" onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
name="string" oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,

PART I
scrolling="auto | no | yes" ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
src="URL of frame contents" onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
style="style information" onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
title="advisory text" onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
width="percentage | pixels"> onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
</iframe> onsuspend, ontimeupdate, onvolumechange, onwaiting

Attributes Introduced by HTML5 Events Defined by Internet Explorer


accesskey="spaced list of accelerator key(s)" onactivate, onafterupdate, onbeforedeactivate, onbeforeupdate, onblur,
contenteditable="true | false | inherit" oncontrolselect, ondeactivate, onerrorupdate, onfocus, onload, onmove,
contextmenu="id of menu" onmoveend, onmovestart, onreadystatechange, onresizeend, onresizestart,
data-X="user-defined data" ontimeerror
draggable="true | false | auto"
hidden="hidden" Element-Specific Attributes
itemid="microdata id in URL format"
itemprop="microdata value" allowtransparency This Internet Explorer–specific attribute determines whether the content
itemref="space-separated list of IDs that may contain microdata" of an <iframe> is transparent or opaque. The default value is false, which means it is
itemscope="itemscope" opaque.
itemtype="microdata type in URL format"
sandbox="comma-separated list of allow-same-origin | allow-forms | application This Microsoft-specific attribute is used to indicate whether the contents of an
allow-scripts" <iframe> are to be considered an HTML application (HTA). HTAs are applications that use
seamless="seamless"
HTML, JavaScript, and Internet Explorer but are not limited to the typical type of security
spellcheck="true | false"
tabindex="number"
considerations of a Web page. Given its security implications, this attribute should only be
set if the developer is familiar with HTAs.
Attributes Defined by Internet Explorer border This attribute specifies the thickness of the border, in pixels.
allowtransparency="false | true" (5.5)
application="yes" (5) bordercolor This attribute specifies the color of the border.
border="pixels" (4)
bordercolor="color name | #RRGGBB" (4) frameborder This attribute determines whether the iframe is surrounded by a border. The
datafld="name of column supplying bound data" (4) HTML 4 specification defines 0 to be off and 1 to be on. The default value is 1. Internet
datasrc="id of data source object supplying data" (4)
Explorer also defines the values no and yes.
frameborder="no | yes | 0 | 1" (4)
hidefocus="true | false" (5.5)
hspace="pixels" (4)
framespacing This attribute creates additional space between the frames.
language="javascript | jscript | vbs | vbscript" (4)
security="restricted" (6) longdesc This attribute specifies the URL of a document that contains a long description of
tabindex="number" (5.5) the frame’s contents.
unselectable="on | off" (5.5)
vspace="pixels" (4) marginheight This attribute sets the height, in pixels, between the floating frame’s content
and its top and bottom borders.
Standard Event Attributes
marginwidth This attribute sets the width, in pixels, between the floating frame’s content
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
and its left and right borders.
onmousemove, onmouseout, onmouseover, onmouseup
name This attribute assigns a name to the floating frame so that it can be the target
destination of hyperlinks.
Chapter 3: HTML and XHTML Element Reference 273 274 Part I: Core Markup

sandbox This HTML5 attribute constrains the abilities of any iframed content. It may • HTML5 includes the iframe but does not include standard frames.
contain a space-separated list of exceptions on included iframe content. Currently supported • When a browser does not understand an <iframe> tag, it displays the text included
values include allow-same-origin, allow-scripts, and allow-forms. By default, the within it as an alternate rendering.

PART I
included content will be highly restricted, but each allow value will extend the sandbox to
allow the included content to talk to its origin domain (allow-same-origin), invoke
scripting (allow-scripts), or post forms (allow-forms).
<ilayer> (Inflow Layer)
This Netscape 4–specific element allows the definition of overlapping content layers that
scrolling This attribute determines whether the frame has scroll bars. A yes value forces can be positioned, hidden or shown, rendered transparent or opaque, reordered front to
scroll bars; a no value prohibits them. The default value is auto, in which case scroll bars back, and nested. An inflow layer is a layer with a relative position that appears where it
appear only as needed. would naturally occur in the document, in contrast to a general layer, which might be
positioned absolutely, regardless of its location in a document. The functionality of layers is
seamless This HTML5 Boolean attribute is set to make the iframe be rendered in such a available using CSS positioning, and page developers are advised not to use this element. It
way that it appears to be part of the primary browsing context. is presented solely for historical purposes in support of existing pages.

security This attribute sets the value indicating whether the source file of an iframe has Syntax (Netscape 4 Only)
security restrictions applied. The only allowed value is restricted. <ilayer
above="layer"
src This attribute contains the URL of the content to be displayed in the floating frame. If background="URL of image"
absent, the frame is blank. below="layer"
bgcolor="color name | #RRGGBB"
Examples class="class name(s)"
<iframe src="http://www.democompany.com" height="150" width="200" clip="x1, y1, x2, y2"
name="FloatingFrame1"> height="percentage | pixels"
Sorry, your browser doesn't support inline frames. id="unique alphanumeric identifier"
</iframe> left="pixels"
name="string"
<!-- HTML5 example highly restricted --> pagex="pixels"
<iframe src="http://www.fakewebgadets.com/gadget" height="200" width="200" pagey="pixels"
id="chat" sandbox> src="URL of layer contents"
</iframe> style="style information"
top="pixels"
<!-- HTML5 example less restricted --> visibility="hide | inherit | show"
<iframe src="http://www.fakewebgadets.com/gadget2" height="200" width="200" width="percentage | pixels"
id="weather" sandbox="allow-same-origin allow-scripts" seamless> z-index="number">
</iframe>
</ilayer>
Compatibility
Element-Specific Attributes
HTML 4 (transitional), 5 Firefox 1+, Internet Explorer 3+,
XHTML 1.0 (transitional or frameset) Netscape 6+, Opera 5+, Safari 1+ above This attribute contains the name of the layer to be rendered above the current layer.

Notes background This attribute contains the URL of a background image for the layer.
• Under the HTML 4 strict specification, the iframe element is not defined. However, below This attribute contains the name of the layer to be rendered below the current layer.
under XHTML transitional and XHTML frameset, iframe is allowed. XHTML 1.1
does not allow it either. Floating frames can be imitated using the div element and bgcolor This attribute specifies a layer’s background color. Its value can be either a named
CSS positioning facilities. color or a color specified in the hexadecimal #RRGGBB format.
• Iframes are useful for not only including content from within a site or beyond, but
clip This attribute specifies the clipping region or viewable area of the layer. All layer
also as a communication mechanism similar to Ajax.
content outside that rectangle will be rendered as transparent. The clip rectangle is defined
Chapter 3: HTML and XHTML Element Reference 275 276 Part I: Core Markup

by two x,y pairs: top x, left y and bottom x, and right y. Coordinates are relative to the <img> (Image)
layer’s origin point, 0,0, in its top-left corner. This element indicates a media object to be included in an (X)HTML document. Usually, the
object is a bitmap graphic image, but some implementations support movies, vector

PART I
height This attribute specifies the height of a layer, in pixels or as a percentage value.
formats, and animations.
left This attribute specifies, in pixels, the horizontal offset of the layer. The offset is relative
to its parent layer, if it has one, or to the left page margin if it does not. Standard Syntax
<img
name This attribute assigns to the layer a name that can be referenced by programs in a align="bottom | left | middle | right | top" (transitional only)
client-side scripting language. The id attribute also can be used. alt="alternative text"
border="pixels" (transitional only)
pagex This attribute specifies the horizontal position of the layer relative to the browser class="class name(s)"
window. dir="ltr | rtl"
height="pixels"
hspace="pixels" (transitional only)
pagey This attribute specifies the vertical position of the layer relative to the browser
id="unique alphanumeric identifier"
window. ismap="ismap"
lang="language code"
src This attribute is used to set the URL of a file that contains the content to be loaded into longdesc="URL of description file"
the layer. name="unique alphanumeric identifier"
src="URL of image"
top This attribute specifies, in pixels, the top offset of the layer. The offset is relative to its style="style information"
parent layer, if it has one, or the top page margin if it does not. title="advisory text"
usemap="URL of map file"
visibility This attribute specifies whether a layer is hidden, shown, or inherits its visibility vspace="pixels" (transitional only)
from the layer that includes it. width="pixels">

width This attribute specifies a layer’s width, in pixels. Other Common Attributes
align="absbottom | absmiddle | baseline | texttop"
z-index This attribute specifies a layer’s stacking order relative to other layers. Position is lowsrc="URL of low-resolution image"
specified with positive integers, with 1 indicating the bottommost layer. tabindex="number"

Example Attributes Introduced by HTML5


<p>Content comes before.</p> accesskey="spaced list of accelerator key(s)"
<ilayer name="background" bgcolor="green"> contenteditable="true | false | inherit"
<p>Layered information goes here.</p> contextmenu="id of menu"
</ilayer> data-X="user-defined data"
<p>Content comes after.</p> draggable="true | false | auto"
hidden="hidden"
Compatibility itemid="microdata id in URL format"
itemprop="microdata value"
No standards support Netscape 4, 4.5–4.8 itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
Note itemtype="microdata type in URL format"
• Page developers are strongly encouraged not to use this element but instead use spellcheck="true | false"
tabindex="number"
<div> tags with CSS relative positioning. Netscape dropped this element for
browser versions 6.0 and higher. Its inclusion in this book is for support of existing
Attributes Defined by Internet Explorer
documents only.
accesskey="key" (5.5)
datafld="name of column supplying bound data" (4)
datasrc="id of data source object supplying data" (4)
Chapter 3: HTML and XHTML Element Reference 277 278 Part I: Core Markup

dynsrc="URL of movie" (4) dynsrc In the Microsoft implementation, this attribute indicates the URL of a movie file and
galleryimg="yes | no | true | false" (6) is used instead of the src attribute. Common formats used here are .avi (Audio-Visual
hidefocus="true | false" (5.5) Interleaved), .mov (QuickTime), and .mpg and .mpeg (Motion Picture Experts Group). Be
language="javascript | jscript | vbs | vbscript" (4)

PART I
loop="infinite | number" (4)
careful, because support of this attribute beyond Internet Explorer 6 is suspect and security
start="fileopen | mouseover" (5) settings may restrict it.
unselectable="on | off" (5.5)
galleryimg This Microsoft attribute is used to control whether the gallery image menu should
HTML 4 Event Attributes appear when the mouse pointer hovers over an image. The default value is true or yes. A value
of no or false suppresses the menu. A meta tag like <meta http-equiv="imagetoolbar"
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
content="no"> can be used to suppress the image toolbar document-wide. This attribute is
onmousemove, onmouseout, onmouseover, onmouseup
rendered obsolete in later versions of Internet Explorer (7+).
HTML5 Event Attributes ismap This attribute indicates that the image is a server-side image map. User mouse
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, actions over the image are sent to the server for processing.
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, longdesc This attribute specifies the URL of a document that contains a long description of
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
the image. This attribute is used as a complement to the alt attribute.
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
loop In the Microsoft implementation, this attribute is used with the dynsrc attribute to
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, cause a movie to loop. Its value is either a numeric loop count or the keyword infinite.
onsuspend, ontimeupdate, onvolumechange, onwaiting Later versions of Internet Explorer suggest using –1 to indicate infinite. Since it is related to
dynsrc, the use of <img> to play movies does not work past Internet Explorer 6 unless
Events Defined by Internet Explorer security settings are modified.
onabort, onactivate, onafterupdate, onbeforeactivate, onbeforecopy,
lowsrc This nonstandard attribute, supported in most browsers, contains the URL of an
onbeforecut, onbeforedeactivate, onbeforeeditfocus, onbeforepaste,
onbeforeupdate, onblur, onclick, oncontextmenu, oncontrolselect, oncopy, image to be initially loaded. Typically, the lowsrc image is a low-resolution or black-and-
oncut, ondblclick, ondeactivate, ondrag, ondragend, ondragenter, ondragleave, white image that provides a quick preview of the image to follow. Once the primary image
ondragover, ondragstart, ondrop, onerrorupdate, onfilterchange, onfocus, is loaded, it replaces the lowsrc image.
onfocusin, onfocusout, onhelp, onload, onlosecapture, onmousedown,
onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, name This common attribute is used to bind a name to the image. Older browsers
onmousewheel, onmove, onmoveend, onmovestart, onpaste, onpropertychange, understand the name field, and, in conjunction with scripting languages, it is possible to
onreadystatechange, onresize, onresizeend, onresizestart, onselectstart, manipulate images by their defined names to create effects such as “rollover” buttons.
ontimeerror Under modern versions of HTML and XHTML, the id attribute should be used as an
element identifier for scripting and style application. The name attribute can still be used for
Element-Specific Attributes backward compatibility.
align This attribute controls the horizontal alignment of the image with respect to the page. src This attribute indicates the URL of an image file to be displayed. Most browsers will
The default value is left. Many browsers, such as Netscape and Internet Explorer display .gif, .jpeg, and .png files directly. Older formats like .bmp, .xpm (X Bitmap), and
implementations, support the absbottom, absmiddle, baseline, and texttop values. This .xpm (X Pixelmap) are also commonly supported, though their use is never recommended.
attribute is deprecated under strict variants of (X)HTML as well as HTML5. Some modern browsers may support .svg (Scalable Vector Graphics) files as well with the
img element.
alt This attribute contains a string to be displayed instead of the image for browsers that
cannot display images. start In the Microsoft implementation, this attribute is used with the dynsrc attribute to
border This attribute indicates the width, in pixels, of the border surrounding the image. indicate when a movie should play. The default value, if no value is specified, is to play the
HTML5 suggests the element should not be used other than to set a value of 0, as CSS video as soon as it has finished loading. This can be explicitly set with a value of fileopen.
should be used instead. Alternatively, a value of mouseover can be set to play the move once the user has moved
their mouse over the video. This, like other dynsrc features, may not work past Internet
Explorer 6 browsers because of security changes.
Chapter 3: HTML and XHTML Element Reference 279 280 Part I: Core Markup

usemap This attribute makes the image support client-side image mapping. Its argument is Standard Syntax
a URL specifying the map file, which associates image regions with hyperlinks. The URL is <input
generally a fragment identifier that references a location in the current document rather accept="MIME types"

PART I
than a remote resource. accesskey="character"
align="bottom | left | middle | right | top" (transitional only)
Examples alt="text"
checked="checked"
<img src="graham.jpg" alt="Graham Allan" height="320" width="150">
class="class name(s)"
dir="ltr | rtl"
<img src="olivia.jpg" lowsrc="loading.jpg" border="0" height="50%"
disabled="disabled"
width="50%" alt="Picture of Olivia" longdesc="olivia-bio.html">
id="unique alphanumeric identifier"
lang="language code"
<a href="home.html"><img src="homebutton.png" width="50" height="20"
maxlength="maximum field size"
alt="Link to Home Page" /></a>
name="field name"
readonly="readonly"
<!-- xhtml style syntax -->
size="field size"
<img src="hugeimagemap.gif" usemap="#mainmap" border="0" height="200"
src="URL of image file"
width="200" alt="Image Map Here" />
style="style information"
tabindex="number"
Compatibility title="advisory text"
type="button | checkbox | file | hidden | image |
HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+, password | radio | reset | submit | text"
XHTML 1.0, 1.1, Basic Netscape 1+, Opera 2.1+, Safari 1+ usemap="URL of map file"
value="field value">
Notes
• Typically, when you use the usemap attribute, the URL is a fragment, such as Attributes Introduced by HTML5
#map1, rather than a full URL. Some browsers do not support external client-side autocomplete="on | off"
map files. HTML5 makes this statement more strongly than in other specifications. autofocus="autofocus"
contenteditable="true | false | inherit"
• Under the strict HTML and XHTML definitions, the <img> tag does not support
contextmenu="id of menu"
align, border, height, hspace, vspace, and width. The functionality of these data-X="user-defined data"
attributes should be possible using style sheet rules. draggable="true | false | auto"
• Whereas the HTML 4 specification reserves data-binding attributes such as datafld form="id of related form element"
formaction="URL of form action"
or datasrc for many elements, they are not specified for <img>; however, Internet
formenctype="MIME type of form encoding"
Explorer provides support for these attributes. formmethod="get | post | put | delete"
• As an empty element under XHTML or when using XML-style syntax for HTML5, formnovalidate="true | false"
a trailing slash is required for this element: <img />. formtarget="name of target frame, region, or window"
height="pixels"
• Under future versions of XHTML such as 2, <img> may be dropped in favor of hidden="hidden"
<object>. itemid="microdata id in URL format"
• It should be noted that some core attributes for HTML5, most noticably itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata"
spellcheck, make little sense within the meaning of this element.
itemscope="itemscope"
itemtype="microdata type in URL format"
<input> (Input Form Control) list="id of datalist element to get suggestions from"
This element specifies an input control for a form. The type of input is set by the type max="maximum value (number)"
min="minimum value (number)"
attribute and can be a variety of different types, including single-line text field, password
multiple="true | false"
field, hidden, check box, radio button, or push button. HTML5 extends the possibilities of pattern="validation pattern as regular expression"
this form greatly and adds a number of features for browser-based validation without using placeholder="placeholder text"
JavaScript. required="required"
Chapter 3: HTML and XHTML Element Reference 281 282 Part I: Core Markup

spellcheck="true | false" onpropertychange, onreadystatechange, onresize (button, file, image,


step="float" password, reset, submit, text), onresizeend, onresizestart, onselectstart
type= older type values from above| color | date | datetime | (all types except hidden), ontimeerror
datetime-local | email | list | number | month | range |

PART I
tel | time | url | search | week Element-Specific Attributes
width="pixels"
accept This attribute is used to list the MIME types accepted for file uploads when using a
Attributes Defined by Internet Explorer file upload control (<input type="file">).
autocomplete="off | on" (5) (password, text types only)
dynsrc="URL of movie" (3) (image type only) align With image form controls (type="image"), this attribute aligns the image with
language="javascript | jscript | vbs | vbscript" (4) respect to surrounding text. The HTML 4.01 transitional specification defines bottom, left,
disabled="false | true" (4) (all types except for hidden) middle, right, and top as allowable values. Netscape and Microsoft browsers might also
hidefocus="true | false" (5.5) allow the use of attribute values such as absbottom or absmiddle. Like other presentation-
height="pixels" (3) (image type only) specific aspects of HTML, the align attribute is dropped under the strict HTML 4.01
hspace="pixels or percentage" (3)
specification.
loop="number" (4) (image type only)
lowsrc="URL of low-resolution image" (4) (image type only)
unselectable="off | on" (5.5)
alt This attribute is used to display an alternative description of image buttons for text-
vspace="pixels or percentage" (3) (image type only) only browsers. The meaning of alt for forms of <input> beyond type="input" is not
width="pixels" (3) (image type only) defined.

Standard Event Attributes autocomplete This Microsoft-specific attribute is used to indicate whether or not the form
field should be automatically filled in. The default value is no. HTML5 also supports this
onchange, onclick, ondblclick, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselect attribute.

autofocus This HTML5 Boolean attribute is used to indicate that the user agent should
HTML5 Event Attributes immediately focus this form item once its containing window object (usually the document)
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, is made active. It only takes an attribute value of autofocus when using the XML-style
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, syntax for HTML5. It is not defined for <input type="hidden">.
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
checked The checked attribute should be used only for check box (type="checkbox")
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, and radio (type="radio") form controls. The presence of this attribute indicates that the
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, control should be displayed in its checked state.
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting disabled This attribute is used to turn off a form control. Elements will not be submitted,
nor will they receive any focus from the keyboard or mouse. Disabled form controls will not
Events Defined by Internet Explorer be part of the tabbing order. The browser also might gray out the form that is disabled, to
onactivate, onafterupdate (checkbox, hidden, password, radio, text), indicate to the user that the form control is inactive. This attribute requires no value.
onbeforeactivate (all types except hidden), onbeforecut (all types except hidden),
onbeforedeactivate, onbeforeeditfocus, onbeforepaste (all types except hidden), dynsrc In the Microsoft implementation, this attribute indicates the URL of a movie file and
onbeforeupdate (checkbox, hidden, password, radio, text), onblur (all types is used instead of the src attribute for <input type="image">.
except hidden), oncontextmenu (all types except hidden), oncontrolselect, oncut
(all types except hidden), ondeactivate, ondrag (all types except hidden), ondragend form This HTML5 attribute should be set to a string that corresponds to the id of the form
(all types except hidden), ondragenter (all types except hidden), ondragleave (all element that an interactive control such as a button is associated with. This allows form
types except hidden), ondragover (all types except hidden), ondragstart (all types elements in one form to trigger actions in others.
except hidden), ondrop (all types except hidden), onerrorupdate (checkbox,
hidden, password, radio, text), onfilterchange (all types except hidden), formaction This HTML5 attribute specifies a URL to target when the button is clicked,
onfocus, onfocusin (all types except hidden), onfocusout (all types except hidden), similar to the use of the action attribute on a form element.
onhelp (all types except hidden), onlosecapture, onmouseenter (all types except
hidden), onmouseleave (all types except hidden), onmousewheel (all types except formenctype This attribute indicates how form data should be encoded before being sent to
hidden), onmove, onmoveend, onmovestart, onpaste (all types except hidden), the server. The default is application/x-www-form-urlencoded. This encoding replaces
Chapter 3: HTML and XHTML Element Reference 283 284 Part I: Core Markup

blank characters in the data with a plus character (+) and all other nonprinting characters maxlength This attribute indicates the maximum content length that can be entered in a
with a percent sign (%) followed by the character’s ASCII HEX representation. The text form control (type="text"). The maximum number of characters allowed differs from
multipart/form-data option does not perform character conversion and transfers the the visible dimension of the form control, which is set with the size attribute.

PART I
information as a compound MIME document. This must be used when using <input-
type="file">. It also might be possible to use another encoding, such as text/plain min This HTML5 attribute should be set to a numeric value that is the low range allowed
with a mailed form, but in general you should be cautious about changing the enctype. in the form control. The max attribute sets the high range.

formmethod This HTML5 attribute indicates how form information should be transferred multiple This HTML5 Boolean attribute, when set to true, indicates that multiple values
to the server using a particular HTTP method. A get value in the attribute indicates that are allowed for the field.
form data should be appended to the URL specified by the action attribute thus creating a
query string. This approach is quite simple but imposes a size limitation that is difficult to name This attribute allows a form control to be assigned a name to set as the name/value
gauge (may be as low as 2 kilobytes in real situations). A value of post for this attribute pair value sent to the server. Traditionally, this value was also used for reference by a
transfers the data of the form in the message body using the HTTP POST method, which scripting language, but using the id value is more appropriate. However, given that
imposes no data size limitation. Browsers may allow for other HTTP methods like delete browsers sometimes favor the older syntax, both may often be used and set to the same
or put, as suggested by the HTML5 specification, but so far such usage is rare. The POST value, with some limitations, particularly with radio buttons.
method must be used when file attachments are used in a form. pattern This HTML5 attribute specifies a regular expression against which the field should
formnovalidate This HTML5 Boolean attribute is used to indicate a form should not be be validated. The title attribute should be provided when this attribute is used, to give an
validated during submission. It is false by default but may be controlled either on the indication of what is an acceptable pattern and what isn’t.
button directly or on a containing or related form. Initially this was simply known as placeholder This HTML5 attribute specifies a short bit of text that is used to help the user
novalidate. figure out what type of information to fill in for a form control. Likely, the text will be
formtarget This HTML5 attribute is set to the name of a window or frame that the button placed in the field and cleared upon focus.
will target the result of action; in other words, where the result should appear. This action is readonly This attribute prevents the form control’s value from being changed. Form
similar to the target attribute on <a> and <form> tags. Initially, this attribute was simply controls with this attribute set might receive focus from the user but not permit the user to
target in early drafts of HTML5. modify the value. Because it receives focus, a readonly form control will be part of the
height Defined under HTML5, though commonly supported in older browsers, this form’s tabbing order. The control’s value will be sent on form submission. This attribute can
attribute is used to size an input element particularly when images are used as in <input be used only with <input> when type is set to text or password. The attribute also is
type="image">. CSS properties are preferred.
used with the textarea element.

hspace This Internet Explorer–specific attribute indicates the horizontal space, in pixels, required The presence of this HTML5 Boolean attribute indicates that the form field must
between the image and surrounding text when using <input type="image">. be set in order for form submission to proceed. User agents that understand this should set
the CSS pseudo-class :invalid when the field goes into error.
list The HTML5 list attribute is used to set the id of a datalist element used to
provide a predefined list of options suggested to the user for entry. size This attribute indicates the visible dimension, in characters, of a text form control
(type="text"). This differs from the maximum length of content, which can be entered in a
loop In the Microsoft implementation, this attribute is used with <input type="image"> form control set by the maxlength attribute.
and the dynsrc attribute to cause a movie to loop. Its value is either a numeric loop count
or the keyword infinite. Later versions of Internet Explorer suggest using –1 to indicate src This attribute is used with image form controls (type="image") to specify the URL of
infinite. the image file to load.

lowsrc This Microsoft-supported attribute contains the URL of an image to be initially step This HTML5 attribute defines the step in which values can take; for example, by twos
loaded when using <input type="image">. Typically, the lowsrc image is a low- (2, 4, 6…) or tens (10, 20, 30…). It is generally used in range controls.
resolution or black-and-white image that provides a quick preview of the image to follow. tabindex This attribute takes a numeric value that indicates the position of the form control
Once the primary image is loaded, it replaces the lowsrc image. in the tabbing index for the form. Tabbing proceeds from the lowest positive tabindex
max This HTML5 attribute should be set to a numeric value that is the high range allowed value to the highest. Negative values for tabindex will leave the form control out of the
in the form control. The min attribute sets the low range. tabbing order. When tabbing is not explicitly set, the browser tabs through items in the
Chapter 3: HTML and XHTML Element Reference 285 286 Part I: Core Markup

order they are encountered. Disabled form fields will not be part of the tabbing index, width This attribute, initially supported by many browsers such as Internet Explorer for
although read-only controls will be. image buttons and now defined under HTML5, is used to set the size of the form control, in
pixels. This should be controlled with CSS instead.

PART I
type This attribute specifies the type of the form control. A value of button indicates a
general-purpose button with no well-defined meaning. However, an action can be
Examples
associated with the button by using an event handler attribute, such as onclick. A value of
checkbox indicates a check box control. Check box form controls have a checked and <form action="#" method="get">
<fieldset>
unchecked setting, but even if these controls are grouped together, they allow a user to <legend>Basics</legend>
select multiple check boxes simultaneously. In contrast, a value of radio indicates a radio <p>Enter your name: <input type="text" maxlength="35" size="20"><br>
button control. When grouped, radio buttons allow only one of the many choices to be Enter your password: <input type="password" maxlength="35" size="20">
selected at a given time. </p>
A form control type of hidden indicates a field that is not visible to the viewer but is </fieldset>
used to store information. A hidden form control often is used to preserve state information <p><label>Which is your favorite food?</label>
between pages. <input type="radio" name="favorite" value="Mexican">Mexican
<input type="radio" name="favorite" value="Russian">Russian
A value of file for the type attribute indicates a control that allows the viewer to
<input type="radio" name="favorite" value="Japanese">Japanese
upload a file to a server. The filename can be entered in a displayed field, or a user agent <input type="radio" checked name="favorite" value="Other">Other
might provide a special browse button that allows the user to locate the file. A value of </p>
image indicates a graphic image form control that a user can click on to invoke an <p>
associated action. (Most browsers allow the use of img-associated attributes such as height, <input type="submit" value="Submit">
width, hspace, vspace, and alt when the type value is set to image.) A value of <input type="reset" value="Reset">
password for the type attribute indicates a password entry field. A password field will not </p>
</form>
display text entered as it is typed; it might instead show a series of dots. Note that
password-entered data is not transferred to the server in any secure fashion. A value of <!-- HTML5 snippets -->
reset for the type attribute is used to insert a button that resets all controls within a form <p><label> Three Letter Acronyms:
to their default values. A value of submit inserts a special submission button that, when <input pattern="[A-Z]{3}" name="threeletter"
clicked, sends the contents of the form to the location indicated by the action attribute of title="Enter an upper case three letter combination."/>
the enclosing <form> tag. Lastly, a value of text (the default) for the type attribute </label></p>
indicates a single-line text input field. <p><label>Name: <input type="text" name="fullname" placeholder="Thomas A.
Powell"></label></p>
HTML5 expands greatly on this attribute’s possible values, specifying search, url,
email, tel, datetime, date, month, week, time, datetime-local, number, range, and <p><input type="range" name="slider"></p>
color as well. Likely there will be others. Many of these ideas derived from the Web <p><input type="date" oninput="year.value = valueAsDate.getYear();">
Forms 2.0 specification, which Opera implements partially. WebKit also implements a select <p>HTML5 finalized in the year <output output="year">&nbsp;</output></p>
number of these form field types. Likely other browsers will quickly follow suit.
<p><label> Favorite Dog: <input list="dogs"></label></p>
usemap This HTML 4.0 attribute is used to indicate the map file to be associated with an <datalist id="dogs">
image when the form control is set with type="image". The value of the attribute should <option>Angus</option>
be a URL of a map file but generally will be in the form of a URL fragment referencing a <option>Tucker</option>
<option>Cisco</option>
map file within the current file.
<option>Sabrina</option>
</datalist>
value This attribute has two different uses, depending on the value for the type attribute.
With data-entry controls (type="text" and type="password"), this attribute is used to
set the default value for the control. When used with check box or radio button form Compatibility
controls, this attribute specifies the return value for the control. If it is not set for these fields,
HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
a default value of on will be submitted when the control is activated. XHTML 1.0, 1.1, Basic Netscape 1+, Opera 2.1+, Safari 1+
vspace This Internet Explorer–specific attribute indicates the vertical space, in pixels,
between the image and surrounding text when using <input type="image">.
Chapter 3: HTML and XHTML Element Reference 287 288 Part I: Core Markup

Notes Attributes Defined by Internet Explorer


• The HTML 2.0 and 3.2 specifications support only the align, checked, maxlength, accesskey="key" (5.5)
name, size, src, type, and value attributes for the input element. contenteditable=" false | true | inherit " (5.5)

PART I
disabled="false | true" (5.5)
• The HTML 4.01 specification also reserves the use of the datafld, dataformatas, hidefocus="true | false" (5.5)
and datasrc data-binding attributes. They were not included in the XHTML language="javascript | jscript | vbs | vbscript" (4)
specification but are supported by Internet Explorer. tabindex="number"(5.5)
unselectable="on | off" (5.5)
• Use of autocomplete may have security implications. Use with caution.
• Under the strict HTML and XHTML specifications, the align attribute is not HTML 4 Event Attributes
allowed. onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
• As an empty element under XHTML or when using XML-style syntax for HTML5, onmousemove, onmouseout, onmouseover, onmouseup
a trailing slash is required for this element: <input />.
HTML5 Event Attributes
• Safari running on the iPhone extends this element with autocorrect and
autocapitalize attributes. Given the difficulty of filling in forms on small-factor onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
devices, it is likely there may be other proprietary changes that are device specific.
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
<ins> (Inserted Text) onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
This element is used to indicate that text has been added to the document. Inserted text is onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
generally styled with an underline.
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting
Standard Syntax
<ins Events Defined by Internet Explorer
cite="URL"
class="class name(s)" onactivate, onbeforedeactivate, onbeforeeditfocus, onblur, oncontrolselect,
datetime="date" ondeactivate, onfocus, onmove, onmoveend, onmovestart, onreadystatechange,
dir="ltr | rtl" onresizeend, onresizestart, ontimeerror
id="unique alphanumeric identifier"
lang="language code" NOTE MSDN documentation for this element appears incorrect for event handlers. Not all core
style="style information" events are listed, but during testing they all worked. Other extended events like onbeforecopy,
title="advisory text">
oncopy, oncontextmenu, and more were also verified as functional under Internet Explorer 8.
</ins>
Element-Specific Attributes
Attributes Introduced by HTML5
cite The value of this attribute is a URL that designates a source document or message for
accesskey="spaced list of accelerator key(s)" the information inserted. This attribute is intended to point to information explaining why
contenteditable="true | false | inherit"
the text was changed.
contextmenu="id of menu"
data-X="user-defined data"
draggable="true | false | auto"
datetime This attribute is used to indicate the date and time the insertion was made. The
hidden="hidden" value of the attribute is a date in a special format as defined by ISO 8601. The basic date
itemid="microdata id in URL format" format is
itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata" yyyy-mm-ddthh:mm:ssTZD
itemscope="itemscope"
itemtype="microdata type in URL format" where the following is true:
spellcheck="true | false"
tabindex="number" yyyy=four-digit year such as 2010
mm=two-digit month (01=January, 02=February, and so on)
dd=two-digit day of the month (01 through 31)
Chapter 3: HTML and XHTML Element Reference 289 290 Part I: Core Markup

hh=two-digit hour (00 to 23) (24-hour clock not AM or PM) Attributes Defined by Internet Explorer
mm=two-digit minute (00 to 59)
ss=two-digit second (00 to 59) accesskey="key" (5.5)
tzd=time zone designator action="URL to send query" (3)

PART I
contenteditable=" false | true | inherit" (5.5)
disabled="false | true" (5.5)
The time zone designator is either Z, which indicates Universal Time Coordinate or
hidefocus="true | false" (5.5)
coordinated universal time format (UTC), or +hh:mm, which indicates that the time is a local language="javascript | jscript | vbs | vbscript" (4)
time that is hh hours and mm minutes ahead of UTC. Alternatively, the format for the time tabindex="number" (5.5)
zone designator could be –hh:mm, which indicates that the local time is behind UTC. Note unselectable="on| off" (5.5)
that the letter T actually appears in the string, all digits must be used, and 00 values for
minutes and seconds might be required. An example value for the datetime attribute Events Defined by Internet Explorer
might be 2009-10-6T09:15:00-05:00, which corresponds to October 6, 2010, 9:15 A.M., onactivate, onbeforedeactivate, onbeforeeditfocus, onblur, oncontrolselect,
U.S. Eastern Standard Time. ondeactivate, onfocus, onmove, onmoveend, onmovestart, onreadystatechange,
onresize, onresizeend, onresizestart
Example
<p>We have the lowest prices in the galaxy! <ins cite="http://www Element-Specific Attributes
.democompany.com/changes/jan10.html"
date="2010-05-01T09:15:00-05:00"> action This attribute specifies the URL of the query action to be executed when the viewer
New rates are effective in 2010. presses the ENTER key. Although this attribute is not defined under any HTML specification,
</ins></p> it is common to many browsers, particularly Internet Explorer 3, which defined it.

Compatibility prompt This attribute allows a custom query prompt to be defined. The default prompt is
“This is a searchable index. Enter search keywords.”
HTML 4, 4.01, 5 Firefox 1+, Internet Explorer 4+,
XHTML 1.0, 1.1 Netscape 6+, Opera 4+, Safari 1+ Examples
<isindex action="cgi-bin/search.pl" prompt="Enter search terms">
Note
• Browsers can render inserted (<ins>) or deleted (<del>) text in a different style to <!-- very old HTML style syntax below -->
show the changes that have been made to the document. Typically, newly inserted <base href="cgi-bin/search">
entries are underlined and deletions appear with strikethrough. In theory, a browser <isindex prompt="Enter search terms">
could have a way to show a revision history on a document, but generally this is left
<isindex href="cgi-bin/search" prompt="Keywords:">
up to scripting or the environment the page is built in.
Compatibility
<isindex> (Index Prompt)
This element indicates that a document has an associated searchable keyword index. When HTML 2, 3.2, 4, 4.01 (transitional) Firefox 1+, Internet Explorer 4+,
a browser encounters this element, it inserts a query entry field at that point in the XHTML 1.0 (transitional) Netscape 1.1+, Opera 4+, Safari 1+
document. The viewer can enter query terms to perform a search. This element is
deprecated under the strict HTML and XHTML specifications and should not be used. Notes
• Originally, the W3C intended this element to be used in a document’s header.
Standard Syntax (Transitional Only) Browser vendors have relaxed this usage to allow the element in a document’s body.
<isindex Early implementations did not support the action attribute and used a <base> tag
class="class name(s)" or an href attribute to specify a search function’s URL.
dir="ltr | rtl"
• As an empty element, <isindex> requires no closing tag under HTML specifications.
href="URL" (nonstandard but common)
id="unique alphanumeric identifier" However, under the XHTML specification, a trailing slash <isindex /> is required.
lang="language code" • The HTML 3.2 specification only allows the prompt attribute, whereas HTML 2
prompt="string" expected a text description to accompany the search field.
style="style information"
title="advisory text" />
Chapter 3: HTML and XHTML Element Reference 291 292 Part I: Core Markup

• Netscape 1.1 originated the use of the prompt attribute. ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
• This element is not found at all in newer specifications like HTML5. onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,

PART I
<kbd> (Keyboard Input) onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
This inline element logically indicates text as keyboard input. A browser generally renders onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting
text enclosed by this element in a monospaced font.

Standard Syntax Events Defined by Internet Explorer


onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
<kbd
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
class="class name(s)"
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
dir="ltr | rtl"
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
id="unique alphanumeric identifier"
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
lang="language code"
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
style="style information"
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
title="advisory text">
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,
onresizeend, onresizestart, onselectstart, ontimeerror
</kbd>

Attributes Introduced by HTML5 Example


<p>On a Linux or Unix based system you can list files by typing
accesskey="spaced list of accelerator key(s)"
<kbd>ls</kbd> at a command prompt.</p>
contenteditable="true | false | inherit"
contextmenu="id of menu"
data-X="user-defined data" Compatibility
draggable="true | false | auto"
hidden="hidden" HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
itemid="microdata id in URL format" XHTML 1.0, 1.1, Basic Netscape 1+, Opera 4+, Safari 1+
itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata" Note
itemscope="itemscope" • The HTML 2 and 3.2 specifications support no attributes for this element.
itemtype="microdata type in URL format"
spellcheck="true | false"
tabindex="number" <keygen> (Key Pair Generation)
This element is used to control the generation of key pairs in secured communications. On
Attributes Defined by Internet Explorer form submission, the browser will generate a key pair and store the private key in the
accesskey="key" (5.5) browser’s private key storage and send the public key to the server.
contenteditable=" false | true | inherit" (5.5)
disabled="false | true" (5.5) HTML5 Standard Syntax
hidefocus="true | false" (5.5) <keygen
language="javascript | jscript | vbs | vbscript" (4) accesskey="spaced list of accelerator key(s)"
tabindex="number" (5.5) autofocus="true | false"
unselectable="on | off" (5.5) challenge="value for generating challenge"
class="class name(s)"
HTML 4 Event Attributes contenteditable="true | false | inherit"
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, contextmenu="id of menu"
onmousemove, onmouseout, onmouseover, onmouseup data-X="user-defined data"
dir="ltr | rtl"
HTML5 Event Attributes disabled="disabled"
draggable="true | false | auto"
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, form="id of enclosing form"
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, hidden="hidden"
Chapter 3: HTML and XHTML Element Reference 293 294 Part I: Core Markup

id="unique alphanumeric identifier" • This element was initially introduced by Netscape and, although it has been poorly
itemid="microdata id in URL format" documented, has been formalized for HTML5. There is strong indication that some
itemprop="microdata value" browser vendors like Microsoft may not support this element or support it only as a
itemref="space-separated list of IDs that may contain microdata"

PART I
dummy element.
itemscope="itemscope"
itemtype="microdata type in URL format"
keytype="enumerated value for type of key (generally rsa)" <label> (Form Control Label)
lang="language code" This element is used to relate descriptions to form controls.
name="field name"
spellcheck="true | false"
Standard Syntax
style="style information"
tabindex="number" <label
title="advisory text"> accesskey="key"
class="class name(s)"
</keygen> dir="ltr | rtl"
for="id of form field"
HTML5 Event Attributes id="unique alphanumeric identifier"
lang="language code"
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, style="style information"
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, title="advisory text">
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, </label>
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
Attributes Introduced by HTML5
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, accesskey="spaced list of accelerator key(s)"
onsuspend, ontimeupdate, onvolumechange, onwaiting contenteditable="true | false | inherit"
contextmenu="id of menu"
Example data-X="user-defined data"
draggable="true | false | auto"
<!DOCTYPE html> hidden="hidden"
<html> itemid="microdata id in URL format"
<head> itemprop="microdata value"
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> itemref="space-separated list of IDs that may contain microdata"
<title>keygen Example</title> itemscope="itemscope"
</head> itemtype="microdata type in URL format"
<body> spellcheck="true | false"
<form method="post" action="makecert.php"> tabindex="number"
<keygen name="RSA public key" challenge="123456789" keytype="RSA">
<input type="submit" name="createcert" value="Generate">
Attributes Defined by Internet Explorer
</form>
</body> contenteditable="false | true | inherit" (5.5)
</html> datafld="column name" (4)
dataformatas="html | text" (4)
Compatibility datasrc="data source id" (4)
disabled="false | true" (5.5)
HTML5 Browsers such as Netscape, Firefox, Safari, and Opera may have hidefocus="true | false" (5.5)
partial support for this element. language="javascript | jscript | vbs | vbscript" (4)
tabindex="number" (5.5)
unselectable="on | off" (5.5)
Notes
• As an empty element when using XML-style syntax for HTML5, a trailing slash is HTML 4 Event Attributes
required for this element: <keygen />. onblur, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup
Chapter 3: HTML and XHTML Element Reference 295 296 Part I: Core Markup

HTML5 Event Attributes Notes


onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, • Each <label> must not contain more than one form field.
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
• The label element should not be nested.

PART I
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, <layer> (Positioned Layer)
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
This Netscape 4.x–specific element allows the definition of overlapping content layers that can
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, be exactly positioned, hidden or shown, rendered transparent or opaque, reordered front to
onsuspend, ontimeupdate, onvolumechange, onwaiting back, and nested. The functionality of layers is available using CSS positioning facilities, and
the layer element is listed here purely for historical reasons in case developers come across
Events Defined by Internet Explorer pages using them.
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
Syntax (Defined by Netscape 4 Only)
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag, <layer
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, above="layer name"
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup, background="URL of background image"
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, below="layer name"
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, bgcolor="color value"
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, class="class name(s)"
onresizeend, onresizestart, onselectstart, ontimeerror clip="clip region coordinates in x1, y1, x2, y2 form"
height="percentage | pixels"
Element-Specific Attributes id="unique alphanumeric identifier"
left="pixels"
for This attribute specifies the id for the form control element the label references. This is name="string"
overflow="none | clip"
optional when the label encloses the form control it is bound to. In many cases, particularly
pagex="horizontal pixel position of layer"
when a table is used to structure the form, a <label> tag will not be able to enclose the pagey="vertical pixel position of layer"
associated form control, so the for attribute should be used. This attribute allows more than src="URL of layer's contents"
one label to be associated with the same control by creating multiple references. style="style information"
title="advisory text"
Examples top="pixels"
<form action="search.php" method="get"> visibility="hide | inherit | show"
<p> width="percentage | pixels"
<label id="searclabel">Search: z-index="number">
<input type="text" name="search" id="search">
</label> </layer>
</p>
</form> Element-Specific Attributes
<form action="tracker.php" method="POST"> above This attribute contains the name of the layer (as set with the name attribute) to be
<table> rendered directly above the current layer.
<tr>
<td><label for="username">Name</label></td> background This attribute contains the URL of a background pattern for the layer. Like
<td><input type="text" id="username"></td> backgrounds for the document as a whole, the image might tile.
</tr>
</table> below This attribute specifies the name of the layer to be rendered below the current layer.
</form>
bgcolor This attribute specifies a layer’s background color. The attribute’s value can be
Compatibility either a named color, such as red, or a color specified in the hexadecimal #RRGGBB format,
such as #FF0000.
HTML 4, 4.01, 5 Firefox 1+, Internet Explorer 4+,
XHTML 1.0, 1.1, Basic Netscape 6+, Opera 4+, Safari 1+
Chapter 3: HTML and XHTML Element Reference 297 298 Part I: Core Markup

clip This attribute clips a layer’s content to a specified rectangle. All layer content outside <!-- Linked layers -->
that rectangle will be rendered transparent. The clip rectangle is defined by two x,y pairs <layer src="contents.html" left="20" top="20"
that correspond to the top x, left y, and bottom x, right y coordinate of the rectangle. The height="80%" width="80%">
</layer>

PART I
coordinates are relative to the layer’s origin point, 0,0, in its top-left corner, and might have
nothing to do with the pixel coordinates of the screen.
Compatibility
height This attribute is used to set the height of the layer, either in pixels or as a percentage
No standards support Netscape 4, 4.5–4.8
of the screen or region the layer is contained within.

left This attribute specifies, in pixels, the left offset of the layer. The offset is relative to its Notes
parent layer, if it has one, or to the left browser margin if it does not. • The functionality of the layer element is easily replicated using a <div> tag and
the CSS property position:absolute. In older Netscape browsers, using this
name This attribute assigns to the layer a name that can be referenced by programs in a more appropriate approach did populate the JavaScript document.layers
client-side scripting language. The id attribute also can be used. collection.
overflow This attribute specifies what should happen when the layer’s content exceeds its • Because this element is specific to Netscape 4, it should never be used and is
rendering box and clipping area. A value of none does not clip the content, while clip clips discussed only for readers supporting existing <layer>-filled pages they may come
the content to its dimensions or defined clipping area. across. The next edition of this book will remove this historical footnote.
• Applets, plug-ins, and other embedded media forms, generically called objects, can
pagex This attribute is used to set the horizontal pixel position of the layer relative to the
be included in a layer; however, they will float to the top of all other layers, even if
document window rather than any enclosing layer.
their containing layer is obscured.
pagey This attribute is used to set the vertical pixel position of the layer relative to the
document window rather than any enclosing layer. <legend> (Descriptive Legend)
This element is used to assign a caption to a set of form fields as defined by a fieldset
src This attribute specifies the URL that contains the content to be included in the layer.
element.
Using this attribute with an empty element is a good way to preserve layouts under older
browsers. Standard Syntax
top This attribute specifies, in pixels, the top offset of the layer. The offset is relative to its <legend
parent layer, if it has one, or to the top browser margin if it is not enclosed in another layer. accesskey="character"
align="bottom | left | right | top" (transitional only)
visibility This attribute specifies whether a layer is hidden (hidden), shown (show), or class="class name(s)"
dir="ltr | rtl"
inherits (inherits) its visibility from the layer enclosing it.
id="unique alphanumeric identifier"
width This attribute specifies a layer’s width, in pixels or as a percentage value of the lang="language code"
style="style information"
enclosing layer or browser width.
title="advisory text">
z-index This attribute specifies a layer’s stacking order relative to other layers. Position is
</legend>
specified with positive integers, with 1 indicating the bottommost layer.

Examples Attributes Introduced by HTML5


accesskey="spaced list of accelerator key(s)"
<!-- 90s appropriate example to illustrate this element -->
contenteditable="true | false | inherit"
<layer name="scene" bgcolor="#00FFFF">
contextmenu="id of menu"
<layer name="Shaq" left="100" top="100">
data-X="user-defined data"
<img src="shaq.gif">
draggable="true | false | auto"
</layer>
hidden="hidden"
<layer name="Rodman" left="200" top="100"
itemid="microdata id in URL format"
visibility="hidden">
itemprop="microdata value"
<img src="pinkhair.gif">
itemref="space-separated list of IDs that may contain microdata"
</layer>
itemscope="itemscope"
</layer>
Chapter 3: HTML and XHTML Element Reference 299 300 Part I: Core Markup

itemtype="microdata type in URL format" The specification defines bottom and top, as well. Microsoft also defines the use of the
spellcheck="true | false" value center.
tabindex="number"
Example

PART I
Attributes Defined by Internet Explorer <form action="#" method="get">
align="center" (4) <fieldset>
contenteditable=" false | true | inherit" (5.5) <legend align="top">User Information</legend>
disabled="false | true" (5.5) <div>
hidefocus="true | false" (5.5) <label>First Name:
language="javascript | jscript | vbs | vbscript" (4) <input type="text" id="firstname" size="20">
tabindex="number" (5.5) </label><br>
unselectable="on | off" (5.5) <label>Last Name:
<input type="text" id="lastname" size="20">
HTML 4 Event Attributes </label><br>
</div>
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
</fieldset>
onmousemove, onmouseout, onmouseover, onmouseup
</form>
HTML5 Event Attributes Compatibility
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, HTML 4, 4.01, 5 Firefox 1+, Internet Explorer 4+,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, XHTML 1.0, 1.1 Netscape 6+, Opera 4+, Safari 1+
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, Notes
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, • Traditionally, a <legend> tag should occur only within a <fieldset> tag. There
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, should be only one legend per fieldset element.
onsuspend, ontimeupdate, onvolumechange, onwaiting
• Under early drafts of the HTML5 specification, this element is also found in the
figure and details elements. This was later replaced by the dt element.
Events Defined by Internet Explorer
• Some versions of Microsoft documentation show a valign attribute for <legend>
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu, positioning. However, the valign attribute does not appear to work consistently
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag, and has since been dropped from the official documentation.
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup, <li> (List Item)
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, This element is used to indicate a list item as contained in an ordered list (<ol>), unordered
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, list (<ul>), or older list styles such as <dir> and <menu>.
onresizeend, onresizestart, onselectstart, ontimeerror
Standard Syntax
Element-Specific Attributes <li
class="class name(s)"
accesskey This attribute specifies a keyboard navigation accelerator for the element. dir="ltr | rtl"
Pressing ALT or a similar key in association with the specified key selects the form section or id="unique alphanumeric identifier"
the legend itself. Page designers are forewarned to avoid key sequences already bound to lang="language code"
style="style information"
browsers.
title="advisory text"
type="circle | disc | square | a | A | i | I | 1" (transitional only)
align This attribute indicates where the legend value should be positioned within the
value="number"> (transitional only)
border created by a <fieldset> tag. The default position for the legend is the upper-left
corner. It also is possible to position the legend to the right by setting the attribute to right. </li>
Chapter 3: HTML and XHTML Element Reference 301 302 Part I: Core Markup

Attributes Introduced by HTML5 Element-Specific Attributes


accesskey="spaced list of accelerator key(s)"
contenteditable="true | false | inherit" type This attribute indicates the bullet type used in unordered lists or the numbering type

PART I
contextmenu="id of menu" used in ordered lists. For ordered lists, a value of a indicates lowercase letters, A indicates
data-X="user-defined data" uppercase letters, i indicates lowercase Roman numerals, I indicates uppercase Roman
draggable="true | false | auto" numerals, and 1 indicates numbers. For unordered lists, values are used to specify bullet types.
hidden="hidden" Although the browser is free to set bullet styles, a value of disc generally specifies a filled
itemid="microdata id in URL format" circle, a value of circle specifies an empty circle, and a value of square specifies a filled
itemprop="microdata value"
square. This attribute should be avoided in favor of the CSS property list-style-type.
itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
itemtype="microdata type in URL format"
value This attribute indicates the current number of items in an ordered list as defined by
spellcheck="true | false" an <ol> tag. Regardless of the value of type being used to set Roman numerals or letters,
tabindex="number" the only allowed value for this attribute is a number. List items that follow will continue
numbering from the value set. The value attribute has no meaning for unordered lists.
Attributes Defined by Internet Explorer CSS 2 counters can provide much more flexibility than this attribute.
accesskey="key" (5.5)
contenteditable=" false | true | inherit" (5.5) Examples
disabled="false | true" (5.5) <ul>
hidefocus="true | false" (5.5) <li type="circle">First list item is a circle</li>
language="javascript | jscript | vbs | vbscript" (4) <li type="square">Second list item is a square</li>
tabindex="number" (5.5) <li type="disc">Third list item is a disc</li>
unselectable="on | off" (5.5) </ul>

HTML 4 Event Attributes <ol>


<li type="i">Roman Numerals</li>
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, <li type="a" value="3">Second list item is letter C</li>
onmousemove, onmouseout, onmouseover, onmouseup <li type="a">Continue list in lowercase letters</li>
</ol>
HTML5 Event Attributes
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, Compatibility
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, XHTML 1.0, 1.1, Basic Netscape 1+, Opera 4+, Safari 1+
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, Notes
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, • Under the strict HTML and XHTML definitions, the li element loses the type and
onsuspend, ontimeupdate, onvolumechange, onwaiting value attributes, as these presentation styles can be emulated with CSS properties
like list-item-style and CSS counters.
Events Defined by Internet Explorer • HTML5 reintroduces the value attribute to list items but CSS should be used
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate, instead.
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
• Whereas bullet styles can be set explicitly, browsers tend to change styles for bullets
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, when <ul> lists are nested. However, ordered lists generally do not change style
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup, automatically, nor do they support outline-style numbering (1.1, 1.1.1, and so on).
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, CSS rules, of course, can do this.
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, • The closing tag </li> is optional under HTML specifications, including HTML5.
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,
onresizeend, onresizestart, onselectstart, ontimeerror
However, it is required under XHTML and should always be used.
Chapter 3: HTML and XHTML Element Reference 303 304 Part I: Core Markup

<link> (Link to External Files or Set Relationships) HTML5 Event Attributes


This empty element found in the head element specifies relationships between the current onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
document and other documents. Possible uses for this element include defining a relational oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,

PART I
framework for navigation and linking the document to a style sheet. ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
Standard Syntax
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
<link onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
charset="charset list from RFC 2045" onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
class="class name(s)" onsuspend, ontimeupdate, onvolumechange, onwaiting
dir="ltr | rtl"
href="URL" Events Defined by Internet Explorer
hreflang="language code"
id="unique alphanumeric identifier" onload, onreadystatechange
lang="language code"
media="all | aural | braille | print | projection | Element-Specific Attributes
screen | other"
rel="relationship value" charset This attribute specifies the character set used by the linked document. Allowed
rev="relationship value" values for this attribute are character set names, such as EUC-JP, as defined in RFC 2045.
style="style information"
target="frame name" (transitional only)
title="advisory information or relationship specific duty" disabled This DOM Level 1–defined attribute is used to disable a link relationship.
type="MIME type"> The presence of the attribute is all that is required to remove a linking relationship. In
conjunction with scripting, this attribute could be used to turn on and off various style
Other Common Attributes sheet relationships.
disabled="disabled" (from DOM Level 1)
name="unique name" (IE 4+) href This attribute specifies the URL of the linked resource. A URL might be absolute or
relative.
Attributes Introduced by HTML5
hreflang This attribute is used to indicate the language of the linked resource. See the
accesskey="spaced list of accelerator key(s)"
contenteditable="true | false | inherit"
“Language Attributes Reference” section earlier in this chapter for information on allowed
contextmenu="id of menu" values.
data-X="user-defined data"
draggable="true | false | auto" media This attribute specifies the destination medium for any linked style information, as
hidden="hidden" indicated when the rel attribute is set to stylesheet. The value of the attribute might be a
itemid="microdata id in URL format" single media descriptor, such as screen, or a comma-separated list. Possible values for this
itemprop="microdata value" attribute include all, aural, braille, print, projection, and screen. Other values also
itemref="space-separated list of IDs that may contain microdata"
might be defined, depending on the browser.
itemscope="itemscope"
itemtype="microdata type in URL format"
sizes="any or list of space-separated sizes of form ValxVal" rel This attribute names a relationship between the linked document and the current
spellcheck="true | false" document. Multiple values can be specified and should be separated by spaces. The value
tabindex="number" of the rel attribute is simply a text value, which can be anything the author desires.
However, a browser can interpret standardized relationships in a particular way. For
HTML 4 Event Attributes example, a browser might provide special icons or navigation features when the meaning
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, of a link is understood. Currently, document relationship values are neither widely
onmousemove, onmouseout, onmouseover, onmouseup understood nor supported by browsers, but the HTML 4.01 and HTML5 specifications list
some proposed relationship values, as shown in Table 3-22. Note that these values are not
case sensitive.
Chapter 3: HTML and XHTML Element Reference 305 306 Part I: Core Markup

Relationship Value Explanation Example(s) Specification Relationship Value Explanation Example(s) Specification
alternate The link references an <link href="frenchintro HTML 4, 5 help The link references a help <link href="help.html" HTML 4, 5

PART I
alternate version of the .html" rel="alternate" document for the current rel="help">
document that the link lang="fr"> document or site.
is in. For example, this icon A reference to an icon <link href="pint.png" HTML5
might be a translated <link href="secondstyle to represent the current rel="icon">
version of the document, .css" rel="alternate resource as potentially
as suggested by the lang stylesheet"> for some bookmarking or
attribute.
saving routine.
appendix The link references a <link href="intro HTML 4 index The link references a page <link href="docindex.html" HTML 4, 5
document that serves .html" rel="appendix">
that provides an index for rel="index" />
as an appendix for a
the current document.
document or site.
last A reference to the last <link href="page10.html" HTML5
archives A reference to document(s) <link href="/archives" HTML5
document in a collection. rel="last">
of historical interest. rel="archives">
license A reference to the legal or <link href="/legal.html" HTML5
author A reference to information <link href="/tap.html" HTML5
copyright information for rel="license">
about the document’s rel="author">
the current document’s
author.
content. Similar to the
chapter The link references a <link href="ch01.html" HTML 4 copyright value.
document that is a chapter rel="chapter">
next The link references the next <link href="page2.html" HTML 4, 5
in a site or collection of
document to visit in a linear rel="next">
documents.
collection of documents. It
contents The link references a <link href="toc.html" HTML 4 can be used, for example,
document that serves rel="contents"> to “prefetch” the next
as a table of contents, page, and is supported in
most likely for the site, some browsers such as the
although it might be for the older MSN TV browser and
document. Mozilla-based browsers like
copyright The link references a page <link href="copyright HTML 4 Firefox.
that contains a copyright .html" rel="copyright"> pingback Provides the URL to “ping” <link href="http:// HTML5
statement for the current when the document is htmlref.com/watcher.php" (would
document. loaded. rel="pingback"> require
first A reference to the first <link href="page1.html" HTML5 browser
document in a collection. rel="first"> support)

glossary The link references a <link href="glossary.html" HTML 4


prefetch Indication to the user <link href="bigimage.png" HTML5
document that provides a rel="glossary"> agent about object(s) to be rel="prefetch"> (some
glossary of terms for the preloaded during user idle browsers
current document. time. supported
previously)
TABLE 3-22 Possible rel Values (continued)
TABLE 3-22 Possible rel Values (continued)
Chapter 3: HTML and XHTML Element Reference 307 308 Part I: Core Markup

Under a few browsers, such as Opera, these link relationship values are recognized and
Relationship Value Explanation Example(s) Specification
placed in a special navigation menu. For example, given the example here
prev The link references the <link href="page1.html" HTML 4, 5

PART I
previous document in rel="previous"> <!DOCTYPE html>
a linear collection of <html>
<head>
documents.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
search Link to a search facility <link href="search/ " HTML5 <title>Link Relationship Examples</title>
used in a site. rel="search"> <link rel="home" href="http://htmlref.com" title="Homepage">
<link rel="toc" href="http://htmlref.com/chapters/toc.html"
section The link references a <link href="sect07.html" HTML 4 title="Table of contents">
document that is a section rel="section"> <link rel="help" href="http://htmlref.com/help.html" title="Need help?">
in a site or collection of <link rel="copyright" href="http://www.htmlref.com/copyright.html"
documents. title="Copyright statement">
sidebar Specifies a URL that should <link href="instructions HTML5 <link rel="author" href="http://htmlref.com/about/author.html"
title="About the author">
be displayed in a browser .html" rel="sidebar">
</head>
sidebar.
<body>
start The link references the <link href="begin.html" HTML 4 <p>Testing link element rel values</p>
first document in a set of rel="start"> </body>
documents. </html>
stylesheet The link references an <link href="style.css" HTML 4, 5 when viewed in a supporting browser like Opera, you might have special buttons to
external style sheet. This rel="stylesheet"> navigate a site:
is by far the most common
use of <link> and the
most widely supported in
browsers.
subsection The link references <link href="sect07a.html" HTML 4
a document that is a rel="subsection">
subsection in a collection
of documents.
tag Gives a tag that applies to <link href="extag.html" HTML5
the document. rel="tag">
up Provides a link to a <link href="/main/index HTML5
document or section “up” .html" rel="up"> Unfortunately, the reality is that over time fewer browsers have supported these link
from the current document, element features.
usually the parent or The most commonly used rel values from Table 3-22 are described here in more depth.
index document for the Certainly, the most common use of this attribute is to specify a link to an external style
current URL. sheet. The rel attribute is set to stylesheet, and the href attribute is set to the URL of an
external style sheet to format the page:
TABLE 3-22 Possible rel Values (continued)
<link rel="stylesheet" type="application/pdf" href="/css/global.css">

The alternate stylesheet relationship, which would allow users to pick from a
variety of styles, also is defined. To set several alternative styles, the title attribute must be
set to group elements belonging to the same style. All members of the same style must have
exactly the same value for title. For example, the following fragment defines a standard
Chapter 3: HTML and XHTML Element Reference 309 310 Part I: Core Markup

style called basestyle.css, and two alternative styles, titled 640x480 and 1024x768, have been Browsers may also use favicons in a bookmark menu. Currently, the favicon image
added; these refer to style sheets to improve layout at various screen resolutions: should be a 16×16 image, though larger image sizes may be supported in other situations.
For example, Apple devices support a relationship of apple-touch-icon to set a larger

PART I
<link rel="alternate stylesheet" title="640x480" href="small.css" 57×57 PNG format icon
type="text/css">
<link rel="alternate stylesheet" title="1024x768" href="big.css" <link rel="apple-touch-icon" href="/apple-touch-icon.png">
type="text/css">
<link rel="stylesheet" href="basestyle.css" type="text/css"> to be used on its mobile devices. This is just an example to illustrate that many browser- or
environment-specific uses of <link> relationships likely exist.
A Web browser should provide a method for users to view and pick from the list of
Finally, in some browsers if the rel attribute is set with the value of next (or, in other
alternative styles, where the title attribute can be used to name each choice.
cases, prefetch) along with an href value of some data object, the browser will “prefetch”
A rel value is also commonly used to specify the location of a blog feed. Using
the item in question during the idle time of the browser. If the content of the next page is
markup like
stored in the browser’s cache, the page loads much faster than if the page has to be
<link rel="alternate" type="application/rss+xml" requested from the server.
title="PINT Blog RSS Feed" href="http://blog.pint.com/feed/"> Mozilla-based browsers support this syntax already with a relation type of either next
or prefetch. For example, you might use <link> like this:
in the head of a document will cause supporting browsers to put a special subscription icon
in the location bar: <link rel="prefetch" href="/images/product.jpeg">

This would be the same as providing a prefetching hint using an HTTP Link: header:

Link: </images/product.jpeg>; rel=prefetch

It is possible to prefetch a variety of objects in a page during a browser’s idle time.


Consider the following example:
Given that there may be multiple feed formats, there may be a number of link alternate
entries: <link rel="prefetch" href="bigflash.swf">
<link rel="prefetch" href="ajaxlibrary.js">
<link rel="alternate" type="application/rss+xml" <link rel="next" href="2.html">
title="The Blog" href="/rss/index.xml">
<link rel="alternate" type="application/atom+xml" While prefetching is only built into some browsers, it is possible using JavaScript to
title="Atom 0.3" href="/atom/index.xml"> preload objects as well. Regardless of the prefetch method, be careful not to disrupt the load
or use of a currently viewed page with preloading, and be mindful that you may be wasting
So far this syntax is the common method, but things change rapidly in the “blogosphere,”
bandwidth on requests that are never used.
so checking with the documentation of blogging platforms is probably the best way to
ensure you have the very latest feed syntax for (X)HTML. rev The value of the rev attribute shows the relationship of the current document to the
Another common use of this attribute is to set a browser location bar icon called a linked document, as defined by the href attribute. The attribute thus defines the reverse
favicon. These icons are set with the rel attribute using the value of icon or shortcut relationship compared to the value of the rel attribute. Multiple values can be specified
icon: and should be separated by spaces. Values for the rev attribute are similar to the possible
values for rel. They might include alternate, bookmark, chapter, contents,
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> copyright, glossary, help, index, next, prev, section, start, stylesheet, and
subsection. HTML5 does not define this attribute—likely with good cause, because its
Browsers commonly place these small images in the URL bar like so: usage is quite rare and its value nebulous.

sizes This HTML5 attribute is used when the rel attribute has a value of icon to define
the size of the related icon in a Height×Width format. The attribute takes a space-separated
list if multiple forms are possible or takes the keyword any if size doesn’t matter. See the
examples that follow for a demonstration.
Chapter 3: HTML and XHTML Element Reference 311 312 Part I: Core Markup

target The value of the target attribute defines the frame or window name that has the Attributes Defined by Internet Explorer
defined linking relationship or that will show the rendering of any linked resource. accesskey="key" (5.5)
class="class name(s)" (4)

PART I
type This attribute is used to define the type of the content linked to. The value of the contenteditable=" false | true | inherit" (5.5)
attribute should be a MIME type, such as text/html, text/css, and so on. The common dir="ltr | rtl" (5.5)
use of this attribute is to define the type of style sheet linked, and the most common current disabled="false | true" (5.5)
value is text/css, which indicates a CSS format. hidefocus="true | false" (5.5)
id="unique alphanumeric string" (4)
Examples lang="language code" (4)
language="javascript | jscript | vbs | vbscript" (4)
<link href="products.html" rel="parent"> style="style information" (4)
tabindex="number" (5.5)
<link href="corpstyle.css" rel="stylesheet" type="text/css" media="all"> title="advisory text" (4)
unselectable="on | off" (5.5)
<!-- XHTML syntax -->
<link href="corpstyle.css" rel="stylesheet" type="text/css" media="all" />
Events Defined by Internet Explorer
<link href="nextpagetoload.html" rel="next> onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
<!-- HTML5 icon examples --> oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
<link rel=icon" href="icon.png" sizes="16x16"> ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
<link rel=icon" href="icon2.png" sizes="16x16 32x32"> onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
<link rel=icon" href="icon3.svg" sizes="any"> onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
Compatibility onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,
onresizeend, onresizestart, onselectstart, ontimeerror
HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 3+,
XHTML 1.0, 1.1, Basic Netscape 4+, Opera 4+, Safari 1+ Example
<listing>
Notes This is a code listing. The preformatted text element &lt;PRE&gt;
• As an empty element under XHTML, or when using XML-style syntax for HTML5, should be used instead of this deprecated element.
a trailing slash is required for this element: <link />. </listing>

• A <link> tag can occur only in the head element; however, there can be multiple Compatibility
occurrences of <link>.
• HTML 3.2 defines only the href, rel, rev, and title attributes for the link HTML 2 Firefox 1+, Internet Explorer 2+,
Netscape 1+, Opera 6+, Safari 1+
element.
• HTML 2 defines the href, methods, rel, rev, title, and urn attributes for the Notes
link element. The methods and urn attributes were later removed from the
• As a deprecated element, this element should not be used. This element is not
specifications. supported by HTML 4, XHTML 1.0, or 1.1. It is still documented and supported by
many browser vendors. The pre element should be used instead of <listing>.
<listing> (Code Listing) • Many browsers also make text within <listing> tags one size smaller than normal
This deprecated element from HTML 2 is used to indicate a code listing; it is no longer part text, probably because the HTML 2 specification suggested that 132 characters fit on
of the HTML standard. Text tends to be rendered in a smaller size within this element. A a typical line rather than 80.
<pre> tag should be used instead of this element.

Standard Syntax (HTML 2 Only; Deprecated) <map> (Client-Side Image Map)


<listing> This element is used to implement client-side image maps. The element is used to define
</listing> a map that associates locations on an image with a destination URL. Each hot spot or
hyperlink mapping is defined by an enclosed area element. A map is bound to a particular
Chapter 3: HTML and XHTML Element Reference 313 314 Part I: Core Markup

image through the use of the usemap attribute in the img element, which is set to the name Events Defined by Internet Explorer
of the map. onbeforeactivate, onbeforecut, onbeforepaste, onclick, oncut, ondblclick,
ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart,
Syntax

PART I
ondrop, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
<map onlosecapture, onmouseenter, onmouseleave, onmousemove, onmouseout,
class="class name(s)" onmouseover, onmouseup, onmousewheel, onpaste, onpropertychange,
dir="ltr | rtl" onreadystatechange, onscroll, onselectstart
id="unique alphanumeric identifier"
lang="language code" Element-Specific Attribute
name="unique alphanumeric identifier"
style="style information" name Like id, this attribute is used to define a name associated with the element. In the
title="advisory text"> case of the map element, the name attribute is the common way to define the name of the
image map to be referenced by the usemap attribute within an <img> tag.
</map>
Example
Attributes Introduced by HTML5
<map name="mainmap" id="mainmap">
accesskey="spaced list of accelerator key(s)" <area shape="circle" coords="200,250,25"
contenteditable="true | false | inherit" href="file1.html" />
contextmenu="id of menu" <area shape="rectangle" coords="50,50,100,100"
data-X="user-defined data" href="file2.html#important" />
draggable="true | false | auto" <area shape="default" nohref="nohref" />
hidden="hidden" </map>
itemid="microdata id in URL format"
itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata"
Compatibility
itemscope="itemscope" HTML 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
itemtype="microdata type in URL format"
XHTML 1.0, 1.1 Netscape 1+, Opera 4+, Safari 1+
spellcheck="true | false"
tabindex="number"
Notes
Attributes Defined by Internet Explorer • HTML 3.2 supports only the name attribute for the map element.
language="javascript | jscript | vbs | vbscript" (4) • When the name attribute is used, it should be the same as the id attribute.
• Client-side image maps are not supported under HTML 2. They were first
HTML 4 Event Attributes suggested by Spyglass and later incorporated into Netscape and other browsers.
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup • Given the usability concerns with image maps, alternate access forms such as
related text links should be provided.
HTML5 Event Attributes
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, <mark> (Marked Text)
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, This HTML5 element defines a marked section of text. It should be used in a sense similar
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, to how a highlighter is used on text.
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, HTML5 Standard Syntax
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, <mark
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, accesskey="spaced list of accelerator key(s)"
onsuspend, ontimeupdate, onvolumechange, onwaiting class="class name(s)"
contenteditable="true | false | inherit"
contextmenu="id of menu"
data-X="user-defined data"
Chapter 3: HTML and XHTML Element Reference 315 316 Part I: Core Markup

dir="ltr | rtl" <marquee> (Marquee Display)


draggable="true | false | auto"
hidden="hidden" This proprietary element originally introduced by Internet Explorer specifies a scrolling,
id="unique alphanumeric identifier" sliding, or bouncing text marquee.

PART I
itemid="microdata id in URL format"
itemprop="microdata value" Proprietary Syntax (Defined by Internet Explorer)
itemref="space-separated list of IDs that may contain microdata" <marquee
itemscope="itemscope" accesskey="key" (5.5)
itemtype="microdata type in URL format" behavior="alternate | scroll | slide" (3)
lang="language code" bgcolor="color name | #RRGGBB" (3)
spellcheck="true | false" class="class name(s)" (4)
style="style information" contenteditable=" false | true | inherit" (5.5)
tabindex="number" datafld="column name" (4)
title="advisory text"> dataformatas="html | text" (4)
datasrc="data source id" (4)
</mark> direction="down | left | right | up" (3)
dir="ltr | rtl" (5.0)
HTML5 Event Attributes disabled="false | true" (5.5)
height="pixels or percentage"
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
hidefocus="true | false" (5.5)
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
hspace="pixels" (3)
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
id="unique alphanumeric identifier" (4)
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
lang="language code" (4)
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
language="javascript | jscript | vbs | vbscript" (4)
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
loop="infinite | number" (3)
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
scrollamount="pixels" (3)
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
scrolldelay="milliseconds" (3)
onsuspend, ontimeupdate, onvolumechange, onwaiting
style="style information" (4)
tabindex="number" (5.5)
Examples title="advisory text" (4)
<p>The new HTML5 specification is in the works. While truespeed="false | true" (4)
<mark style="background-color: red;">many features are not currently unselectable="on | off" (5.5)
implemented or even well defined</mark> yet, vspace="pixels" (3)
<mark style="background-color: green;">progress is being made</mark>. width="pixels or percentage"> (3)
Stay tuned to see more new HTML elements added to your Web documents in
the years to come.</p> </marquee>

<p>This is <mark>marked text</mark> was it yellow?</p> Events Defined by Internet Explorer


onactivate, onafterupdate, onbeforeactivate, onbeforecut,
Compatibility onbeforedeactivate, onbeforeeditfocus, onbeforepaste, onbeforeupdate,
onblur, onbounce, onclick, oncontextmenu, oncontrolselect, oncut,
HTML5 Not currently supported by any browser, but addressed with a custom element. ondblclick, ondeactivate, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, onerrorupdate, onfilterchange, onfinish,
Notes onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
• Hints in the HTML5 specification suggest text within this element will be black on onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
a yellow background unless other CSS rules override it. onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,
onresizeend, onresizestart, onscroll, onselectstart, onstart, ontimeerror
• This element is not yet implemented in any browser. However, given that most
browsers can handle custom elements, it would be easy enough to simulate the
Element-Specific Attributes
idea of it.
behavior This attribute controls the movement of marquee text across the marquee. The
alternate option causes text to completely cross the marquee field in one direction and
Chapter 3: HTML and XHTML Element Reference 317 318 Part I: Core Markup

then cross in the opposite direction. A value of scroll for the attribute causes text to wrap <menu> (Menu List or Command Menu)
around and start over again. This is the default value for a marquee. A value of slide for This element is used to indicate a short list of items (li elements) that can occur in a menu
this attribute causes text to cross the marquee field and stop when its leading character of choices. Traditionally, this looked like an unordered list under HTML 4 and prior

PART I
reaches the opposite side. versions; HTML5 intends to reintroduce this element as a user interface menu filled with
command elements.
bgcolor This attribute specifies the marquee’s background color. The value for the attribute
can either be a color name or a color value defined in the hexadecimal #RRGGBB format. Syntax (Transitional Only, Returns in HTML5)
<menu
direction This attribute specifies the direction in which the marquee should scroll. The class="class name(s)"
default is left. Other possible values for direction include down, right, and up. compact="compact"
dir="ltr | rtl"
loop This attribute indicates the number of times the marquee content should loop. By id="unique alphanumeric string"
default, a marquee loops infinitely unless the behavior attribute is set to slide. It also is lang="language code"
possible to use a value of infinite or −1 to set the text to loop indefinitely. style="style information"
title="advisory text">
scrollamount This attribute specifies the width, in pixels, between successive displays of
</menu>
the scrolling text in the marquee.
Attributes Introduced by HTML5
scrolldelay This attribute specifies the delay, in milliseconds, between successive displays
of the text in the marquee. accesskey="spaced list of accelerator key(s)"
contenteditable="true | false | inherit"
contextmenu="id of menu"
truespeed When this attribute is present, it indicates that the scrolldelay value should data-X="user-defined data"
be honored for its exact value. If the attribute is not present, any value less than 60 is draggable="true | false | auto"
rounded up to 60 milliseconds. hidden="hidden"
itemid="microdata id in URL format"
Examples itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata"
<marquee behavior="alternate"> itemscope="itemscope"
SPECIAL VALUE !!! This week only !!! itemtype="microdata type in URL format"
</marquee> label="string for menu label"
spellcheck="true | false"
<marquee id="marquee1" bgcolor="red" direction="right" height="30" tabindex="number"
width="80%" hspace="10" vspace="10"> type="context | toolbar"
The super scroller scrolls again!!
More fun than a barrel of &lt;BLINK&gt; elements.
</marquee>
Attributes Defined by Internet Explorer
accesskey="key" (5.5)
contenteditable=" false | true | inherit" (5.5)
Compatibility disabled="false | true" (5.5)
hidefocus="true | false" (5.5)
No standards support Firefox 1+, Internet Explorer 3+, Netscape 6+, Opera 7+, Safari 1+
tabindex="number" (5.5)
unselectable="on | off" (5.5)
Notes
• This is primarily a Microsoft-specific element, although most browsers support it to HTML 4 Event Attributes
some degree. Do not expect all events and attributes beyond basic animation to be onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
supported consistently or even at all beyond Internet Explorer. onmousemove, onmouseout, onmouseover, onmouseup
• There is a placeholder in the current HTML5 specification that discusses this
element will be found in browsers, so its future is still unclear.
HTML5 Event Attributes
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
Chapter 3: HTML and XHTML Element Reference 319 320 Part I: Core Markup

onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, <command label="Document" type="Command" default>
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, <command label="Link" type="Command">
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, <command label="Section" type="Command">
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, </menu>

PART I
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, <hr>
onsuspend, ontimeupdate, onvolumechange, onwaiting <command label="Sort Ascending" type="radio" radiogroup="sort">
<command label="Sort Descending" type="radio" radiogroup="sort">
Events Defined by Internet Explorer </menu>
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu, Compatibility
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
HTML 2, 3.2, 4, 4.01 (transitional), 5 (new functionality) Firefox 1+, Internet Explorer 2+,
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup, XHTML 1.0 (transitional) Netscape 1+, Opera 4+, Safari 1+
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, Notes
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, • Under the strict HTML and XHTML specifications, this element is not defined.
onresizeend, onresizestart, onselectstart, ontimeerror Because most browsers simply render this style of list as an unordered list, using the
<ul> tag instead is preferable.
Element-Specific Attributes
• HTML5 keeps the traditional sense of this element, but it also introduces a new
compact This attribute indicates that the list should be rendered in a compact style. Few sense as an actual menu of commands. In this new use, the content model is much
browsers actually change the rendering of the list, regardless of the presence of this different and the element may include list items, anchors, form fields, command
attribute. The compact attribute requires no value under traditional HTML but should be elements, and horizontal rules. At the time of this writing, no browsers support this
set to a value of compact under XHTML transitional. extended functionality.
• HTML5 may also allow menu elements to be referenced by id using the global
label This HTML5 attribute defines a string label for the menu. This will be particularly
contextmenu attribute.
useful in the case of a nested menu.
• The HTML 2.0 and 3.2 specifications support only the compact attribute, though
type This HTML5 attribute indicates whether the menu should be a standard menu that most browsers don’t do anything with this attribute anyway.
a user can interact with (toolbar) or a contextual menu, usually activated by a right-click
(contextmenu). <meta> (Meta-Information)
This element specifies general information about a document that can be used in document
HTML 4 Example
indexing. It also allows a document to define fields in the HTTP response header when it is
<h2>Taco List</h2> sent from the server.
<menu>
<li>Fish</li>
<li>Pork</li>
Standard Syntax
<li>Beef</li> <meta
<li>Chicken</li> content="string"
</menu> dir="ltr | rtl"
http-equiv="http header string"
HTML5 Examples id="unique alphanumeric string"
lang="language code"
<menu type="menubar"> name="name of meta-information"
<command label="Add" type="Command" icon="plus.png"> scheme="scheme type">
<command label="Edit" type="Command" default>
<command label="Delete" type="Command" disabled>
</menu>
Attributes Introduced by HTML5
accesskey="spaced list of accelerator key(s)"
<menu type="context" label="Actions"> charset="character set"
<menu type="context" label="New"> contenteditable="true | false | inherit"
Chapter 3: HTML and XHTML Element Reference 321 322 Part I: Core Markup

contextmenu="id of menu" Examples


data-X="user-defined data"
draggable="true | false | auto" <!-- Use of the meta element to assist document indexing -->
hidden="hidden" <meta name="keywords" content="html, meta element, meta">

PART I
itemid="microdata id in URL format" <meta name="description" content="This is a simple example of the meta
itemprop="microdata value" element with a fake description for the page.">
itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope" <!-- Use of the meta element to implement client-pull to automatically
itemtype="microdata type in URL format" load a page using XHTML syntax -->
spellcheck="true | false" <meta http-equiv="refresh"
tabindex="number" content="3;URL='http://www.pint.com/'" />

<!-- Use of the meta element to add rating information -->


HTML5 Event Attributes <meta http-equiv="PICS-Label" content="(PICS-1.1
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, 'http://www.rsac.org/ratingsv01.html'
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, 1 gen true comment 'RSACi North America
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, Server' by 'webmaster@democompany.com'
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, for 'http://www.democompany.com' on
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, '1999.05.26T13:05-0500'
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, r (n 0 s 0 v 0 l 1))">
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, <!-- user defined use of meta element -->
onsuspend, ontimeupdate, onvolumechange, onwaiting <meta name="SiteContentID" content="123asdasa1324a">

Event Defined by Internet Explorer <!-- Traditional Charset and Content-Type setting -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
onlayoutcomplete
<!-- HTML5 charset example -->
Element-Specific Attributes <meta charset="utf-8">

charset This HTML5 attribute is used to set the character encoding for the document like Compatibility
“UTF-8”. This approach is an alternative to using the http-equiv method currently
employed. HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
XHTML 1.0, 1.1, Basic Netscape 1.1+, Opera 4+, Safari 1+
content This attribute contains the actual meta-information. The form of the meta-information
varies greatly, depending on the value set for name. Notes
• The meta element can occur only in the head element. It can be defined multiple
http-equiv This attribute binds the meta-information in the content attribute to an
times.
equivalent HTTP response header. If this attribute is present, the name attribute should not
be used. • As an empty element under XHTML, or when using XML-style syntax for HTML5,
a trailing slash is required for this element: <meta />.
name This attribute associates a name with the meta-information contained in the
• A common use of the meta element is to set information for indexing tools, such as
content attribute. If the name attribute is present, the http-equiv attribute should not
search engines. Common values for the name attribute when performing this
be used.
function include author, description, and keywords; other attributes also might
scheme The scheme attribute is used to indicate the expected format of the value of the be possible.
content attribute. The particular scheme also can be used in conjunction with the metadata • The http-equiv attribute is often used to create a document that automatically
profile, as indicated by the profile attribute for the head element. This attribute is not loads another document after a set time. This is called client-pull. An example of a
currently defined for inclusion in HTML5. client-pull meta element is <meta http-equiv="refresh" content="10;URL='
nextpage.html'">. Note that the content attribute contains two values: the first
is the number of seconds to wait, and the second is the identifier URL and the URL
to load after the specified time.
Chapter 3: HTML and XHTML Element Reference 323 324 Part I: Core Markup

• The http-equiv attribute is also used for page ratings, cache control, setting optimum="float"
defaults such as language or scripting, and a variety of other tasks. In many cases, it spellcheck="true | false"
would be better to set these values via the actual HTTP headers rather than via a style="style information"
title="advisory text"

PART I
<meta> tag.
tabindex="number"
• The <meta> tag can be used arbitrarily by site owners, search services, and browser value="float">
vendors. For example, when defining pages for Apple’s iPhone, the viewport and
format-detection values for a <meta> tag can be set to control presentation on </meter>
the device. Google uses a verify-v1 value for approving sites for some
Webmaster-related features. Many more examples can be found online; the point is HTML5 Event Attributes
that the element is quite flexible and has numerous uses. onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
• The HTML 2.0 and 3.2 specifications define only the content, http-equiv, and ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
name attributes. onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
• The meanings of some HTML5 common attributes (particularly those that are onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
interface-oriented, such as accesskey, dragable, and spellcheck) are quite
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
unclear. The specification currently puts these attributes everywhere, unlike HTML 4, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
which does remove core attributes when context is inappropriate. Do not be onsuspend, ontimeupdate, onvolumechange, onwaiting
surprised if they are removed from some HTML5 elements in future revisions to the
specification. Element-Specific Attributes
• The HTML5 specification states that the http-equiv attribute should not set
Content-Language values; the lang attribute should be used in the document low This attribute holds a float value that indicates the low range of the measurement.
instead.
max This attribute holds a float value that indicates the maximum range of the
measurement.
<meter> (Scalar Gauge)
This HTML5 element defines a scalar measurement within a known range, similar to what min This attribute holds a float value that indicates the minimum range of the
might be represented by a gauge. measurement.

HTML5 Standard Syntax optimum This attribute holds a float value that indicates the optimum range of the
<meter
measurement.
accesskey="spaced list of accelerator key(s)"
class="class name(s)"
value This attribute holds a float value that indicates the current value of the measurement.
contenteditable="true | false | inherit"
contextmenu="id of menu" Examples
data-X="user-defined data" <p>Energy level: <meter>50%</meter></p>
dir="ltr | rtl"
draggable="true | false | auto" <p>Energy level: <meter>1/2</meter></p>
hidden="hidden"
high="float" <p>Warp Drive Output:
id="unique alphanumeric identifier" <meter min="0" max="10" low="3" optimum="7" high="9" value="9.5"
itemid="microdata id in URL format" title="Captain she can't take much more of this!">
itemprop="microdata value" </meter>
itemref="space-separated list of IDs that may contain microdata" </p>
itemscope="itemscope"
itemtype="microdata type in URL format" Compatibility
lang="language code"
low="float" HTML5 Not currently supported by any browsers, but could be simulated in modern browsers
max="float" with a custom element and JavaScript.
min="float"
Chapter 3: HTML and XHTML Element Reference 325 326 Part I: Core Markup

Notes Compatibility
• The assumption is that values are used in the correct sense; for example, a min value No standards support Netscape 3, 4, 4.5–4.8
cannot be greater than a max value, a low value can’t be greater than a high value,

PART I
an optimum value cannot be greater than a high value, and so on. Notes
• This element is not yet implemented in any browser. However, given that most • Page developers are strongly encouraged not to use this element. Netscape dropped
browsers can handle custom elements, it would be easy enough to simulate the idea this element for its own browsers starting with version 6.0. The inclusion in this
of it and even apply a CSS display property for it. Using scripting, you might book of this element is for support of existing documents only.
animate or present some visual representation of the data.
• The facilities of this element are better handled using the CSS multicolumn
properties discussed in Chapter 6.
<multicol> (Multiple Column Text)
This Netscape-specific element renders the enclosed content in multiple columns. This
<nav> (Navigation)
element should not be used; a table is a more standard way to render multiple columns of
This HTML5 element represents a group of links to other locations either inside or outside
text across browsers. CSS properties like column-width and column-count perform the
of a document.
same function when supported.

Proprietary Syntax (Defined by Netscape) HTML5 Standard Syntax


<nav
<multicol
accesskey="spaced list of accelerator key(s)"
class="class name(s)"
class="class name(s)"
cols="number of columns"
contenteditable="true | false | inherit"
gutter="pixels"
contextmenu="id of menu"
id="unique alphanumeric identifier"
data-X="user-defined data"
style="style information"
dir="ltr | rtl"
width="pixels">
draggable="true | false | auto"
hidden="hidden"
</multicol>
id="unique alphanumeric identifier"
itemid="microdata id in URL format"
Element-Specific Attributes itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata"
cols This attribute indicates the number of columns in which to display the text. The itemscope="itemscope"
browser attempts to fill the columns evenly. itemtype="microdata type in URL format"
lang="language code"
gutter This attribute indicates the width, in pixels, between the columns. The default value spellcheck="true | false"
for this attribute is ten pixels. style="style information"
tabindex="number"
width This attribute indicates the column width for all columns. The width of each column title="advisory text">
is set in pixels and is equivalent for all columns in the group. If the attribute is not specified,
the width of columns will be determined by taking the available window size, subtracting text and elements particularly links
the number of pixels for the gutter between the columns (as specified by the gutter </nav>
attribute), and evenly dividing the result by the number of columns in the group (as set by
the cols attribute). HTML5 Event Attributes
Example onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
<multicol cols="3" gutter="20"> ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
Put a long piece of text here.... onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
</multicol> onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
Chapter 3: HTML and XHTML Element Reference 327 328 Part I: Core Markup

onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, Examples


onsuspend, ontimeupdate, onvolumechange, onwaiting
<nobr>This really long text ... will not be broken.</nobr>
Example

PART I
<nobr>With this element it is often important to hint where a line may
<nav> be broken using &lt;wbr&gt;.<wbr> This element acts as a soft return.</
<ul> nobr>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li> Compatibility
<li><a href="contact.html">Contact</a></li>
<li><a href="index.html">Home</a></li> No standards support Firefox 1+, Internet Explorer 4+, Netscape 1.1+, Opera 4+
</ul>
</nav> Notes
Compatibility • While many browsers support this attribute, it is not part of any W3C standard.
• See the “<wbr> (Word Break)” section later in the chapter for a discussion of how to
HTML5 Not currently supported by any browser, but addressed with a custom element. implement soft-break functionality without the proprietary wbr element.
Notes
<noembed> (No Embedded Media Support)
• Links are not restricted to occur solely within <nav> tags. The intent of this element This Netscape-introduced element is used to indicate alternative content to be displayed on
is that it collects navigation together often as a unit; commonly this would be primary browsers that cannot support an embedded media object. It should occur in conjunction
or secondary site navigation or possibly page-related links. with the embed element.
• While this element is not yet supported, it is easily simulated by using a custom tag
or using a <div> tag with a special class. Proprietary Syntax (Initially Defined by Netscape)
<noembed
<nobr> (No Line Breaks) class="class name"
id="unique id"
This proprietary element renders enclosed text without line breaks. Break points for where
style="CSS rules"
text may wrap can be inserted using the wbr element or related workarounds. title="advisory text">

Common Syntax Alternative content for browsers that do not support embed
<nobr
class="class name(s)" </noembed>
id="unique alphanumeric identifier"
style="style information" Element-Specific Attributes
title="advisory text"> Netscape does not specifically define attributes for this element; however, testing and
documentation suggests that class, id, style, and title might be supported for this
</nobr>
element in many browsers.
Attributes Defined by Internet Explorer Example
contenteditable=" false | true | inherit " (5.5) <embed src="trailer.mov" height="300" width="300">
dir="ltr | rtl" (5.5) <noembed>
disabled="false | true" (5.5) <img src="error.gif" alt="Error">
unselectable="on | off" (5.5) <p>This browser is not configured to display video</p>
</noembed>
Events Defined by Internet Explorer </embed>
onbeforeactivate, onbeforecopy, onbeforecut, onbeforeedit, onbeforepaste,
oncopy, oncut, ondrag, ondragend, ondragenter, ondragleave, ondragover, Compatibility
ondragstart, ondrop, onfocusin, onfocusout, onhelp, onlosecapture,
onmouseenter, onmouseleave, onmousewheel, onpaste, onpropertychange, No standards support Netscape 2, 3, 4–4.7
onreadystatechange, onscroll, onselectstart
Chapter 3: HTML and XHTML Element Reference 329 330 Part I: Core Markup

Note • The benefit of events and sophisticated attributes, such as style, is unclear for
• Even if other browsers do not support the tag and render the contents of a browsers that would use content within <noframes>, given that older browsers
<noembed> tag, it works in the manner it was designed, given how browsers handle
that don’t support frames probably would not support these features.

PART I
unknown elements.
<noscript> (No Script Support Content)
<noframes> (No Frame Support Content) This element is used to enclose content that should be rendered on browsers that do not
This element is used to indicate alternative content to be displayed on browsers that do not support scripting or that have scripting turned off.
support frames.
Syntax
Standard Syntax <noscript
class="class name(s)"
<noframes dir="ltr | rtl"
class="class name(s)" id="unique alphanumeric identifier"
dir="ltr | rtl" lang="language code"
id="unique alphanumeric identifier" style="style information"
lang="language code" title="advisory text">
style="style information"
title="advisory text"> Alternative content for non-script-supporting browsers
Alternative content for browsers that do not support frames </noscript>
</noframes>
Attributes Introduced by HTML5
HTML 4 Event Attributes accesskey="spaced list of accelerator key(s)"
contenteditable="true | false | inherit"
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, contextmenu="id of menu"
onmousemove, onmouseout, onmouseover, onmouseup data-X="user-defined data"
draggable="true | false | auto"
Event Defined by Internet Explorer hidden="hidden"
onreadystatechange itemid="microdata id in URL format"
itemprop="microdata value"
Example itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
<frameset rows="100,*"> itemtype="microdata type in URL format"
<frame name="nav" src="controls.html"> spellcheck="true | false"
<frame name="body" src="content.html"> tabindex="number"
<noframes>
<p>Sorry, this browser does not support frames.</p> HTML 4 Event Attributes
</noframes>
</frameset> onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup
Compatibility
HTML5 Event Attributes
HTML 4, 4.01 (transitional and frameset) Firefox 1+, Internet Explorer 2+, onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
XHTML 1.0 (transitional and frameset) Netscape 2+, Opera 4+, Safari 1+ oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
Notes onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
• This element should be used within the scope of the frameset element.
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
• This element has no inclusion under HTML5 because standard frames are not onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
included in that specification. onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting
Chapter 3: HTML and XHTML Element Reference 331 332 Part I: Core Markup

Event Defined by Internet Explorer class="class name(s)"


classid="id"
onreadystatechange codebase="URL"
codetype="MIME Type"

PART I
Examples data="URL of data"
<script type="type/javascript"> declare="declare"
<!-- dir="ltr | rtl"
window.location="http://www.pint.com"; height="percentage | pixels"
//--> hspace="percentage | pixels" (transitional only)
</script> id="unique alphanumeric identifier"
<noscript> lang="language code"
<p>JavaScript is not supported. Follow this name="unique alphanumeric name"
<a href="http://www.pint.com">link</a> instead.</p> standby="standby text string"
</noscript> style="style information"
tabindex="number"
<!-- HTML5 refresh trick --> title="advisory text"
<!DOCTYPE html> type="MIME Type"
<html> usemap="URL"
<head> vspace="percentage | pixels" (transitional only)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> width="percentage | pixels">
<title>Web Application</title>
<!-- require script on --> param elements and alternative rendering
<noscript>
<meta http-equiv="Refresh" content="0;URL=/errors/noscript.html"> </object>
</noscript>
<!-- more head content follows --> Attributes Introduced by HTML5
accesskey="spaced list of accelerator key(s)"
Compatibility contenteditable="true | false | inherit"
contextmenu="id of menu"
HTML 4, 4.01, 5 Firefox 1+, Internet Explorer 3+, data-X="user-defined data"
XHTML 1.0, 1.1 Netscape 2+, Opera 4+, Safari 1+ draggable="true | false | auto"
hidden="hidden"
Note itemid="microdata id in URL format"
itemprop="microdata value"
• Besides using the noscript element, it may be wise to employ a comment mask
itemref="space-separated list of IDs that may contain microdata"
around any script code that is embedded rather than linked. Oddly, under HTML 4 itemscope="itemscope"
<noscript> is not allowed in the head even though <script> is. Under HTML5 it itemtype="microdata type in URL format"
is allowed, though with a limited set of content within it and is not defined when spellcheck="true | false"
XML syntax is used.
Attributes Defined by Internet Explorer
<object> (Embedded Object) accesskey="character" (4)
This element specifies an arbitrary object to be included in an HTML document. Initially, align="absbottom | absmiddle | baseline | texttop" (4)
this element was used to insert ActiveX controls, but according to the specification, an object code="URL" (4)
datafld="column name" (4)
can be any media object, document, applet, interactive control, or even image.
datasrc="id for bound data" (4)
hidefocus="true | false" (5.5)
Standard Syntax language="javascript | jscript | vbs | vbscript" (4)
<object unselectable="on | off" (5.5)
align="bottom | left | middle | right | top" (transitional only)
archive="URL" HTML 4 Event Attributes
border="percentage | pixels" (transitional only)
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup
Chapter 3: HTML and XHTML Element Reference 333 334 Part I: Core Markup

HTML5 Event Attributes data This attribute contains a URL for data required by an object.
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
declare This attribute declares an object without instantiating it. This is useful when the

PART I
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, object will be a parameter to another object. In traditional HTML, this attribute takes no
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, value; under XHTML, set it equal to declare.
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, name Under the older forms of HTML, this attribute defines the name of the control so
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, that scripting can access it. The id attribute should be used if possible.
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting standby This attribute contains a text message to be displayed while the object is loading.

Events Defined by Internet Explorer type This attribute specifies the MIME type for the object’s data. This is different from
onactivate, onbeforedeactivate, onbeforeeditfocus, onblur, oncellchange, codetype, which is the MIME type of the object and not of the data it uses.
onclick, oncontrolselect, ondataavailable, ondatasetchanged,
ondatasetcomplete, ondblclick, ondeactivate, ondrag, ondragend, usemap This attribute contains the URL of the image map to be used with the object.
ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, Typically, the URL will be a fragment identifier referencing a map element somewhere else
onfocus, onkeydown, onkeypress, onkeyup, onlosecapture, onmove, onmoveend, within the file. The presence of this attribute indicates that the type of object being included
onmovestart, onpropertychange, onreadystatechange, onresize, onresizeend, is an image.
onresizestart, onrowenter, onrowexit, onrowsdelete, onrowsinserted,
onscroll, onselectstart vspace This attribute indicates the vertical space, in pixels or as a percentage, between the
object and surrounding text.
Element-Specific Attributes
Examples
align This attribute aligns the object with respect to the surrounding text. The default is
<!-- Using XHTML syntax with trailing slashes here -->
left. The HTML specification defines bottom, middle, right, and top, as well. Browsers <object id="IeLabel1" width="325" height="65"
might provide an even richer set of alignment values. The behavior of alignment for objects classid="CLSID:99B42120-6EC7-11CF-A6C7-00AA00A47DD2">
is similar to images. Under the strict HTML and XHTML specifications, the object element <param name="_ExtentX" value="6879" />
does not support this attribute. <param name ="_ExtentY" value="1376" />
<param name="Caption" value="Hello World" />
archive This attribute contains a URL for the location of an archive file. An archive file <param name="Alignment" value="4" />
typically is used to contain multiple object files to improve the efficiency of access. <param name="Mode" value="1" />
<param name="ForeColor" value="#FF0000" />
border This attribute specifies the width of the object’s borders, in pixels or as a percentage. <param name="FontName" value="Arial" />
<param name="FontSize" value="36" />
classid This attribute contains a URL for an object’s implementation. The URL syntax <b>Hello World for non-ActiveX users!</b>
depends upon the object’s type. With ActiveX controls, the value of this attribute does not </object>
appear to be a URL but something of the form CLSID: object-id; for example, CLSID: <!-- Standard HTML style -->
99B42120-6EC7-11CF-A6C7-00AA00A47DD2. <object classid="java:Blink.class"
standby="Here it comes"
code Under the old Microsoft implementation, this attribute contains the URL referencing height="100" width="300">
a Java applet class file. The way to access a Java applet under the HTML/XHTML <param name="lbl"
specification is to use <object classid="java: classname.class">. The pseudo-URL value="Java is fun, exciting, and new.">
java: is used to indicate a Java applet. Microsoft Internet Explorer 4 and beyond support <param name="speed" value="2">
this style, so code should not be used. This will display in non-Java-aware or -enabled
browsers.
codebase This attribute contains a URL to use as a relative base to access the object </object>
specified by the classid attribute.
<!-- pulls in remote content here -->
<object data="pullinthisfile.html">
codetype This attribute specifies an object’s MIME type. Do not confuse this attribute with Data not included!
type, which specifies the MIME type of the data the object may use, as defined by the data </object>
attribute.
Chapter 3: HTML and XHTML Element Reference 335 336 Part I: Core Markup

Compatibility draggable="true | false | auto"


hidden="hidden"
HTML 4, 4.01, 5 Firefox 1+, Internet Explorer 3+, itemid="microdata id in URL format"
itemprop="microdata value"

PART I
XHTML 1.0, 1.1, Basic Netscape 4+, Opera 4+, Safari 1+
itemref="space-separated list of IDs that may contain microdata"
Notes itemscope="itemscope"
itemtype="microdata type in URL format"
• Under the strict HTML and XHTML specifications, the object element loses most reversed="reversed"
of its presentation attributes, including align, border, height, hspace, vspace, spellcheck="true | false"
and width. These attributes are replaced by style sheet rules. tabindex="number"
• The HTML 4.01 specification reserves the datafld, dataformatas, and datasrc Attributes Defined by Internet Explorer
attributes for future use. However, these attributes were dropped in XHTML,
though they are well supported by Internet Explorer 4 and beyond. accesskey="key" (5.5)
contenteditable="false | true | inherit" (5.5)
• Alternative content should be defined within an <object> tag after any enclosed disabled="false | true" (5.5)
<param> tags. hidefocus="true | false" (5.5)
language="javascript | jscript | vbs | vbscript" (4)
• The object element is still mainly used to include multimedia binaries in pages. tabindex="number" (5.5)
Although the specification defines that it can load in HTML files, insert a variety of unselectable="on | off" (5.5)
other objects, and create image maps, not every browser supports this, and few
developers are aware of these features. In theory, this very versatile tag should take HTML 4 Event Attributes
over duties from the venerable <img> tag in future specifications, though given the onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
media-specific element trends of HTML5, this seems unlikely to happen. onmousemove, onmouseout, onmouseover, onmouseup

<ol> (Ordered List) HTML5 Event Attributes


This element is used to define an ordered or numbered list of items. The numbering style onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
comes in many forms, including letters, Roman numerals, and regular numerals. The oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
individual items within the list are specified by li elements included with the ol element. ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
Standard Syntax onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
<ol onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
class="class name(s)" onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
compact="compact" (transitional only) onsuspend, ontimeupdate, onvolumechange, onwaiting
dir="ltr | rtl"
id="unique alphanumeric identifier" Events Defined by Internet Explorer
lang="language code"
start="number" (transitional versions and HTML5) onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
style="style information" onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
title="advisory text" oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
type="a | A | i | I | 1"> (transitional only)> ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
li elements only onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
</ol> onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,
onresizeend, onresizestart, onselectstart, ontimeerror
Attributes Introduced by HTML5 Element-Specific Attributes
accesskey="spaced list of accelerator key(s)"
contenteditable="true | false | inherit" compact This attribute indicates that the list should be rendered in a compact style. Few
contextmenu="id of menu" browsers actually change the rendering of the list, regardless of the presence of this
data-X="user-defined data" attribute. The compact attribute requires no value under traditional HTML but under
XHTML should be set to compact.
Chapter 3: HTML and XHTML Element Reference 337 338 Part I: Core Markup

reversed This HTML5 Boolean attribute specifies that the counting of the list should go in • HTML5 returns the start attribute to ordered lists and adds the reversed
reverse order. CSS counters provide much more functionality than this attribute, but it is attribute.
useful in the absence of this more complicated syntax. • Under the XHTML 1.0 specification, the compact attribute must have a quoted

PART I
attribute value: <ol compact="compact">.
start This attribute specifies the start value for numbering the individual list items.
Although the ordering type of list elements might be Roman numerals, such as XXXI, or • The HTML 3.2 specification supports only the compact, start, and type attributes.
letters, the value of start is always represented as a number. To start numbering elements • The HTML 2.0 specification supports only the compact attribute.
from the letter C, use <ol type="A" start="3">.

type This attribute indicates the numbering type: a indicates lowercase letters, A indicates <optgroup> (Option Grouping)
uppercase letters, i indicates lowercase Roman numerals, I indicates uppercase Roman This element specifies a grouping of items in a selection list defined by option elements so
numerals, and 1 indicates numbers. Type set in an ol element is used for the entire list that the menu choices can be presented in a hierarchical menu or similar alternative fashion
unless a type attribute is used within an enclosed li element. to improve access through nonvisual browsers.

Examples Standard Syntax


<ol type="1"> <optgroup
<li>First step class="class name(s)"
<ol> dir="ltr | rtl"
<li>Watch nested lists</li> disabled="disabled"
<li>Often closed wrong</li> id="unique alphanumeric identifier"
</ol></li> label="text description"
<li>Second step</li> lang="language code"
<li>Third step</li> style="style information"
</ol> title="advisory text">

<ol compact="compact" type="I" start="30"> option elements


<li>Clause 30</li>
<li>Clause 31</li> </optgroup>
<li>Clause 32</li>
</ol> Attributes Introduced by HTML5
accesskey="spaced list of accelerator key(s)"
<!-- HTML5 changes --> contenteditable="true | false | inherit"
<ol start="3" reversed> contextmenu="id of menu"
<li>...</li> data-X="user-defined data"
<li>...</li> draggable="true | false | auto"
<li>...</li> hidden="hidden"
<li>Blastoff!</li> itemid="microdata id in URL format"
</ol> itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata"
Compatibility itemscope="itemscope"
itemtype="microdata type in URL format"
HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+, spellcheck="true | false"
XHTML 1.0, 1.1, Basic Netscape 1+, Opera 4+, Safari 1+ tabindex="number"

Notes HTML 4 Event Attributes


• Under the strict HTML and XHTML specifications, the ol element no longer onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
supports the compact, start, and type attributes. These aspects of lists can be onmousemove, onmouseout, onmouseover, onmouseup
controlled with style sheet rules.
HTML5 Event Attributes
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
Chapter 3: HTML and XHTML Element Reference 339 340 Part I: Core Markup

ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, label="text description"


onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, lang="language code"
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, selected="selected"
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, style="style information"

PART I
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, title="advisory text"
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, value="option value">
onsuspend, ontimeupdate, onvolumechange, onwaiting
</option>
Element-Specific Attributes
Attributes Introduced by HTML5
disabled Occurrence of this attribute indicates that the enclosed set of options is disabled. accesskey="spaced list of accelerator key(s)"
contenteditable="true | false | inherit"
label This attribute contains a short label to use when the selection list is rendered as items contextmenu="id of menu"
in a hierarchy. data-X="user-defined data"
draggable="true | false | auto"
Example hidden="hidden"
<label> itemid="microdata id in URL format"
Where would you like to go for your vacation? itemprop="microdata value"
<select> itemref="space-separated list of IDs that may contain microdata"
<option id="choice1" value="Hong Kong">Hong Kong</option> itemscope="itemscope"
<optgroup label="South Pacific"> itemtype="microdata type in URL format"
<option id="choice2" label="Australia" value="Australia"> spellcheck="true | false"
Australia</option> tabindex="number"
<option id="choice3" label="Fiji" value="Fiji">
Wakaya (Fiji Islands)</option> Attribute Defined by Internet Explorer
<option id="choice4" value="New Zealand"> language="javascript | jscript | vbs | vbscript" (4)
New Zealand</option>
</optgroup>
<option id="choice5" value="home" selected>Your backyard</option>
HTML 4 Event Attributes
</select> onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
</label> onmousemove, onmouseout, onmouseover, onmouseup

Compatibility HTML5 Event Attributes


onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
HTML 4, 4.01, 5 Firefox 1+, Internet Explorer 6+, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
XHTML 1.0, 1.1 Netscape 6+, Opera 7+, Safari 1+ ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
Notes onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
• This element should occur only within the context of a select element. onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
• The visual presentation of this element may vary slightly between browsers. onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting
<option> (Option in Selection List)
This element specifies an item in a selection list defined by a select element.
Events Defined by Internet Explorer
onlayoutcomplete, onlosecapture, onpropertychange, onreadystatechange,
Standard Syntax onselectstart, ontimeerror
<option
class="class name(s)" Element-Specific Attributes
dir="ltr | rtl"
disabled="disabled" disabled Presence of this attribute indicates that the particular item is not selectable.
id="unique alphanumeric identifier" Traditional HTML did not require a value for this attribute, but it should be set to disabled
under XHTML.
Chapter 3: HTML and XHTML Element Reference 341 342 Part I: Core Markup

label This attribute contains a short label that might be more appealing to use when the form="id of related form element"
selection list is rendered as a hierarchy due to the presence of an optgroup element. hidden="hidden"
id="unique alphanumeric identifier"
itemid="microdata id in URL format"

PART I
selected This attribute indicates that the associated item is the default selection. If this
itemprop="microdata value"
attribute is not included, the first item in the selection list is the default. If the select
itemref="space-separated list of IDs that may contain microdata"
element enclosing the option elements has the multiple attribute, the selected attribute itemscope="itemscope"
might occur in multiple entries. Otherwise, it should occur in only one entry. Under itemtype="microdata type in URL format"
XHTML, the value of the selected attribute must be set to selected. lang="language code"
name="element name for submission purposes"
value This attribute indicates the value to be included with the form result when the item spellcheck="true | false"
is selected. style="style information"
tabindex="number"
Example title="advisory text">
<p>Which is your favorite dog?:
</output>
<select>
<option value="Scottie">Angus"</option>
<option value="Mini Schnauzer" selected>Tucker</option> HTML5 Event Attributes
<option value="Australian Shepard">Sabrina</option> onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
<option value="German Shepard">Lucky</option> oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
</select> ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
</p> onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
Compatibility onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
HTML 2, 3.2. 4, 4.01, 5 Firefox 1+, Internet Explorer 2+, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
XHTML 1.0, 1.1, Basic Netscape 1+, Opera 2.1+, Safari 1+ onsuspend, ontimeupdate, onvolumechange, onwaiting

Notes Element-Specific Attributes


• Under HTML specifications, the closing tag for <option> is optional. However, for for This attribute should be set to the id value(s) of the elements that target this element.
XHTML compatibility, the closing tag </option> is required.
• This element should occur only within the context of a select element. form This attribute should be set to the id value of the form element that the output
element is associated with; otherwise, the nearest parent form is used.
• The HTML 2.0 and 3.2 specifications define only the selected and value attributes
for this element. name This attribute should set the name to be used in a name/value pair if the element is
used in form submission.
<output> (Form Output)
This HTML5 block element defines a region that will be used to display output from some Examples
calculation or form control. <form action="#" method="get" id="testform">
<p><input type="date" id="year"
HTML5 Standard Syntax oninput="year.value = valueAsDate.getYear()">
<p>HTML5 released in the year
<output
<output for="year">&nbsp;</output></p>
accesskey="spaced list of accelerator key(s)"
</form>
class="class name(s)"
contenteditable="true | false | inherit"
<output form="testform" for="year"> </output>
contextmenu="id of menu"
data-X="user-defined data"
dir="ltr | rtl" Compatibility
draggable="true | false | auto"
for="list of spaced id values of related elements" HTML5 Not currently supported by any browser, but addressed with a custom element.
Chapter 3: HTML and XHTML Element Reference 343 344 Part I: Core Markup

Note HTML5 Event Attributes


• This element supports two useful event handlers that are globally defined by onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
HTML5, onformchange and onforminput, if the element will be used to monitor oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,

PART I
forms it is associated with rather than forms targeting it. ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
<p> (Paragraph) onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
This block element is used to define a paragraph of text. onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
Standard Syntax onsuspend, ontimeupdate, onvolumechange, onwaiting

<p
align="center | justify | left | right" (transitional only)
Events Defined by Internet Explorer
class="class name(s)" onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
dir="ltr | rtl" onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
id="unique alphanumeric identifier" oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
lang="language code" ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
style="style information" onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
title="advisory text"> onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
</p> onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,
onresizeend, onresizestart, onselectstart, ontimeerror
Attributes Introduced by HTML5
accesskey="spaced list of accelerator key(s)"
Element-Specific Attribute
contenteditable="true | false | inherit"
contextmenu="id of menu"
align This attribute specifies the alignment of text within a paragraph. The default value is
data-X="user-defined data" left. The transitional specification of HTML 4.01 also defines center, justify, and
draggable="true | false | auto" right. However, under the strict HTML and XHTML specifications, text alignment can be
hidden="hidden" handled through the CSS property text-align.
itemid="microdata id in URL format"
itemprop="microdata value" Examples
itemref="space-separated list of IDs that may contain microdata"
<p align="right">A right-aligned paragraph</p>
itemscope="itemscope"
itemtype="microdata type in URL format"
<p id="para1" class="defaultParagraph"
spellcheck="true | false"
title="Introduction Paragraph">
tabindex="number"
This is the introductory paragraph for a very long paper about nothing.
</p>
Attributes Defined by Internet Explorer
accesskey="key" (5.5) Compatibility
contenteditable="false | true | inherit" (5.5)
disabled="false | true" (5.5) HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
hidefocus="true | false" (5.5) XHTML 1.0, 1.1, Basic Netscape 1+, Opera 2.1+, Safari 1+
language="javascript | jscript | vbs | vbscript" (4)
tabindex="number" (5.5) Notes
unselectable="on | off" (5.5)
• Because p is a block element, browsers typically insert a blank line, but this
HTML 4 Event Attributes rendering should not be assumed, given the rise of style sheets, which can use the
display property to override this action.
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup • Under the strict (X)HTML and HTML5 specifications, the align attribute is not
supported. Alignment of text can instead be accomplished using CSS properties like
text-align.
Chapter 3: HTML and XHTML Element Reference 345 346 Part I: Core Markup

• The closing tag for the <p> tag is optional under the HTML specification; however, HTML5 Event Attributes
under the XHTML 1.0 specification, the closing tag </p> is required for XHTML onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
compatibility. oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,

PART I
• As a logical element, empty paragraphs are ignored by browsers, so do not try to ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
use multiple <p> tags in a row, like <p><p><p><p>, to add blank lines to a Web
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
page. onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
• Often, nonbreaking space entities are used to hold open empty paragraphs, like so: onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
<p>&nbsp;</p>. The value of this markup is questionable. onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting
• The HTML 3.2 specification supports only the align attribute with values of
center, left, and right. Element-Specific Attributes
• The HTML 2.0 specification supports no attributes for the p element.
name This attribute contains the parameter’s name. The name of the parameter depends
on the particular object being inserted into the page, and it is assumed that the object knows
<param> (Object Parameter) how to handle the passed data. Do not confuse the name attribute for this element with the
This element specifies a parameter to be passed to an embedded object that is specified with name attribute used for form elements. In the latter case, the name attribute does not have a
the object or applet element. This element should occur only within the scope of one of similar meaning to id, but rather specifies the name of the data to be passed to an enclosing
these elements. <object> tag.
Standard Syntax type When the valuetype attribute is set to ref, the type attribute can be used to indicate
<param the type of information to be retrieved. Legal values for this attribute are in the form of
id="unique alphanumeric identifier" MIME types, such as text/html.
name="parameter name"
type="mime Type" value This attribute contains the parameter’s value. The actual content of this attribute
value="parameter value"
depends on the object and the particular parameter being passed in, as determined by the
valuetype="data | object | ref">
name attribute.
Attributes Introduced by HTML5 valuetype This attribute specifies the type of the value attribute being passed in. Possible
accesskey="spaced list of accelerator key(s)" values for this attribute include data, object, and ref. A value of data specifies that the
contenteditable="true | false | inherit" information passed in through the value parameter should be treated just as data. A value
contextmenu="id of menu"
of ref indicates that the information being passed in is a URL that indicates where the data
data-X="user-defined data"
draggable="true | false | auto" to be used is located. The information is not retrieved, but the URL is passed to the object,
hidden="hidden" which then can retrieve the information if necessary. The last value, object, indicates that
itemid="microdata id in URL format" the value being passed in is the name of an object as set by its id attribute. In practice, the
itemprop="microdata value" data attribute is used by default.
itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope" Examples
itemtype="microdata type in URL format"
<applet code="plot.class">
spellcheck="true | false"
<param name="min" value="5">
tabindex="number"
<param name="max" value="30">
<param name="ticks" value=".5">
Attributes Defined by Internet Explorer <param name="line-style" value="dotted">
datafld="column name" (4) </applet>
dataformatas="html | text" (4)
datasrc="data source id" (4) <!-- XHTML style here -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="swflash.cab#version=2,0,0,0"
height="100" width="100">
Chapter 3: HTML and XHTML Element Reference 347 348 Part I: Core Markup

<param id="param1" name="Movie" value="SplashLogo.swf" /> Compatibility


<param id="param2" name="Play" value="True" />
</object> HTML 2 Firefox 1+, Internet Explorer 2+, Netscape 1+, Opera 4+, Safari 1+

PART I
Compatibility Notes
HTML 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 3+, • No closing tag for this element is necessary because the browser will ignore all tags
XHTML 1.0, 1.1, Basic Netscape 4+, Opera 5+, Safari 1+ after the starting tag.
• This element should not be used. Plain text information can be indicated by a file
Notes type, and information can be inserted in a preformatted fashion using the pre
• The HTML 3.2 specification supports only the name and value attributes for this element.
element.
• All modern browsers at the time of this edition continue to support this tag despite
• As an empty element under XHTML or when using XML-style syntax for HTML5, a documentation to the contrary.
trailing slash is required for this element: <param />.
<pre> (Preformatted Text)
<plaintext> (Plain Text) This element is used to indicate that the enclosed text is preformatted, meaning that spaces,
This deprecated element from the HTML 2.0 specification renders the enclosed text as plain returns, tabs, and other formatting characters are preserved. Browsers will, however,
text and forces the browser to ignore any enclosed HTML. Typically, information affected by acknowledge most HTML elements that are found within a <pre> tag. Preformatted text
the <plaintext> tag is rendered in monospaced font. This element is no longer part of the generally will be rendered by the browsers in a monospaced font.
HTML standard and should never be used.
Standard Syntax
Syntax (HTML 2; Deprecated Under HTML 4)
<pre
<plaintext> class="class name(s)"
dir="ltr | rtl"
Attributes Defined by Internet Explorer id="unique alphanumeric value"
accesskey="key" (5.5) lang="language code"
class="class name(s)" (4) style="style information"
contenteditable="false | true | inherit" (5.5) title="advisory text"
disabled="false | true" (5.5) width="number" (transitional only)
dir="ltr | rtl" (4) xml:space="preserve">
hidefocus="true | false" (5.5)
id="unique alphanumeric identifier" (4) </pre>
lang="language code" (4)
language="javascript | jscript | vbs | vbscript" (4) Attributes Introduced by HTML5
style="style information" (4) accesskey="spaced list of accelerator key(s)"
tabindex="number" (5.5) contenteditable="true | false | inherit"
title="advisory text" (4) contextmenu="id of menu"
data-X="user-defined data"
Example draggable="true | false | auto"
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN"> hidden="hidden"
<html> itemid="microdata id in URL format"
<head><title>Plaintext Example</title></head> itemprop="microdata value"
<body> itemref="space-separated list of IDs that may contain microdata"
The rest of this file is in plain text. itemscope="itemscope"
<plaintext> itemtype="microdata type in URL format"
Even though this is supposed to be <b>bold</b>, the tags still show. spellcheck="true | false"
There is no way to turn plain text off once it is on. </plaintext> tabindex="number"
does nothing to help. Even </body> and </html> will show up.
Chapter 3: HTML and XHTML Element Reference 349 350 Part I: Core Markup

Attributes Defined by Internet Explorer It is curious that an element defined to override traditional whitespace rules would allow
accesskey="key" (5.5) such an attribute, and in practice this attribute is not used by developers.
contenteditable="false | true | inherit" (5.5)
Example

PART I
disabled="false | true" (5.5)
hidefocus="true | false" (5.5) <pre>
language="javascript | jscript | vbs | vbscript" (4) Within PREFORMATTED text A L L formatting IS PRESERVED
tabindex="number" (5.5) NO m a t t e r how wild it is. Remember that some
wrap="soft | hard | off" (4) <b>HTML</b> markup is allowed within the &lt;PRE&gt; element.
</pre>
HTML 4 Event Attributes
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, Compatibility
onmousemove, onmouseout, onmouseover, onmouseup
HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
HTML5 Event Attributes XHTML 1.0, 1.1, Basic Netscape 1+, Opera 4+, Safari 1+

onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, Notes


oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, • The HTML 4.01 and XHTML 1.0 transitional specifications state that the applet,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, basefont, big, font, img, object, small, sub, and sup elements should not be used
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, within a <pre> tag. The strict HTML and XHTML specifications state that only the
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, <big>, <img>, <object>, <small>, <sub>, and <sup> tags should not be used within
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, the <pre> tag. The other excluded elements are missing, as they are deprecated from
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
the strict specification. Although these elements should not be used, it appears that the
onsuspend, ontimeupdate, onvolumechange, onwaiting
more popular browsers will render them anyway.
Events Defined by Internet Explorer • The strict HTML and XHTML specifications drop support for the width attribute,
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate, which was not well supported anyway.
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu, • The HTML 2.0 and 3.2 specifications support only the width attribute for the pre
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag, element.
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, <progress> (Progress Indicator)
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, This HTML5 element defines completion progress for a task. It is often thought to represent
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, the percentage from 0 to 100% of some task, such as loading to be completed, though the
onresizeend, onresizestart, onselectstart, ontimeerror
range and the unit value are arbitrary.
Element-Specific Attributes HTML5 Standard Syntax
width This attribute should be set to the width of the preformatted region. The value of the <progress
accesskey="spaced list of accelerator key(s)"
attribute should be the number of characters to display. In practice, this attribute is not
class="class name(s)"
supported and is dropped under the strict HTML 4.01 specification. contenteditable="true | false | inherit"
contextmenu="id of menu"
wrap In some versions of Microsoft browsers, this attribute controls word wrap behavior data-X="user-defined data"
within a <pre> tag. The default value of off for the attribute forces the element not to wrap dir="ltr | rtl"
text, so the viewer must manually enter line breaks. A value of hard or soft causes word draggable="true | false | auto"
wrap and sets different types of line breaks in the wrapped text. Given the nature of the pre hidden="hidden"
element, the value of this attribute is limited. id="unique alphanumeric identifier"
itemid="microdata id in URL format"
xml:space This attribute is included from XHTML 1.0 and is used to set whether spaces need itemprop="microdata value"
to be preserved within the element or the default whitespace handling should be employed. itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
Chapter 3: HTML and XHTML Element Reference 351 352 Part I: Core Markup

itemtype="microdata type in URL format" Standard Syntax


lang="language code"
max="positive floating point number" <q
spellcheck="true | false" cite="URL of source"

PART I
style="style information" class="class name(s)"
tabindex="number" dir="ltr | rtl"
title="advisory text" id="unique alphanumeric string"
value="0 or floating point number"> lang="language code"
style="style information"
</progress> title="advisory text">

</q>
HTML5 Event Attributes
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, Attributes Introduced by HTML5
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, accesskey="spaced list of accelerator key(s)"
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, contenteditable="true | false | inherit"
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, contextmenu="id of menu"
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, data-X="user-defined data"
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, draggable="true | false | auto"
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, hidden="hidden"
onsuspend, ontimeupdate, onvolumechange, onwaiting itemid="microdata id in URL format"
itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata"
Element-Specific Attributes itemscope="itemscope"
itemtype="microdata type in URL format"
max The value of this attribute is a positive floating-point number indicating the spellcheck="true | false"
maximum value for progress; often it will be 100. tabindex="number"

value The value of this attribute is the amount of task complete. This may be a percentage, Attributes Defined by Internet Explorer
but there is no requirement that it be such a measurement.
accesskey="key" (5.5)
contenteditable="false | true | inherit" (5.5)
Example disabled="false | true" (5.5)
<p>Progress: <progress id="prog1" max="100.00" value="33.1">33.1</ hidefocus="true | false" (5.5)
progress>%</p> language="javascript | jscript | vbs | vbscript" (4)
<!-- JavaScript would be used to change the value of this element tabindex="number" (5.5)
dynamically -->
HTML 4 Event Attributes
Compatibility onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
HTML5 Not currently supported by any browsers, but could be simulated in modern browsers onmousemove, onmouseout, onmouseover, onmouseup
via a custom element and JavaScript.
HTML5 Event Attributes
Notes onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
• There are no units implied for this element. ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
• This element is not yet implemented in any browser. However, given that most onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
browsers can handle custom elements, it would be easy enough to simulate the idea onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
of it and even apply a CSS display property for it. But, without JavaScript changing onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
value and presentation dynamically, a custom element would have little value.
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting
<q> (Quote)
This element indicates that the enclosed text is a short inline quotation.
Chapter 3: HTML and XHTML Element Reference 353 354 Part I: Core Markup

Events Defined by Internet Explorer HTML5 Standard Syntax


onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate, <rp
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu, accesskey="spaced list of accelerator key(s)"

PART I
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag, class="class name(s)"
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, contenteditable="true | false | inherit"
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup, contextmenu="id of menu"
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, data-X="user-defined data"
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, dir="ltr | rtl"
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, draggable="true | false | auto"
onresizeend, onresizestart, onselectstart, ontimeerror hidden="hidden"
id="unique alphanumeric identifier"
Element-Specific Attribute itemid="microdata id in URL format"
itemprop="microdata value"
cite The value of this attribute is a URL that designates a source document or message for itemref="space-separated list of IDs that may contain microdata"
the information quoted. This attribute is intended to point to information explaining the itemscope="itemscope"
itemtype="microdata type in URL format"
context or the reference for the quote. lang="language code"
spellcheck="true | false"
Example style="style information"
<p>If you want to make a great Web site don't follow this title="advisory text"
advice: <q style="color: red;" cite="http://democompany.com/ugly.html"> tabindex="number">
A few green balls and a rainbow bar will give you an exciting Web page
Christmas Tree!</q></p> </rp>

Compatibility HTML5 Event Attributes


HTML 4, 4.01, 5 Firefox 1+, Internet Explorer 4+, onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
XHTML 1.0, 1.1, Basic Netscape 6+, Opera 4+, Safari 1+ oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
Notes onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
• This element is intended for short quotations that don’t require paragraphs or larger onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
structures, as compared to text that would be contained within <blockquote>. onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
• Some browsers, like Internet Explorer 6, may not make any sort of style change for onsuspend, ontimeupdate, onvolumechange, onwaiting
quotations, but it is possible to apply a style rule to provide some indication of a
change in style.
Example
• Most browsers, including IE 8+, Opera, Safari, and Mozilla-based browsers like <!-- The Kanji for Japanese language with the hiragana above it or
Firefox, will wrap inline quotations in quote marks. These can be controlled by style within parens for non ruby aware browsers -->
rules. Mentions in the HTML5 specification suggest that user agents will not put in <p>
quotation marks and this will be left solely to the developer. This seems a highly <ruby>
dubious possibility. 日本語 <rp>(</rp><rt>にほんご</rt><rp>)</rp>
</ruby>
</p>
<rp> (Ruby Parentheses)
This element is used to define parentheses around a ruby text entry defined by an rt Compatibility
element. This element helps browsers that do not support ruby annotations to keep the
reading hint clear from the text it is associated with. HTML5 XHTML 1.1 Internet Explorer 5+
Chapter 3: HTML and XHTML Element Reference 355 356 Part I: Core Markup

Note contenteditable="false | true | inherit" (5.5)


dir="ltr | rtl" (5)
• Other browsers do not position the ruby text element (rt) but instead move the rt disabled="false | true" (5.5)
content above the text it is associated with; thus, these browsers are not listed as hidefocus="true | false" (5.5)

PART I
supporting rt. The purpose of the rp element is to show the grouping parentheses id="unique alphanumeric identifier" (5)
in such nonsupporting browsers, so in some sense all browsers support this lang="language code" (5)
element. language="javascript | jscript | vbs | vbscript" (5)
name="string" (5)
style="style information" (5)
Ruby No Ruby tabindex="number" (5)
title="advisory text" (5)
unselectable="on | off"> (5)

ruby text
</rt>

HTML5 Event Attributes


<rt> (Ruby Text)
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
This initially Microsoft-specific proprietary element, now part of HTML5 and XHTML 1.1,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
is used within a <ruby> tag to create ruby text, or annotations or pronunciation guides for ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
words and phrases. The base text should be enclosed in a <ruby> tag; the annotation, onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
enclosed in an <rt> tag, will appear as smaller text above the base text. Ruby parentheses onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
should be set with <rp> tags to provide fallback for browsers without ruby support. onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
HTML5 Standard Syntax onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting
<rt
accesskey="spaced list of accelerator key(s)"
class="class name(s)" Events Defined by Internet Explorer
contenteditable="true | false | inherit" onactivate, onafterupdate, onbeforeactivate, onbeforecut, onbeforepaste,
contextmenu="id of menu" oncut, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart,
data-X="user-defined data" ondrop, onfocusin, onfocusout, onhelp, onlosecapture, onmouseenter,
dir="ltr | rtl" onmouseleave, onmousewheel, onpaste, onpropertychange, onreadystatechange,
draggable="true | false | auto" onscroll, onselectstart
hidden="hidden"
id="unique alphanumeric identifier" Example
itemid="microdata id in URL format"
itemprop="microdata value" <!-- The Kanji for Japanese language with the romanji above it or
itemref="space-separated list of IDs that may contain microdata" within parens for non ruby aware browsers -->
itemscope="itemscope" <ruby>
itemtype="microdata type in URL format" 日本語 <rp>(</rp><rt>nihongo</rt><rp>)</rp>
lang="language code" </ruby>
spellcheck="true | false" </p>
style="style information"
title="advisory text"
tabindex="number">

</rt> Note
• The rt element must be used within the ruby element.
Syntax (Defined by Microsoft)
<rt
accesskey="key" (5)
class="class name(s)" (5)
Chapter 3: HTML and XHTML Element Reference 357 358 Part I: Core Markup

Compatibility tabindex="number" (5)


title="advisory text"> (5)
HTML5 XHTML 1.1 Internet Explorer 5+
... base text ...

PART I
<rt>ruby text</rt>
<ruby> (Ruby Annotation)
This initially Microsoft-specific element, now part of HTML5, is used with the rt element to </ruby>
create annotations or pronunciation guides for words and phrases. The base text should be
enclosed in a <ruby> tag; the annotation, enclosed in an <rt> tag, will appear as smaller HTML5 Event Attributes
text above the base text. The rp element can be used to wrap content to delimit ruby text onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
for browsers that do not support this formatting. oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
HTML5 Standard Syntax onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
<ruby onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
accesskey="spaced list of accelerator key(s)" onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
class="class name(s)" onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
contenteditable="true | false | inherit" onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
contextmenu="id of menu" onsuspend, ontimeupdate, onvolumechange, onwaiting
data-X="user-defined data"
dir="ltr | rtl" Events Defined by Internet Explorer
draggable="true | false | auto" onactivate, onafterupdate, onbeforeactivate, onbeforecut, onbeforepaste,
hidden="hidden" oncut, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart,
id="unique alphanumeric identifier" ondrop, onfocusin, onfocusout, onhelp, onlosecapture, onmouseenter,
itemid="microdata id in URL format" onmouseleave, onmousewheel, onpaste, onpropertychange, onreadystatechange,
itemprop="microdata value" onscroll, onselectstart
itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope" Element-Specific Attribute
itemtype="microdata type in URL format"
lang="language code"
name This attribute sets a name for the ruby base text.
spellcheck="true | false"
style="style information"
tabindex="number"
Examples
title="advisory text"> <p>
... base text ... <ruby>This is the base text within the ruby element
<rt>ruby text</rt> <rt>This is the ruby text, which should appear in a smaller font
</ruby> above the base text in Internet Explorer 5.0 or higher.</rt>
</ruby>
Syntax Defined by Microsoft </p>
<ruby <p>
accesskey="key" (5) <ruby>
class="class name(s)" (5) 日本語 <rp>(</rp><rt>にほんご</rt><rp>)</rp>
contenteditable="false | true | inherit" (5.5) </ruby>
dir="ltr | rtl" (5) </p>
disabled="false | true" (5.5)
hidefocus="true | false" (5.5) <p>
id="unique alphanumeric identifier" (5) <ruby>
lang="language code" (5) Japanese<rp>(</rp><rt>Don't speak it</rt><rp>)</rp>
language="javascript | jscript | vbs | vbscript" (5) </ruby>
name="string" (5) </p>
style="style information" (5)
Chapter 3: HTML and XHTML Element Reference 359 360 Part I: Core Markup

HTML 4 Event Attributes


onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup

PART I
Events Defined by Internet Explorer
onactivate, onbeforedeactivate, onbeforeeditfocus, onblur, onclick,
oncontrolselect, ondblclick, ondeactivate, ondrag, ondragend, ondragenter,
ondragleave, ondragover, ondragstart, ondrop, onfocus, onkeydown,
onkeypress, onkeyup, onhelp, onmousedown, onmouseenter, onmouseleave,
onmousemove, onmouseout, onmouseover, onmouseup, onmove, onmoveend,
onmovestart, onreadystatechange, onresizeend, onresizestart, onselectstart,
ontimeerror

Examples
<p>This line contains a <s>misstake</s>!</p>
Compatibility
<p>strike <s>1</s>...<strike>2</strike>...<s>3</s>...<strong>You're out!</
HTML5 XHTML 1.1 Internet Explorer 5+ strong></p>

Notes Compatibility
• This element was introduced in Internet Explorer 5.0 and is now part of the HTML5
specification. HTML 4, 4.01 transitional Firefox 1+, Internet Explorer 2+,
XHTML 1.0 transitional Netscape 3+, Opera 4+, Safari 1+
• The ruby element must be used in conjunction with the rt element; otherwise, it
will have no meaning. Notes
• This element should act the same as the strike element.
<s> (Strikethrough)
• This HTML 3 element eventually was adopted by Netscape and Microsoft and later
This element renders the enclosed text with a line drawn through it and is a synonym for
was incorporated into the HTML 4.01 transitional specification.
the strike element.
• This element has been deprecated by the W3C. The strict HTML 4.01 specification
Standard Syntax (Transitional Only) does not include the s element or the strike element, and the HTML5 specification
<s indicates it is obsolete as well.
class="class name(s)" • It is possible to indicate strikethrough text using a style sheet with the
dir="ltr | rtl" text-decoration property set to line-through.
id="unique alphanumeric identifier"
lang="language code"
style="style information" <samp> (Sample Text)
title="advisory text"> This logical inline element is used to indicate sample text. Enclosed text generally is
rendered in a monospaced font.
</s>
Standard Syntax
Attributes Defined by Internet Explorer
<samp
accesskey="key" (5.5) class="class name(s)"
contenteditable="false | true | inherit" (5.5) dir="ltr | rtl"
disabled="false | true" (5.5) id="unique alphanumeric string"
hidefocus="true | false" (5.5) lang="language code"
language="javascript | jscript | vbs | vbscript" (4) style="style information"
tabindex="number" (5.5) title="advisory text">
unselectable="off | on" (5.5)
</samp>
Chapter 3: HTML and XHTML Element Reference 361 362 Part I: Core Markup

Attributes Introduced by HTML5 Compatibility


accesskey="spaced list of accelerator key(s)"
HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
data-X="user-defined data"

PART I
contenteditable="true | false | inherit" XHTML 1.0, 1.1, Basic Netscape 1+, Opera 4+, Safari 1+
contextmenu="id of menu"
draggable="true | false | auto" Notes
hidden="hidden" • As a logical element, samp is useful to bind style rules to.
itemid="microdata id in URL format"
itemprop="microdata value" • The HTML 2.0 and 3.2 specifications support no attributes for this element.
itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope" <script> (Scripting)
itemtype="microdata type in URL format" This element encloses statements in a scripting language for client-side processing. Scripting
spellcheck="true | false"
tabindex="number"
statements can either be included inline or loaded from an external file and might be
commented out to avoid execution by browsers that are not scripting-aware.
Attributes Defined by Internet Explorer
Standard Syntax
accesskey="key" (5.5)
<script
contenteditable="false | true | inherit" (5.5)
charset="character set"
disabled="false | true" (5.5)
defer="defer"
hidefocus="true | false" (5.5)
id="unique alphanumeric identifier"
language="javascript | jscript | vbs | vbscript" (4)
language="scripting language name"
tabindex="number" (5.5)
src="URL of script code"
unselectable="off | on" (5.5)
type="mime type"
xml:space="preserve">
HTML 4 Event Attributes
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, </script>
onmousemove, onmouseout, onmouseover, onmouseup
Attributes Introduced by HTML5
HTML5 Event Attributes accesskey="spaced list of accelerator key(s)"
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, async="async"
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, class="class name(s)"
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, data-X="user-defined data"
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, contenteditable="true | false | inherit"
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, contextmenu="id of menu"
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, dir="ltr | rtl"
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, draggable="true | false | auto"
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, hidden="hidden"
onsuspend, ontimeupdate, onvolumechange, onwaiting itemid="microdata id in URL format"
itemprop="microdata value"
Events Defined by Internet Explorer itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
onactivate, onbeforedeactivate, onbeforeeditfocus, onblur, onclick, itemtype="microdata type in URL format"
oncontrolselect, ondblclick, ondeactivate, ondrag, ondragend, ondragenter, lang="language code"
ondragleave, ondragover, ondragstart, ondrop, onfocus, onkeydown, spellcheck="true | false"
onkeypress, onkeyup, onhelp, onmousedown, onmouseenter, onmouseleave, style="style information"
onmousemove, onmouseout, onmouseover, onmouseup, onmove, onmoveend, tabindex="number"
onmovestart, onreadystatechange, onresizeend, onresizestart, onselectstart, title="advisory text"
ontimeerror
Attributes Defined by Internet Explorer
Example
event="event name" (3)
<p>Use the following salutation in all e-mail messages to the boss: for="element id" (3)
<samp>Please excuse the interruption, oh exalted manager.</samp></p> lang="language to use"
Chapter 3: HTML and XHTML Element Reference 363 364 Part I: Core Markup

Events Defined by HTML5 type This attribute should be set to the MIME type corresponding to the scripting language
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, used. For JavaScript, for example, this would be text/javascript. In practice, the
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, language attribute is more commonly used, but the type attribute is standard. When not

PART I
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, specified, the default value is text/javascript. There is indication that it should actually
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, be application/javascript, but given that browser support for this value is not
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, consistent it is dangerous to use. Also, it is possible to indicate version information in the
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, type attribute for certain browsers; for example, to indicate JavaScript 1.8 you would use
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
<script type="application/javascript;version=1.8">.
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting xml:space This attribute is included from XHTML 1.0 and is used to set whether spaces
need to be preserved within the script element or the default whitespace handling should
Events Defined by Internet Explorer be employed. In practice, this attribute is not often used by developers.
onload, onpropertychange, onreadystatechange
Examples
Element-Specific Attributes <script type="text/javascript">
alert("Hello World !!!");
async Presence of this HTML5 attribute indicates that the browser might perform the fetch </script>
or execution of the script to be asynchronously from other activity in the page. The meaning
of this attribute versus the defer attribute with remote scripts in particular is quite unclear. <!-- code in external file -->
<script language="JavaScript1.2" src="superlib.js"></script>
charset This attribute defines the character encoding of the script. The value is a space- and/
or comma-delimited list of character sets as defined in RFC 2045. Compatibility

defer Presence of this attribute indicates that the browser might defer execution of the HTML 4, 4.01, 5 Firefox 1+, Internet Explorer 3+,
script enclosed by the <script> tag. Support for this attribute is inconsistent, though it is XHTML 1.0, 1.1 Netscape 2+, Opera 4+, Safari 1+
now part of the HTML5 specification.
Notes
event This Microsoft-specific attribute is used to define a particular event that the script • It is common practice to comment out statements enclosed by a <script> tag.
should react to. It must be used in conjunction with the for attribute. Event names are the Without commenting, script code can be displayed as page content by user agents
same as event handler attributes; for example, onclick, ondblclick, and so on. that do not support scripting. The particular comment style might be dependent on
the language being used. For example, in JavaScript, use
for The for attribute is used in Microsoft browsers to define the name or id of the element
to which an event defined by the event attribute is related. For example, <script <script type="text/javascript">
<!--
event="onclick" for="button1" language="vbscript"> defines a VBScript that will
JavaScript code here
execute when a click event is issued for an element named button1. // -->
</script>
language This common though nonstandard attribute specifies the scripting language being
used. The Netscape implementation supports JavaScript. The Microsoft implementation In VBScript, use
supports JScript (a JavaScript clone) as well as VBScript, which can be indicated by either <script type="text/vbscript">
vbs or vbscript. Other values that include the version of the language used, such as <!--
JavaScript1.1 and JavaScript1.2, also might be possible and are useful to exclude VBScript code here
browsers from executing script code that is not supported. The HTML5 specification -->
indicates that while this attribute may be widely supported it should not be used by page </script>
authors. XML escapes using CDATA sections are also possible; however, in all cases it is better
src This attribute specifies the URL of a file containing scripting code. Typically, files to avoid intermixing script code in a markup document and instead to link to it.
containing JavaScript code will have a .js extension, and a server will attach the appropriate • The HTML 3.2 specification defined a placeholder script element.
MIME type; if not, the type attribute might be used to explicitly set the content type of the • The event and for attributes are defined under transitional versions of HTML 4.01
external script file. The language attribute also might be helpful in determining this. but only as reserved values. Later specifications appear to have dropped potential
support for them, though they continue to be supported by Internet Explorer.
Chapter 3: HTML and XHTML Element Reference 365 366 Part I: Core Markup

• Most browsers assume JavaScript when parsing a script element without a set type Element-Specific Attribute
or language attribute.
• Refer to the <noscript> tag reference in this reference to see how content might be Examples

PART I
identified for browsers that are not scripting-aware. <section id="section1">
<p>First paragraph.</p>
• HTML5 currently specifies all common attributes for a <script> tag, such as <p>Second paragraph</p>
accesskey, spellcheck, and so on, but most of these make little if no sense in the </section>
context of this element.
<!-- section example #2 -->
<section id="section2">
<section> (Section) <header><h1>Section Heading</h1></header>
This HTML5 element defines a generic section of a document and it may contain a heading <p>First paragraph.</p>
and footer of its own. <p>Second paragraph.</p>
<footer><p>&copy; 2010 Fake Examples, Inc.</p></header>
HTML5 Standard Syntax </section>
<section
<!-- nested section example #3 -->
accesskey="spaced list of accelerator key(s)"
<section>
cite="URL of original content source"
<h1>Section Heading</h1>
class="class name(s)"
<section>
contenteditable="true | false | inherit"
<h2>Next Section Heading</h2>
contextmenu="id of menu"
</section>
data-X="user-defined data"
</section>
dir="ltr | rtl"
draggable="true | false | auto"
hidden="hidden" Compatibility
id="unique alphanumeric identifier"
itemid="microdata id in URL format" HTML5 Not currently supported by any browser, but can be addressed with a custom element.
itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata" Notes
itemscope="itemscope" • The section element is included in HTML5’s document outlining process.
itemtype="microdata type in URL format"
lang="language code" • This element is not yet implemented in any browser. However, given that most
spellcheck="true | false" browsers can handle custom elements, it would be easy enough to simulate the idea
style="style information" of it and even apply a CSS display property for it.
tabindex="number"
title="advisory text">
<select> (Selection List)
</section> This element defines a selection list within a form. Depending on the form of the selection
list, the control allows the user to select one or more list options.
HTML5 Event Attributes
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
Standard Syntax
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, <select
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, class="class name(s)"
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, dir="ltr | rtl"
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, disabled="disabled"
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, id="unique alphanumeric identifier"
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, lang="language code"
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, multiple="multiple"
onsuspend, ontimeupdate, onvolumechange, onwaiting name="unique alphanumeric name"
size="number"
Chapter 3: HTML and XHTML Element Reference 367 368 Part I: Core Markup

style="style information" Events Defined by Internet Explorer


tabindex="number"
title="advisory text"> onactivate, onafterupdate, onbeforeactivate, onbeforecut, onbeforedeactivate,
onbeforeeditfocus, onbeforepaste, onbeforeupdate, onblur, onchange,

PART I
option and optgroup elements only onclick, oncontextmenu, oncontrolselect, oncut, ondblclick, ondeactivate,
ondragenter, ondragleave, ondragover, ondrop, onerrorupdate, onfocus,
</select> onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup, onlosecapture,
onmousedown, onmouseenter, onmouseleave, onmouseover, onmouseout, onmouseup,
onmousewheel, onmove, onmoveend, onmovestart, onpaste, onpropertychange,
Attributes Introduced by HTML5 onreadystatechange, onresize, onresizeend, onresizestart, onselectstart
accesskey="character"
autofocus="autofocus" Element-Specific Attributes
contenteditable="true | false | inherit"
contextmenu="id of menu" align This Microsoft-specific attribute controls the alignment of the image with respect to
data-X="user-defined data" the content on the page. The default value is left, but other values such as absbottom,
draggable="true | false | auto"
absmiddle, baseline, bottom, middle, right, texttop, and top also might be
form="id of related form"
hidden="hidden" supported. The meaning of these values should be similar to those used for inserted objects,
itemid="microdata id in URL format" such as images.
itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata" autofocus This HTML5 Boolean attribute is used to indicate that the user agent should
itemscope="itemscope" immediately focus this form item once its containing window object (usually the document)
itemtype="microdata type in URL format" is made active. It only takes an attribute value of autofocus when using the XML-style
spellcheck="true | false" syntax for HTML5.

Attributes Defined by Internet Explorer disabled This attribute is used to turn off a form control. Elements will not be submitted,
accesskey="character" (4) nor can they receive any focus from the keyboard or mouse. Disabled form controls will not
align="absbottom | absmiddle | baseline | bottom | be part of the tabbing order. The browser also can gray out the form that is disabled, to
left | middle | right | texttop | top" (4) indicate to the user that the form control is inactive. This attribute requires no value under
datafld="column name" (4) traditional HTML, but under XHTML variants it should be set to disabled.
datasrc="data source id" (4)
hidefocus="true | false" (5.5) form This HTML5 attribute should be set to a string that corresponds to the id of the form
language="javascript | jscript | vbs | vbscript" (4)
element that the button is associated with. This allows form elements in one form to trigger
unselectable="on | off" (5.5)
actions in others.
HTML 4 Event Attributes multiple This attribute allows the selection of multiple items in the selection list. The
onblur, onchange, onclick, ondblclick, onkeydown, onkeypress, onkeyup, default is single-item selection. Under XHTML, this attribute must have its value set to
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup multiple.

HTML5 Event Attributes name This attribute allows a form control to be assigned a name for defining the name/
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, value pair used in form submission. Traditionally, these values were used by scripting
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, languages as well, though the standards encourage the use of the id attribute. For
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, compatibility purposes, both might have to be used.
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, size This attribute sets the number of visible items in the selection list. When the multiple
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, attribute is not present, only one entry should show; however, when multiple is present,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
this attribute is useful for setting the size of the scrolling list box.
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting
tabindex This attribute takes a numeric value indicating the position of the form control
in the tabbing index for the form. Tabbing proceeds from the lowest positive tabindex
value to the highest. Negative values for tabindex will leave the form control out of the
Chapter 3: HTML and XHTML Element Reference 369 370 Part I: Core Markup

tabbing order. When tabbing is not explicitly set, the browser might tab through items in id="unique alphanumeric string"
the order they are encountered. Form controls that are disabled due to the presence of the lang="language code"
disabled attribute will not be part of the tabbing index. style="style information"
title="advisory text">

PART I
Examples </small>
<form action="#" method="get">
<p><label>Choose your favorite colors:</label> Attributes Introduced by HTML5
<select name="colors" multiple="multiple" size="2">
<option>Red</option> accesskey="spaced list of accelerator key(s)"
<option>Blue</option> data-X="user-defined data"
<option>Green</option> contenteditable="true | false | inherit"
<option>Yellow</option> contextmenu="id of menu"
</select> draggable="true | false | auto"
</p> hidden="hidden"
itemid="microdata id in URL format"
<label>Taco Choices:</label> itemprop="microdata value"
<select name="tacomenu" id="tacomenu"> itemref="space-separated list of IDs that may contain microdata"
<option value="SuperChicken">Chicken</option> itemscope="itemscope"
<option value="Baja">Fish</option> itemtype="microdata type in URL format"
<option value="TastyPig">Carnitas</option> spellcheck="true | false"
</select> tabindex="number"
</p>
</form> Attributes Defined by Internet Explorer
accesskey="key" (5.5)
Compatibility contenteditable="false | true | inherit" (5.5)
hidefocus="true | false" (5.5)
HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+, language="javascript | jscript | vbs | vbscript" (4)
XHTML 1.0, 1.1, Basic Netscape 1+, Opera 4+, Safari 1+ tabindex="number" (5.5)
unselectable="on | off"
Notes
• The HTML 4.01 specification reserves the attributes datafld and datasrc for Standard Event Attributes
future use, but these are removed under XHTML. onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup
• Internet Explorer’s variant of the disabled attribute allows values of true and
false, as well as the standard disabled value.
HTML5 Event Attributes
• Under traditional HTML, the end tag </option> is often omitted. onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
• Be careful of the name and id attribute problem that may occur, particularly when oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
setting the multiple attribute. It may be better to have separate values. ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
• The HTML 2.0 and 3.2 specifications define only multiple, name, and size onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
attributes. onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
<small> (Small Text) onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting
This inline element renders the enclosed text one font size smaller than a document’s base
font size, unless it is already set to the smallest size. Events Defined by Internet Explorer
Standard Syntax onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
<small oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
class="class name(s)" ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
dir="ltr | rtl"
Chapter 3: HTML and XHTML Element Reference 371 372 Part I: Core Markup

onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup, itemtype="microdata type in URL format"
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, lang="language code"
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, media="media type"
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, spellcheck="true | false"

PART I
onresizeend, onresizestart, onselectstart, ontimeerror src="URL of media resource"
style="style information"
Examples tabindex="number"
title="advisory text"
<p>Here is some <small>small text</small>.</p> type="MIME type of linked media">
<p>This element can be applied <small><small><small>multiple
times</small></small></small>to make things even smaller.</p> HTML5 Event Attributes
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
Compatibility oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
HTML 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+, onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
XHTML 1.0, 1.1 Netscape 2+, Opera 4+, Safari 1+ onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
Notes onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
• This element is equivalent to using font-size: smaller. onsuspend, ontimeupdate, onvolumechange, onwaiting
• A <small> tag can be used multiple times to decrease the size of text to a greater
degree. Using more than six <small> tags together doesn’t make sense because Element-Specific Attributes
browsers currently only support relative font sizes from 1 to 7 or, in CSS, from
media This attribute defines the intended media type of the linked media source, to
xx-small to xx-large.
provide a hint to a user agent as to whether the media referenced is appropriate or how it
• With style sheets, it would seem this element should be inappropriate, similar to might be used. It is similar to the idea of a media attribute in a style sheet specifying print,
other obsolete or deprecated elements, including big, which is marked obsolete screen, projection, or other common values.
under HTML5. However, currently it is included in the specification and is defined
to indicate side comments or small print text, as in legal information. src This attribute is set to the URL of the media source to link to.

type This attribute is set to the MIME type of the linked media file specified by the src
<source> (Source) attribute. Often it also includes a codecs value to indicate how a media resource is
This empty HTML5 element is used to specify multiple media resources for media elements
encoded. However, the use of codecs, as alluded to in Chapter 2, is a bit of a mess under
like audio and video.
HTML5 so page authors are urged to test carefully.
HTML5 Standard Syntax Examples
<source
<!-- Multiple sources to try -->
accesskey="spaced list of accelerator key(s)"
<audio>
class="class name(s)"
<source src="angus.ogg">
contenteditable="true | false | inherit"
<source src="angus.mp4" type="audio/mp4">
contextmenu="id of menu"
</audio>
data-X="user-defined data"
dir="ltr | rtl"
<!-- XHTML style -->
draggable="true | false | auto"
<video>
height="pixels"
<source src="angus.mp4" type="video/mp4; codecs='avc1.58A01E, mp4a.40.2'" />
hidden="hidden"
</video>
id="unique alphanumeric identifier"
itemid="microdata id in URL format"
itemprop="microdata value" Compatibility
itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope" HTML5 Firefox 3.5+, Safari 3.1+
Chapter 3: HTML and XHTML Element Reference 373 374 Part I: Core Markup

Notes lines.<spacer align="left" type="block" height="100" width="100"> This


is a bunch of text that flows around an invisible block region. You
• As an empty element, source should be written under XHTML5 with a self- could have easily performed this layout with a table.
identifying close tag like so <source />.

PART I
• Browsers should use multiple source elements in a fall-through fashion finding the Compatibility
first appropriate version for playback. Page authors should consider putting in an
No standards support Netscape 3, 4, 4.5–4.8
appropriate number of media variations to account for browser differences.
Note
<spacer> (Extra Space) • This element should not be used, because even newer versions of the Netscape
This older, Netscape-proprietary element specifies an invisible region, which is useful for browser (6 and 7) have dropped support for this element. It is presented for
page layout. historical reasons and will be dropped from the reference in the next edition of this
book.
Proprietary Syntax (Netscape 3 and 4 Only)
<spacer
align="absmiddle | absbottom | baseline | bottom | <span> (Text Span)
left | middle | right | texttop | top" This inline element is used to group content so scripting or style rules can be applied to the
height="pixels" enclosed content. As it has no preset or rendering meaning, this is the most useful inline
size="pixels" element for associating style and script with content.
type="block | horizontal | vertical"
width="pixels"> Syntax
<span
Element-Specific Attributes class="class name(s)"
dir="ltr | rtl"
align This attribute specifies the alignment of the spacer with respect to surrounding text. id="unique alphanumeric string"
It is used only with spacers with type="block". The default value for the align attribute lang="language code"
is bottom. The meanings of the align values are similar to those of the align values used style="style information"
with the img element. title="advisory text">

height This attribute specifies the height of the invisible region, in pixels. It is used only </span>
with spacers with type="block".
Attributes Introduced by HTML5
size Used with type="block" and type="horizontal" spacers, this attribute sets the accesskey="spaced list of accelerator key(s)"
spacer’s width, in pixels. Used with a type="vertical" spacer, this attribute is used to set contenteditable="true | false | inherit"
the spacer’s height. contextmenu="id of menu"
data-X="user-defined data"
type This attribute indicates the type of invisible region. A horizontal spacer adds draggable="true | false | auto"
horizontal space between words and objects. A vertical spacer adds space between lines. hidden="hidden"
A block spacer defines a general-purpose positioning rectangle, like an invisible image that itemid="microdata id in URL format"
text can flow around. itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata"
width This attribute is used only with the type="block" spacer and is used to set the itemscope="itemscope"
itemtype="microdata type in URL format"
width of the region, in pixels.
spellcheck="true | false"
tabindex="number"
Example
A line of text with two <spacer type="horizontal" size="20">words Attributes Defined by Internet Explorer
separated by 20 pixels. Here is a line of text.<br>
<spacer type="vertical" size="50"> accesskey="key" (5.5)
Here is another line of text with a large space between the two contenteditable="false | true | inherit" (5.5)
Chapter 3: HTML and XHTML Element Reference 375 376 Part I: Core Markup

datafld="column name" (4) Notes


dataformatas="html | text" (4)
datasrc="data source id" (4) • The HTML 4.01 specification reserved the datafld, dataformatas, and datasrc
hidefocus="true | false" (5.5) attributes for future use. They were later dropped from XHTML. Internet Explorer 4

PART I
language="javascript | jscript | vbs | vbscript" (4) and later continue to support these attributes for data binding.
tabindex="number" (5.5)
• As a generic element, span, like div, is useful for binding style to arbitrary
unselectable="on | off" (5.5)
content. However, span is an inline element and does not cause a return by
Standard Event Attributes default as div does.
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup <strike> (Strikeout Text)
This inline element is used to indicate strikethrough text, namely text with a line drawn
HTML5 Event Attributes through it. The s element provides shorthand notation for this element. Both are deprecated
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, under strict markup variants and obsolete under HTML5.
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, Syntax (Transitional Only)
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, <strike
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, class="class name(s)"
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, dir="ltr | rtl"
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, id="unique alphanumeric string"
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, lang="language code"
onsuspend, ontimeupdate, onvolumechange, onwaiting style="style information"
title="advisory text">
Events Defined by Internet Explorer
</strike>
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag, Attributes Defined by Internet Explorer
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, accesskey="key" (5.5)
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup, contenteditable="false | true | inherit" (5.5)
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, disabled="false | true" (5.5)
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, hidefocus="true | false" (5.5)
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, language="javascript | jscript | vbs | vbscript" (4)
onresizeend, onresizestart, onselectstart, ontimeerror tabindex="number" (5.5)
unselectable="on | off" (5.5)
Examples
<p>Here is some <span style="font-size: 14px; color: purple;">very HTML 4 Event Attributes
strange</span> text.</p> onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup
<p><span id="toggletext"
onclick="this.style.color='red';" Events Defined by Internet Explorer
ondblclick="this.style.color='black';">
Click and Double Click Me onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
</span></p> onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
Compatibility
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
HTML 4, 4.01, 5 Firefox 1+, Internet Explorer 3+, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
XHTML 1.0, 1.1, Basic Netscape 4+, Opera 4+, Safari 1+
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,
onresizeend, onresizestart, onselectstart, ontimeerror
Chapter 3: HTML and XHTML Element Reference 377 378 Part I: Core Markup

Examples Attributes Defined by Internet Explorer


<p>This line contains a spelling <strike>misstake</strike> mistake</p>. accesskey="key" (5.5)
contenteditable="false | true | inherit" (5.5)

PART I
<p>Price: $<strike style="color: red;">5.00</strike>3.00</p> disabled="false | true" (5.5)
hidefocus="true | false" (5.5)
Compatibility language="javascript | jscript | vbs | vbscript" (4)
tabindex="number" (5.5)
HTML 3.2, 4, 4.01 (transitional) Firefox 1+, Internet Explorer 2+, unselectable="on | off" (5.5)
XHTML 1.0 (transitional) Netscape 3+, Opera 4+, Safari 1+
HTML 4 Event Attributes
Notes onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
• This tag should act the same as the <s> tag. onmousemove, onmouseout, onmouseover, onmouseup

• This element has been deprecated by the W3C. The strict HTML and XHTML HTML5 Event Attributes
specifications include neither the <strike> tag nor the <s> tag because it is possible
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
to indicate strikethrough text using the style sheet property text-decoration:
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
line-through. The HTML5 specification also indicates this element as obsolete. ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
<strong> (Strong Emphasis) onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
This inline element indicates strongly emphasized text. It usually is rendered in a bold onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
typeface, but its rendering is not guaranteed because it is a logical element. onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting
Syntax
<strong Events Defined by Internet Explorer
class="class name(s)"
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
dir="ltr | rtl"
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
id="unique alphanumeric string"
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
lang="language code"
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
style="style information"
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
title="advisory text">
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
</strong>
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,
onresizeend, onresizestart, onselectstart, ontimeerror
Attributes Introduced by HTML5
accesskey="spaced list of accelerator key(s)" Examples
contenteditable="true | false | inherit"
<p>It is really <strong>important</strong> to pay attention.</p>
contextmenu="id of menu"
data-X="user-defined data"
<p>This is an <strong style="font-size: 4em; color: red;">emergency!
draggable="true | false | auto"
</strong></p>
hidden="hidden"
itemid="microdata id in URL format"
itemprop="microdata value" Compatibility
itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope" HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
itemtype="microdata type in URL format" XHTML 1.0, 1.1, Basic Netscape 1+, Opera 2.1+, Safari 1+
tabindex="number"
spellcheck="true | false" Notes
• This element generally renders as bold text. As a logical element, however, strong
is useful to bind style rules to.
Chapter 3: HTML and XHTML Element Reference 379 380 Part I: Core Markup

• As compared to b, this element does have some logical meaning. For example, voice ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
browsers may speak <strong>-enclosed text in a different voice than is used for onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
text that is enclosed by <b>, though practically such distinction may not hold given onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,

PART I
the need of voice browsers to act reasonably with pages not coded for them.
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
<style> (Style Information) onsuspend, ontimeupdate, onvolumechange, onwaiting
This element is used to surround style sheet rules for a document. This element should be
found only in the head element, though it appears HTML5 may loosen this restriction. Style Events Introduced by Internet Explorer
rules directly found within a document’s body generally should be set with the core style onerror, onreadystatechange
attribute for the particular element of interest.
Element-Specific Attributes
Syntax
<style disabled This initially Microsoft-defined attribute is used to disable a style sheet. The
dir="ltr | rtl" presence of the attribute is all that is required to disable the style sheet. In conjunction with
id="unique alphanumeric string" scripting, this attribute could be used to turn on and off various style sheets in a document.
lang="language code" While not documented in later versions of Internet Explorer, this attribute is very much
media="all | print | screen | others" supported and used, since it is part of the DOM standard. Internet Explorer may also
title="advisory text" support values of true and false.
type="MIME Type"
xml:space="preserve"> media This attribute specifies the destination medium for the style information. The value
of the attribute can be a single media descriptor, such as screen, or a comma-separated list.
CSS rules
Possible values for this attribute include all, aural, braille, print, projection,
</style> screen, and tv. Other values also might be defined, depending on the browser. Internet
Explorer supports all, print, and screen as values for this attribute.
Common Attributes
scoped This HTML5 Boolean attribute is used to indicate if the style sheet should be scoped;
disabled="disabled" (DOM Level 1)
in other words, apply only the tree it is enclosed within. For example, here we see a <style>
tag found within a <noscript> tag.
Attributes Introduced by HTML5
accesskey="spaced list of accelerator key(s)" <noscript>
contenteditable="true | false | inherit" <style type="text/css" scoped>
class="class name(s)" h1 {color: red;}
contextmenu="id of menu" </style>
data-X="user-defined data" <h1>Error: scripting required</h1>
draggable="true | false | auto" </noscript>
hidden="hidden"
itemid="microdata id in URL format" With the scoped attribute present, the styling rules should be restricted solely to the
itemprop="microdata value" elements within the <noscript> tag; thus, other h1 elements would not be colored red.
itemref="space-separated list of IDs that may contain microdata" Given the lack of implementations and some specification unclarity, page authors should
itemscope="itemscope"
approach this attribute cautiously.
itemtype="microdata type in URL format"
scoped="scoped"
spellcheck="true | false"
type This attribute is used to define the type of style sheet. The value of the attribute
style="CSS rules" should be the MIME type of the style sheet language used. The most common current value
tabindex="number" for this attribute is text/css, which indicates a CSS format.

HTML5 Event Attributes xml:space This attribute is included from XHTML 1.0 and is used to specify whether
spaces need to be preserved within the script element or the default whitespace handling
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
should be employed.
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
Chapter 3: HTML and XHTML Element Reference 381 382 Part I: Core Markup

Example Syntax
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ <sub
html4/strict.dtd"> class="class name(s)"

PART I
<html> dir="ltr | rtl"
<head> id="unique alphanumeric string"
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> lang="language code"
<title>Simple Style Element Example</title> style="style information"
<style type="text/css"> title="advisory text">
body {background: black; color: white;
font: 12px Helvetica;} </sub>
h1 {color: red; font: 14px Impact;}
</style> Attributes Introduced by HTML5
</head>
<body> accesskey="spaced list of accelerator key(s)"
<h1>A 14-pixel red Impact heading on a black contenteditable="true | false | inherit"
background</h1> contextmenu="id of menu"
<p>Regular body text, which is 12 pixel white Helvetica.</p> data-X="user-defined data"
</body> draggable="true | false | auto"
</html> hidden="hidden"
itemid="microdata id in URL format"
itemprop="microdata value"
Compatibility itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
HTML 4, 4.01, 5 Firefox 1+, Internet Explorer 3+,
itemtype="microdata type in URL format"
XHTML 1.0, 1.1 Netscape 4+, Opera 4+, Safari 1+ spellcheck="true | false"
tabindex="number"
Notes
• Style information also can be specified in external style sheets as defined by a Attributes Defined by Internet Explorer
<link> tag. accesskey="key" (5.5)
• Style information can also be associated with a particular element using the style contenteditable="false | true | inherit" (5.5)
disabled="false | true" (5.5)
attribute.
hidefocus="true | false" (5.5)
• Style rules are often comment masked within a <style> tag to avoid interpretation language="javascript | jscript | vbs | vbscript" (4)
by nonconforming browsers. tabindex="number" (5.5)
unselectable="on | off" (5.5)
<style type="text/css">
<!--
body {background-color: red;}
HTML 4 Event Attributes
--> onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
</style> onmousemove, onmouseout, onmouseover, onmouseup

• Internet Explorer’s conditional comments also are useful to address browser HTML5 Event Attributes
concerns. See the section “<!-- .[ ].. --> (Conditional Comment)” toward the start of
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
the reference. oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
• The meaning of some HTML5 global attributes like accesskey, contextmenu, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
spellcheck, and style in particular are quite unclear for this element and may be onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
erroneous. onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
<sub> (Subscript) onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
This element renders its content as subscripted text. onsuspend, ontimeupdate, onvolumechange, onwaiting
Chapter 3: HTML and XHTML Element Reference 383 384 Part I: Core Markup

Events Defined by Internet Explorer itemprop="microdata value"


itemref="space-separated list of IDs that may contain microdata"
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate, itemscope="itemscope"
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu, itemtype="microdata type in URL format"

PART I
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag, spellcheck="true | false"
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, tabindex="number"
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, Attributes Defined by Internet Explorer
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, accesskey="key" (5.5)
onresizeend, onresizestart, onselectstart, ontimeerror contenteditable="false | true | inherit" (5.5)
hidefocus="true | false" (5.5)
Examples language="javascript | jscript | vbs | vbscript" (4)
tabindex="number" (5.5)
<p>Here is some <sub>subscripted</sub> text.</p> unselectable="on | off" (5.5)
<p>The secret value of the formula is X<sub><small>2</small></sub>.</p>
HTML 4 Event Attributes
Compatibility onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup
HTML 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 3+,
XHTML 1.0, 1.1, Basic Netscape 2+, Opera 4+, Safari 1+ HTML5 Event Attributes
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
Notes oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
• The HTML 3.2 specification supports no attribute for the sub element. ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
• The CSS property vertical-align can be used to simulate this element. onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
• Most browsers may slightly shift text lines below a <sub> tag. onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
<sup> (Superscript) onsuspend, ontimeupdate, onvolumechange, onwaiting
This element renders its content as superscripted text.
Events Defined by Internet Explorer
Syntax onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
<sup onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
class="class name(s)" oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
dir="ltr | rtl" ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
id="unique alphanumeric string" onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
lang="language code" onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
style="style information" onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
title="advisory text"> onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,
onresizeend, onresizestart, onselectstart, ontimeerror
</sup>
Examples
Attributes Introduced by HTML5 <p>Here is some <sup>superscripted</sup> text.</p>
accesskey="spaced list of accelerator key(s)"
contenteditable="true | false | inherit" <p><var>x</var><sup>2</sup> = 4 when <var>x</var> = 2</p>
contextmenu="id of menu"
data-X="user-defined data" Compatibility
draggable="true | false | auto"
hidden="hidden" HTML 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
itemid="microdata id in URL format" XHTML 1.0, 1.1, Basic Netscape 2+, Opera 4+, Safari 1+
Chapter 3: HTML and XHTML Element Reference 385 386 Part I: Core Markup

Notes itemref="space-separated list of IDs that may contain microdata"


itemscope="itemscope"
• The HTML 3.2 specification supports no attribute for the sup element. itemtype="microdata type in URL format"
• This element can be simulated using the CSS property vertical-align. spellcheck="true | false"

PART I
tabindex="number"
• Most browsers may slightly shift text lines above a <sup> tag.
Attributes Defined by Internet Explorer
<table> (Table) accesskey="key" (5.5)
This element is used to define a table. Tables should be used to organize data. However, bordercolordark="color name | #RRGGBB" (4)
they are often used to provide structure for laying out pages in the absence of CSS. bordercolorlight="color name | #RRGGBB" (4)
datapagesize="number of records to display" (4)
Standard Syntax datasrc="data source id" (4)
hidefocus="true | false" (5.5)
<table language="javascript | jscript | vbs | vbscript" (4)
align="center | left | right" (transitional only) tabindex="number" (5.5)
bgcolor="color name | #RRGGBB" (transitional only) unselectable="on | off" (5.5)
border="pixels"
cellpadding="pixels"
cellspacing="pixels" HTML 4 Event Attributes
class="class name(s)" onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
dir="ltr | rtl" onmousemove, onmouseout, onmouseover, onmouseup
frame="above | below | border | box | hsides |
lhs | rhs | void | vsides" HTML5 Event Attributes
id="unique alphanumeric identifier"
lang="language code" onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
rules="all | cols | groups | none | rows" oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
style="style information" ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
summary="summary information" onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
title="advisory text" onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
width="percentage | pixels"> onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
caption, col, colgroup, thead, tbody, tfoot, and tr elements only onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting
</table>
Events Defined by Internet Explorer
Nonstandard Attributes Commonly Supported onactivate, onbeforeactivate, onbeforecut, onbeforedeactivate,
background="URL of image" file onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
bordercolor="color name | #RRGGBB" oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag, ondragend,
cols="number of columns" ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfilterchange,
height="percentage | pixels" onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
hspace="pixels" onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
vspace="pixels" onmouseout, onmouseover, onmousewheel, onmove, onmoveend, onmovestart,
onpaste, onpropertychange, onreadystatechange, onresize, onresizeend,
onresizestart, onscroll, onselectstart, ontimeerror
Attributes Introduced by HTML5
accesskey="spaced list of accelerator key(s)" Element-Specific Attributes
contenteditable="true | false | inherit"
contextmenu="id of menu" align This attribute specifies the alignment of the table with respect to surrounding text.
data-X="user-defined data" The HTML 4.01 specification defines center, left, and right. Some browsers also might
draggable="true | false | auto"
hidden="hidden"
support alignment values, such as absmiddle, that are common to block objects.
itemid="microdata id in URL format"
itemprop="microdata value"
Chapter 3: HTML and XHTML Element Reference 387 388 Part I: Core Markup

background This nonstandard attribute, which is supported by nearly every browser, displayed; vsides indicates the left and right edges both should be displayed; and void
specifies the URL of a background image for the table. The image is tiled if it is smaller than indicates no border should be displayed.
the table dimensions. Note that some early versions of Netscape display the background

PART I
image in each table cell rather than behind the complete table. height This attribute specifies the height of the table, in pixels or as a percentage of the
browser window. Be careful, because some browser versions may not support percentage
bgcolor This attribute specifies a background color for a table. Its value can be either a values for height or may have variations in this calculation when they do support it.
named color, such as red, or a color specified in the hexadecimal #RRGGBB format, such as
#FF0000. hspace This Netscape-specific attribute indicates the horizontal space, in pixels, between
the table and surrounding content, similar to the same attribute on <img>.
border This attribute specifies, in pixels, the width of a table’s borders. A value of 0 makes
a borderless table, which is useful for graphics layout. rules This attribute controls the display of dividing rules within a table. A value of all
specifies dividing rules for rows and columns. A value of cols specifies dividing rules for
bordercolor This attribute, supported by Internet Explorer and Netscape, is used to set the columns only. A value of groups specifies horizontal dividing rules between groups of table
border color for a table. The attribute should be used only with a positive value for the cells defined by the thead, tbody, tfoot, or colgroup elements. A value of rows specifies
border attribute. The value of the attribute can be either a named color, such as green, or a dividing rules for rows only. A value of none indicates no dividing rules and is the default.
color specified in the hexadecimal #RRGGBB format, such as #00FF00. The color
applications may be slightly different in browsers, since Netscape colors only the outer summary This attribute is used to provide a text summary of the table’s purpose and
border of the table. CSS should be used for border styling instead of this attribute. structure. This element is used for accessibility, and its presence is important for nonvisual
user agents.
bordercolordark This Internet Explorer–specific attribute specifies the darker of two border
colors used to create a three-dimensional effect for cell borders. It must be used with the vspace This Netscape attribute indicates the vertical space, in pixels, between the table and
border attribute set to a positive value. The attribute value can be either a named color, surrounding content, similar to the same attribute on <img>.
such as blue, or a color specified in the hexadecimal #RRGGBB format, such as #0000FF.
width This attribute specifies the width of the table, either in pixels or as a percentage of
CSS should be used for border styling instead of this attribute.
the enclosing window.
bordercolorlight This Internet Explorer–specific attribute specifies the lighter of two border
colors used to create a three-dimensional effect for cell borders. It must be used with the Examples
border attribute set to a positive value. The attribute value can be either a named color, <table bgcolor="white" border="2">
such as red, or a color specified in the hexadecimal #RRGGBB format, such as #FF0000. <tr>
<td>Cell 1</td>
CSS should be used for border styling instead of this attribute.
<td>Cell 2</td>
<td>Cell 3</td>
cellpadding This attribute sets the width, in pixels, between the edge of a cell and its <td>Cell 4</td>
content. </tr>
cellspacing This attribute sets the width, in pixels, between individual cells. <tr>
<td>Cell 5</td>
cols This attribute specifies the number of columns in the table and is used to help quickly <td>Cell 6</td>
calculate the size of the table. This attribute was part of the preliminary specification of </tr>
HTML 4.0, but was later dropped. A few browsers, notably Netscape and Internet Explorer, </table>
support it.
<table rules="all" bgcolor="yellow">
datapagesize The value of this Microsoft-specific attribute is the number of records that can <caption>Widgets by Area</caption>
be displayed in the table when data binding is used. <thead align="center" bgcolor="green" valign="middle">
<tr>
frame This attribute specifies which edges of a table are to display a border frame. A value <td>Region</td>
<th>Regular Widget</th>
of above indicates only the top edge; below indicates only the bottom edge; and border
<th>Super Widget</th>
and box indicate all edges, which is the default when the border attribute is a positive </tr>
integer. A value of hsides indicates only the top and bottom edges should be displayed; </thead>
lhs indicates the left edge should be displayed; rhs indicates the right edge should be
Chapter 3: HTML and XHTML Element Reference 389 390 Part I: Core Markup

<tfoot align="right" bgcolor="red" valign="bottom"> Standard Syntax


<tr>
<td>This is part of the footer.</td> <tbody align="center | char | justify | left | right"
<td>This is also part of the footer.</td> char="character"

PART I
</tr> charoff="offset"
</tfoot> class="class name(s)"
dir="ltr | rtl"
<tbody> id="unique alphanumeric identifier"
lang="language code"
<tr> style="style information"
<th>West Coast</th> title="advisory text"
<td>10</td> valign="baseline | bottom | middle | top">
<td>12</td>
</tr> tr elements only

<tr> </tbody>
<th>East Coast</th>
<td>1</td> Attributes Introduced by HTML5
<td>20</td> accesskey="spaced list of accelerator key(s)"
</tr> contenteditable="true | false | inherit"
</tbody> contextmenu="id of menu"
</table> data-X="user-defined data"
draggable="true | false | auto"
Compatibility hidden="hidden"
itemid="microdata id in URL format"
HTML 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+, itemprop="microdata value"
XHTML 1.0, 1.1, Basic Netscape 1.1+, Opera 4+, Safari 1+ itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
Notes itemtype="microdata type in URL format"
spellcheck="true | false"
• In addition to displaying tabular data, tables have been used to support graphics tabindex="number"
layout and design. CSS is currently the suggested method for layout, but current
inspection of sites suggests that in 2009 table-based layout is alive and well. Attributes Defined by Internet Explorer
• The HTML 4 specification reserved the attributes datasrc, datafld, accesskey="key" (5.5)
dataformatas, and datapagesize for future versions. However, XHTML dropped bgcolor="color name | #RRGGBB" (4)
these attributes. They are supported in Internet Explorer 4 and later. Early drafts of hidefocus="true | false" (5.5)
the HTML5 specification introduced a datagrid, which seem to revisit these ideas, language="javascript | jscript | vbs | vbscript" (4)
but it was later dropped with indications it may return in future versions of HTML. tabindex="number" (5.5)
unselectable="on | off" (5.5)
• At the time of this writing, most browsers have problems with char and charoff
attributes in all table-related tags. HTML 4 Event Attributes
• The HTML 3.2 specification defines only the align, border, cellpadding, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
cellspacing, and width attributes for the table element. onmousemove, onmouseout, onmouseover, onmouseup
• The cols attribute might provide an undesirable result under some versions of
HTML5 Event Attributes
Netscape, which assumes the size of each column in the table is exactly the same.
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
<tbody> (Table Body) ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
This element is used to group the rows within the body of a table as defined by <tr> tags. onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
Chapter 3: HTML and XHTML Element Reference 391 392 Part I: Core Markup

onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, <td>10</td>


onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, <td>12</td>
onsuspend, ontimeupdate, onvolumechange, onwaiting </tr>
<tr>

PART I
Events Defined by Internet Explorer <th>East Coast</th>
<td>1</td>
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate, <td>20</td>
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu, </tr>
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag, </tbody>
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, </table>
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, Compatibility
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,
HTML 4, 4.01, 5 Firefox 1+, Internet Explorer 4+,
onresizeend, onresizestart, onselectstart, ontimeerror
XHTML 1.0, 1.1 Netscape 6+, Opera 5+, Safari 1+
Element-Specific Attributes Notes
align This attribute is used to align the contents of the cells within a <tbody> tag. • This element is found only in a <table> tag and contains one or more table rows, as
Common values are center, justify, left, and right. The specification also defines a indicated by <tr> tags.
value of char. When align is set to char, the attribute char must be present and set to the • For XHTML compatibility, the closing </tbody> tag must be used with this
character to which cells should be aligned. A common use of this approach would be to set element; however, it is optional under traditional HTML as well as HTML5.
cells to align on a decimal point. Unfortunately, browsers do not support the char value for
align well.
<td> (Table Data)
bgcolor This attribute specifies a background color for the cells within a <tbody> tag. Its This element specifies a data cell in a table. The element should occur within a table row as
value can be either a named color, such as red, or a color specified in the hexadecimal defined by the tr element.
#RRGGBB format, such as #FF0000.
Standard Syntax
char This attribute is used to define the character to which element contents are aligned <td
when the align attribute is set to the char value. abbr="abbreviation"
align="center | justify | left | right"
charoff This attribute contains an offset as a positive or negative integer to align characters axis="group name"
as related to the char value. A value of 2 would align characters in a cell two characters to bgcolor="color name | #RRGGBB" (transitional only)
the right of the character defined by the char attribute. char="character"
charoff="offset"
valign This attribute is used to set the vertical alignment for the table cells within a class="class name"
colspan="number of columns to span"
<tbody> tag. The HTML specification defines baseline, bottom, middle, and top.
dir="ltr | rtl"
Internet Explorer also supports center, which should act like middle. headers="space-separated list of associated header
cells' id values"
Example height="pixels or percentage" (transitional only)
<table rule="all"> id="unique alphanumeric identifier"
<thead> lang="language code"
<tr> nowrap="nowrap" (transitional only)
<td>Region</td> rowspan="number or rows to span"
<th>Regular Widget</th> scope="col | colgroup | row | rowgroup"
<th>Super Widget</th> style="style information"
</tr> title="advisory text"
</thead> valign="baseline | bottom | middle | top"
<tbody> width="pixels or percentage"> (transitional only)
<tr>
<th>West Coast</th> </td>
Chapter 3: HTML and XHTML Element Reference 393 394 Part I: Core Markup

Nonstandard Attributes Commonly Supported onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
background="URL of image file" onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
bordercolor="color name | #RRGGBB" onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,

PART I
onresizeend, onresizestart, onselectstart, ontimeerror
Attributes Introduced by HTML5
accesskey="spaced list of accelerator key(s)" Element-Specific Attributes
contenteditable="true | false | inherit"
contextmenu="id of menu" abbr The value of this attribute is an abbreviated name for a header cell. This might be
data-X="user-defined data" useful when attempting to display large tables on small screens. User agents rarely
draggable="true | false | auto" implement this feature.
hidden="hidden"
itemid="microdata id in URL format" align This attribute is used to align the contents of the cells. Supported values are center,
itemprop="microdata value"
justify, left, and right.
itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
itemtype="microdata type in URL format"
axis This attribute is used to provide a name for a group of related headers.
spellcheck="true | false"
tabindex="number" background This nonstandard attribute, which is supported by major browsers, specifies
the URL of a background image for the table cell. The image is tiled if it is smaller than the
Attributes Defined by Internet Explorer cell’s dimensions.
accesskey="key" (5.5) bgcolor This attribute specifies a background color for a table cell. Its value can be either a
background="URL of image file" (4)
named color, such as red, or a color specified in the hexadecimal #RRGGBB format, such as
bordercolor="color name | #RRGGBB" (4)
bordercolordark="color name | #RRGGBB" (4) #FF0000. Note that some older versions of Netscape Navigator may not render an empty
bordercolorlight="color name | #RRGGBB" (4) cell with a colored background unless some content serving as placeholder, such as a
hidefocus="true | false" (5.5) nonbreaking space or transparent pixel-gif, is inserted in the cell.
language="javascript | jscript | vbs | vbscript" (4)
tabindex="number" (5.5) bordercolor This attribute, supported by Internet Explorer and Netscape, is used to set the
unselectable="on | off" (5.5) border color for a table cell. The attribute should be used only with a positive value for the
border attribute. The value of the attribute can be either a named color, such as green, or a
HTML 4 Event Attributes color specified in the hexadecimal #RRGGBB format, such as #00FF00.
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup bordercolordark This Internet Explorer–specific attribute specifies the darker of two border
colors used to create a three-dimensional effect for a cell’s borders. It must be used with the
HTML5 Event Attributes border attribute set to a positive value. The attribute value can be either a named color,
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, such as blue, or a color specified in the hexadecimal #RRGGBB format, such as #0000FF.
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, bordercolorlight This Internet Explorer–specific attribute specifies the lighter of two border
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, colors used to create a three-dimensional effect for a cell’s borders. It must be used with the
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, border attribute set to a positive value. The attribute value can be either a named color,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, such as red, or a color specified in the hexadecimal #RRGGBB format, such as #FF0000.
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, char This attribute is used to define the character to which element contents are aligned
onsuspend, ontimeupdate, onvolumechange, onwaiting when the align attribute is set to the char value.

Events Defined by Internet Explorer charoff This attribute contains an offset, specified as a positive or negative integer, to align
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate, characters as related to the char value. A value of 2, for example, would align characters in
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu, a cell two characters to the right of the character defined by the char attribute.
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
Chapter 3: HTML and XHTML Element Reference 395 396 Part I: Core Markup

colspan This attribute takes a numeric value that indicates how many columns wide a cell <td>Item 3</td>
should be. This is useful for creating tables with cells of different widths. <td>Item 4</td>
</tr>
</table>

PART I
headers This attribute takes a space-separated list of id values that correspond to the
header cells related to this cell.
Compatibility
height This attribute indicates the height of the cell, in pixels or as a percentage. Some
HTML 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
browsers may have rendering problems with percentage values.
XHTML 1.0, 1.1, Basic Netscape 1.1+, Opera 4+, Safari 1+
nowrap This attribute keeps the content within a table cell from automatically wrapping.
The nowrap attribute takes no value under HTML but should be set to the value nowrap Notes
under XHTML. • Under the XHTML 1.0 specification, the closing </td> tag ceases to be optional.
• The HTML 3.2 specification defines only align, colspan, height, nowrap,
rowspan This attribute takes a numeric value that indicates how many rows high a table
rowspan, valign, and width attributes.
cell should span. This attribute is useful in defining tables with cells of different heights.
• This element should always be within the tr element.
scope This attribute specifies the table cells for which the current cell provides header
information. A value of col indicates that the cell is a header for the rest of the column <textarea> (Multiline Text Input)
below it. A value of colgroup indicates that the cell is a header for its current column This element specifies a multiline text input field contained within a form.
group. A value of row indicates that the cell contains header information for the rest of the
row it is in. A value of rowgroup indicates that the cell is a header for its row group. This Standard Syntax
attribute might be used in place of the header attribute and is useful for rendering
<textarea
assistance by nonvisual browsers. This attribute was added very late to the HTML 4 accesskey="character"
specification, and support for this attribute is still minimal. class="class name"
cols="number"
valign This attribute is used to set the vertical alignment for the table cell. The specification dir="ltr | rtl"
defines baseline, bottom, middle, and top. Internet Explorer also supports center, disabled="disabled"
which should be the same as middle. id="unique alphanumeric identifier"
lang="language code"
width This attribute specifies the width of a cell, in pixels or as a percentage value. name="unique alphanumeric identifier"
readonly="readonly"
Examples rows="number"
style="style information"
<table> tabindex="number"
<tr> title="advisory text">
<td align="left" valign="top" width="100">
Put me in the top left corner. </textarea>
</td>
<td align="right" bgcolor="red" valign="bottom" width="100">
Put me in the bottom right corner.
Attributes Introduced by HTML5
</td> autofocus="autofocus"
</tr> contenteditable="true | false | inherit"
</table> contextmenu="id of menu"
data-X="user-defined data"
<table border="1" width="80%"> draggable="true | false | auto"
<tr> form="related form id"
<td colspan="3"> hidden="hidden"
A pretty wide cell itemid="microdata id in URL format"
</td> itemprop="microdata value"
<tr> itemref="space-separated list of IDs that may contain microdata"
<td>Item 2</td> itemscope="itemscope"
itemtype="microdata type in URL format"
Chapter 3: HTML and XHTML Element Reference 397 398 Part I: Core Markup

maxlength="positive number" is made active. It only takes an attribute value of autofocus when using the XML-style
pattern="validation pattern" syntax for HTML5.
placeholder="placeholder text"
required="required"

PART I
cols This attribute sets the width, in characters, of the text area. The typical default value
spellcheck="true | false" for the size of a <textarea> tag when this attribute is not set is 20 characters.
tabindex="number"
wrap="hard | soft"
disabled This attribute is used to turn off a form control. Elements will not be submitted,
nor can they receive any focus from the keyboard or mouse. Disabled form controls will not
Attributes Defined by Internet Explorer be part of the tabbing order. The browser also can gray out the form that is disabled, to
contenteditable="false | true | inherit" (5.5) indicate to the user that the form control is inactive. This attribute requires no value.
datafld="column name" (4)
datasrc="data source id" (4) form This HTML5 attribute should be set to a string that corresponds to the id of the form
hidefocus="true | false" (5.5)
element that an interactive control such as a button is associated with. This allows form
language="javascript | jscript | vbs | vbscript" (4)
wrap="off | physical | virtual" (4) elements in one form to trigger actions in others.

name This attribute allows a form control to be assigned a name for submitting to the
Attribute Defined by Netscape 4
server the appropriate name/value pair. Previously it was also used so that the field could
wrap="hard | off | soft" be referenced by a scripting language. However, it is more appropriate to use the id
attribute. For compatibility purposes, both attributes might be used and set to the same
HTML 4 Event Attributes value.
onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress,
onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, pattern This HTML5 attribute specifies a regular expression against which the field should
onselect be validated. The title attribute should be provided when this attribute is used, to give an
indication of what is an acceptable pattern and what isn’t.
HTML5 Event Attributes
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, placeholder This HTML5 attribute specifies a short bit of text that is used to help the user
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, figure out what type of information to fill in for a form control. Likely, the text will be
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, placed in the field and cleared upon focus.
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, readonly This attribute prevents the form control’s value from being changed. Form
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, controls with this attribute set might receive focus from the user but should not permit the
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, user to modify the value. Because it receives focus, a readonly form control will be part of
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
the form’s tabbing order. Finally, the control’s value will be sent on form submission. Under
onsuspend, ontimeupdate, onvolumechange, onwaiting
XHTML, the value of the readonly attribute should be set to readonly.
Events Defined by Internet Explorer required The presence of this HTML5 Boolean attribute indicates that the user is required
onactivate, onafterupdate, onbeforeactivate, onbeforecopy, onbeforecut, to provide a value for the <textarea> tag for the form to be submitted. User agents that
onbeforedeactivate, onbeforeeditfocus, onbeforepaste, onclick, onchange, understand this should set the CSS pseudo-class :invalid when the field goes into error.
oncontextmenu, oncontrolselect, oncopy, oncut, ondeactivate, ondrag,
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, rows This attribute sets the number of rows in the text area. The value of the attribute
onerrorupdate, onfilterchange, onfocus, onfocusin, onfocusout, onhelp,
onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseleave,
should be a positive integer.
onmouseenter, onmousemove, onmouseout, onmouseover, onmouseup,
onmousewheel, onmove, onmoveend, onmovestart, onpaste, onpropertychange,
wrap In some versions of Netscape (later Firefox) and Microsoft browsers, this attribute
onreadystatechange, onresize, onresizeend, onresizestart, onselect, controls word-wrap behavior. A value of off for the attribute forces the <textarea> tag
onselectstart, ontimeerror not to wrap text, so the viewer must manually enter line breaks. A value of hard causes
word wrap and includes line breaks in text submitted to the server. A value of soft causes
Element-Specific Attributes word wrap but removes line breaks from text submitted to the server. Internet Explorer
supports a value of physical, which is equivalent to Netscape’s hard value, and a value of
autofocus This HTML5 Boolean attribute is used to indicate that the user agent should virtual, which is equivalent to Netscape’s soft value. If the wrap attribute is not
immediately focus this form item once its containing window object (usually the document)
Chapter 3: HTML and XHTML Element Reference 399 400 Part I: Core Markup

included, text will still wrap under Internet Explorer, but older versions of Netscape, class="class name(s)"
notably Netscape 4, will scroll horizontally in the text box. Given this problem, even though dir="ltr | rtl"
it is nonstandard, it may be a good idea to include the wrap attribute. HTML5 reintroduces id="unique alphanumeric identifier"
lang="language code"

PART I
this attribute with the values of hard and soft. Use of this attribute assumes that the cols
style="style information"
attribute has been set properly. title="advisory text"
valign="baseline | bottom | middle | top">
Examples
<textarea id="CommentBox" cols="40" rows="8"> tr elements only
Default text in field
</textarea> </tfoot>

<textarea name="comment" id="comment" rows="10" cols="40" wrap="hard" Attributes Introduced by HTML5


align="center">
accesskey="spaced list of accelerator key(s)"
</textarea>
contenteditable="true | false | inherit"
contextmenu="id of menu"
Compatibility data-X="user-defined data"
draggable="true | false | auto"
HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+, hidden="hidden"
XHTML 1.0, 1.1, Basic Netscape 1+, Opera 4+, Safari 1+ itemid="microdata id in URL format"
itemprop="microdata value"
Notes itemref="space-separated list of IDs that may contain microdata"
• Any text between the <textarea> and </textarea> tags is rendered as the default itemscope="itemscope"
itemtype="microdata type in URL format"
entry for the form control. Content within a textarea element is not interpreted, so spellcheck="true | false"
white space is preserved and tags themselves are ignored. tabindex="number"
• The textarea element traditionally lacks a maxlength attribute, which causes a
more obvious security risk. The HTML5 specification does introduce a maxlength Attributes Defined by Internet Explorer
value to restrict the number of characters that may be entered. However, it should accesskey="key" (5.5)
be noted that all client-side form validations should be assumed as user hidefocus="true | false" (5.5)
conveniences only and not security, as they may be easily removed by malicious language="javascript | jscript | vbs | vbscript" (4)
users. tabindex="number" (5.5)
unselectable="off | on" (5.5)
• A <textarea> tag cannot be a descendent of an a (anchor) or button element. valign="center" (4)
• The HTML 4.01 specification reserves the datafld and datasrc attributes for
future use with the textarea element. HTML 4 Event Attributes
• The HTML 2.0 and 3.2 specifications define only the cols, name, and rows onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup
attributes for this element.
HTML5 Event Attributes
<tfoot> (Table Footer) onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
This element is used to group the rows within the footer of a table so that common oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
alignment and style defaults can easily be set for numerous cells. This element might be ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
particularly useful when setting a common footer for tables that are dynamically generated. onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
Standard Syntax onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
<tfoot
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
align="center | char | justify | left | right"
onsuspend, ontimeupdate, onvolumechange, onwaiting
char="character"
charoff="offset"
Chapter 3: HTML and XHTML Element Reference 401 402 Part I: Core Markup

Events Defined by Internet Explorer Notes


onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate, • This element is contained only by the table element and contains table rows as
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu, delimited by tr elements.

PART I
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, • While it would seem that this element should come after a <tbody> tag, it actually
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup, should come before it, within a <table> tag.
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
• Under the XHTML 1.0 specification, the closing </tfoot> tag ceases to be optional.
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,
onresizeend, onresizestart, onselectstart, ontimeerror <th> (Table Header)
This element specifies a header cell in a table. The element should occur within a table row
Element-Specific Attributes as defined by a tr element. The main visual difference between this element and td is that
browsers might render table headers slightly differently, usually bolding and centering
align This attribute is used to align the contents of the cells within a <tfoot> tag. contents. However, the element is logical in nature and should be used to structure tables.
Common values are center, justify, left, and right. The HTML and XHTML
specifications also define a value of char. When align is set to char, the attribute char Standard Syntax
must be present and set to the character to which cells should be aligned. A common use of
<th
this approach would be to set cells to align on a decimal point. abbr="abbreviation"
align="center | justify | left | right"
char This attribute is used to define the character to which element contents are aligned axis="group name"
when the align attribute is set to the char value. bgcolor="color name | #RRGGBB" (transitional only)
char="character"
charoff This attribute contains an offset, as a positive or negative integer, for aligning charoff="offset"
characters as related to the char value. A value of 2, for example, would align characters in class="class name"
a cell two characters to the right of the character defined by the char attribute. colspan="number"
dir="ltr | rtl"
valign This attribute is used to set the vertical alignment for the table cells within a headers="space-separated list of associated header
<tfoot> tag. The specification defines baseline, bottom, middle, and top. Internet cells' id values"
height="pixels" (transitional only)
Explorer also supports center, which should be the same as middle.
id="unique alphanumeric identifier"
lang="language code"
Example nowrap="nowrap" (transitional only)
<table border="1" width="80%"> rowspan="number"
<tfoot align="center" class="tablefooter" scope="col | colgroup | row | rowgroup"
valign="bottom"> style="style information"
<td>This is part of the footer.</td> title="advisory text"
<td>This is also part of the footer.</td> valign="baseline | bottom | middle | top"
</tfoot> width="pixels"> (transitional only)
<tbody class="tablebody">
<tr> </th>
<td>The contents of the table!</td>
</tr> Nonstandard Attributes Commonly Supported
</tbody>
</table> background="URL of image file"
bordercolor="color name | #RRGGBB"
Compatibility
Attributes Introduced by HTML5
HTML 4, 4.01, 5 Firefox 1+, Internet Explorer 4+, accesskey="spaced list of accelerator key(s)"
XHTML 1.0, 1.1 Netscape 6+, Opera 5+, Safari 1+ contenteditable="true | false | inherit"
contextmenu="id of menu"
data-X="user-defined data"
Chapter 3: HTML and XHTML Element Reference 403 404 Part I: Core Markup

draggable="true | false | auto" align This attribute is used to align the contents of the cells within a <th> tag. Common
hidden="hidden" values are center, justify, left, and right.
itemid="microdata id in URL format"
itemprop="microdata value"

PART I
axis This attribute is used to provide a name for a group of related headers.
itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope" background This nonstandard attribute, which is supported by most browsers, specifies the
itemtype="microdata type in URL format"
URL of a background image for the table cell. The image is tiled if it is smaller than the cell’s
spellcheck="true | false"
tabindex="number" dimensions.

bgcolor This attribute specifies a background color for a table cell. Its value can be either a
Attributes Defined by Internet Explorer
named color, such as red, or a color specified in the hexadecimal #RRGGBB format, such as
accesskey="key" (5.5) #FF0000.
bordercolordark="color name | #RRGGBB" (4)
bordercolorlight="color name | #RRGGBB" (4) bordercolor This attribute, supported by Internet Explorer and Netscape, is used to set the
hidefocus="true | false" (5.5)
border color for a table cell. The attribute should be used only with a positive value for the
language="javascript | jscript | vbs | vbscript" (4)
tabindex="number" (5.5) border attribute. The value of the attribute can be either a named color, such as green, or a
valign="center" (4) color specified in the hexadecimal #RRGGBB format, such as #00FF00.

HTML 4 Event Attributes bordercolordark This Internet Explorer–specific attribute specifies the darker of two border
colors used to create a three-dimensional effect for a cell’s borders. It must be used with the
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
border attribute set to a positive value. The attribute value can be either a named color,
onmousemove, onmouseout, onmouseover, onmouseup
such as blue, or a color specified in the hexadecimal #RRGGBB format, such as #0000FF.
HTML5 Event Attributes bordercolorlight This Internet Explorer–specific attribute specifies the lighter of two border
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, colors used to create a three-dimensional effect for a cell’s borders. It must be used with the
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, border attribute set to a positive value. The attribute value can be either a named color,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
such as red, or a color specified in the hexadecimal #RRGGBB format, such as #FF0000.
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
char This attribute is used to define the character to which element contents are aligned
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, when the align attribute is set to the char value.
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting charoff This attribute contains an offset, specified as a positive or negative integer, for
aligning characters as related to the char value. A value of 2, for example, would align
Events Defined by Internet Explorer characters in a cell two characters to the right of the character defined by the char attribute.
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
colspan This attribute takes a numeric value that indicates how many columns wide a cell
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag, should be. This is useful for creating tables with cells of different widths.
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup, headers This attribute takes a space-separated list of id values that correspond to the
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, header cells related to this cell.
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, height This attribute indicates the height of the cell, in pixels or as a percentage. Some
onresizeend, onresizestart, onselectstart, ontimeerror browsers may have rendering problems with percentage values.

Element-Specific Attributes nowrap This attribute keeps the content within a table cell from automatically wrapping.
The nowrap attribute takes no value under HTML but should be set to the value nowrap
abbr The value of this attribute is an abbreviated name for a header cell. This might be under XHTML.
useful when attempting to display large tables on small screens. User agents rarely support
this attribute. rowspan This attribute takes a numeric value that indicates how many rows high a table
cell should span. This attribute is useful in defining tables with cells of different heights.
Chapter 3: HTML and XHTML Element Reference 405 406 Part I: Core Markup

scope This attribute specifies the table cells for which the current cell provides header Standard Syntax
information. A value of col indicates that the cell is a header for the rest of the column <thead
below it. A value of colgroup indicates that the cell is a header for its current column align="center | char | justify | left | right"

PART I
group. A value of row indicates that the cell contains header information for the rest of the char="character"
row it is in. A value of rowgroup indicates that the cell is a header for its row group. This charoff="offset"
attribute can be used in place of the header attribute and is useful for rendering assistance class="class name(s)"
by nonvisual browsers. This attribute was added very late to the HTML 4.0 specification, dir="ltr | rtl"
id="unique alphanumeric identifier"
and support for this attribute is still minimal in browsers.
lang="language code"
style="style information"
valign This attribute is used to set the vertical alignment for the table cell. The specification title="advisory text"
defines baseline, bottom, middle, and top. Internet Explorer also supports center, valign="baseline | bottom | middle | top">
which should be the same as middle.
tr elements only
width This attribute specifies the width of a cell, in pixels or as a percentage value.
</thead>
Example
<table border="1"> Attributes Introduced by HTML5
<tr> accesskey="spaced list of accelerator key(s)"
<th>Names</th> contenteditable="true | false | inherit"
<th>Apples</th> contextmenu="id of menu"
<th>Oranges</th> data-X="user-defined data"
</tr> draggable="true | false | auto"
<tr> hidden="hidden"
<td>Rusty</td> itemid="microdata id in URL format"
<td>10</td> itemprop="microdata value"
<td>5</td> itemref="space-separated list of IDs that may contain microdata"
</tr> itemscope="itemscope"
<tr> itemtype="microdata type in URL format"
<td>Ruby Sue</td> spellcheck="true | false"
<td>20</td> tabindex="number"
<td>3</td>
</tr>
Attributes Defined by Internet Explorer
</table>
accesskey="key" (5.5)
Compatibility hidefocus="true | false" (5.5)
language="javascript | jscript | vbs | vbscript" (4)
HTML 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+, tabindex="number" (5.5)
XHTML 1.0, 1.1, Basic Netscape 1.1+, Opera 4+, Safari 1+ unselectable="off | on" (5.5)
valign="center" (4)
Notes
HTML 4 Event Attributes
• The HTML 3.2 specification defines only align, colspan, height, nowrap,
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
rowspan, valign, and width attributes. onmousemove, onmouseout, onmouseover, onmouseup
• This element should always be within the tr element.
• Under the XHTML 1.0 specification, the closing </th> tag ceases to be optional. HTML5 Event Attributes
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
<thead> (Table Header) ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
This element is used to group the rows within the header of a table so that common alignment onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
and style defaults can easily be set for numerous cells. This element might be particularly onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
useful when setting a common head for tables that are dynamically generated.
Chapter 3: HTML and XHTML Element Reference 407 408 Part I: Core Markup

onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, Compatibility


onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, HTML 4, 4.01, 5 Firefox 1+, Internet Explorer 4+,
onsuspend, ontimeupdate, onvolumechange, onwaiting

PART I
XHTML 1.0, 1.1 Netscape 6+, Opera 5+, Safari 1+

Events Defined by Internet Explorer Notes


onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate, • This element is contained only by a <table> tag and contains table rows as
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu, delimited by <tr> tags.
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, • Under the XHTML 1.0 specification, the closing </thead> tag ceases to be optional.
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
<time> (Time)
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, This inline HTML5 element encloses content that represents a date and/or time.
onresizeend, onresizestart, onselectstart, ontimeerror
HTML5 Standard Syntax
Element-Specific Attributes <time
accesskey="spaced list of accelerator key(s)"
align This attribute is used to align the contents of the cells within a <thead> tag. Common class="class name(s)"
values are center, justify, left, and right. The specification also defines a value of contenteditable="true | false | inherit"
char. When align is set to char, the attribute char must be present and set to the character contextmenu="id of menu"
data-X="user-defined data"
to which cells should be aligned. A common use of this approach would be to set cells to
datetime="date-or-time"
align on a decimal point. dir="ltr | rtl"
draggable="true | false | auto"
char This attribute is used to define the character to which element contents are aligned hidden="hidden"
when the align attribute is set to the char value. id="unique alphanumeric identifier"
itemid="microdata id in URL format"
charoff This attribute contains an offset, specified as a positive or negative integer, for itemprop="microdata value"
aligning characters as related to the char value. A value of 2, for example, would align itemref="space-separated list of IDs that may contain microdata"
characters in a cell two characters to the right of the character defined by the char attribute. itemscope="itemscope"
itemtype="microdata type in URL format"
valign This attribute is used to set the vertical alignment for the table cells with a <thead> lang="language code"
tag. The specification defines baseline, bottom, middle, and top. Internet Explorer also pubdate="pubdate"
supports center, which should be the same as middle. spellcheck="true | false"
style="style information"
tabindex="number"
Example title="advisory text">
<table border="1" width="80%">
<thead align="center" class="footer" </time>
valign="bottom">
<td>This is the Important Table Headline</td> HTML5 Event Attributes
</thead>
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
<tbody class="tablebody"> oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
<tr> ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
<td>The contents of the table!</td> onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
</tr> onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
</tbody> onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
</table> onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting
Chapter 3: HTML and XHTML Element Reference 409 410 Part I: Core Markup

Element-Specific Attributes Compatibility


datetime This attribute is used to indicate the date and time of the enclosed content. The HTML5 Not currently supported by any browser, but addressed via a custom element.

PART I
value of the attribute is a date in a special format as defined by ISO 8601. The basic date
format is Notes
• This element should contain content that is in the correct format unless the
YYYY-MM-DDThh:mm:ssTZD datetime attribute is used. Of course, browsers aren’t going to enforce this, but it is
important if you want correct HTML5 conformance.
where the following is true:
• This element is not yet implemented in any browser. However, given that most
YYYY=four-digit year such as 1999 browsers can handle custom elements, it would be easy enough to simulate the idea
MM=two-digit month (01=January, 02=February, and so on.) of it directly or use a <span> tag with a custom class.
DD=two-digit day of the month (01 through 31)
hh=two-digit hour (00 to 23) (24-hour clock, not AM or PM)
mm=two-digit minute (00 through 59) <title> (Document Title)
ss=two-digit second (00 through 59) This element encloses the title of an HTML document. It must occur within a document’s
TZD=time zone designator head element and must be present in all valid documents. There should be only a single
occurrence of this element. Meaningful titles are very important because they are used for
The time zone designator is either Z, which indicates Universal Time Coordinate or
bookmarking a page, are occasionally used by browsers to label locally saved pages, and
coordinated universal time format (UTC), or +hh:mm, which indicates that the time is a local
are often used by search engines attempting to index the document.
time that is hh hours and mm minutes ahead of UTC. Alternatively, the format for the time
zone designator could be -hh:mm, which indicates that the local time is behind UTC. Note Standard Syntax
that the letter T actually appears in the string, all digits must be used, and 00 values for
<title
minutes and seconds might be required. An example value for the datetime attribute dir="ltr | rtl"
might be 1999-10-6T09:15:00-05:00, which corresponds to October 6, 1999, 9:15 A.M., lang="language code">
U.S. Eastern Standard Time. </title>

pubdate This Boolean attribute, when specified, indicates that the date and time given Attributes Introduced by HTML5
by this element should be applied as the publication date of an enclosing article element.
accesskey="spaced list of accelerator key(s)"
If there is no enclosing article element, the publication date would apply to the entire class="class name(s)"
document. Under XHTML5, the value of the attribute should be pubdate for XML syntax contenteditable="true | false | inherit"
conformance. contextmenu="id of menu"
data-X="user-defined data"
Examples dir="ltr | rtl"
<p>My son was born on <time datetime="2006-01-13">Friday the 13th</time> so draggable="true | false | auto"
it is my new lucky day.</p> hidden="hidden"
id="unique alphanumeric identifier"
<p>Today it is <time>2010-07-08</time> which is an interesting date.</p> itemid="microdata id in URL format"
itemprop="microdata value"
<p>When did the Moon runaway? <time>1999-09-13T09:15:00-05:00</time></p> itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
<!-- example shows the pubdate application to the enclosing article --> itemtype="microdata type in URL format"
<article id="article1" > lang="language code"
<header> spellcheck="true | false"
<h1>HTML5 is Coming Soon!</h1> style="style information"
<p><time pubdate datetime="2009-10-31T12:30-11:00"></time></p> tabindex="number"
</header> title="advisory text"
<p>The new HTML5 specification is in the works. While many features are
not currently implemented or even well defined yet, progress is being made. Events Defined by HTML5
Stay tuned to see more new HTML elements added to your Web documents in the onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
years to come.</p> oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
</article>
Chapter 3: HTML and XHTML Element Reference 411 412 Part I: Core Markup

ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, Syntax


onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, <tr
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, align="center | justify | left | right | char"

PART I
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, bgcolor="color name | #RRGGBB" (transitional only)
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, char="character"
onsuspend, ontimeupdate, onvolumechange, onwaiting charoff="offset"
class="class name(s)"
dir="ltr | rtl"
Events Defined by Internet Explorer id="unique alphanumeric identifier"
onlayoutcomplete, onreadystatechange lang="language code"
style="style information"
Example title="advisory text"
valign="baseline | bottom | middle | top">
<head><title>Big Company: Products: Super Widget</title></head>
td or th elements only
Compatibility
</tr>
HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
XHTML 1.0, 1.1, Basic Netscape 1+, Opera 2.1+, Safari 1+ Attributes Introduced by HTML5
Notes accesskey="spaced list of accelerator key(s)"
contenteditable="true | false | inherit"
• Often, the title is set as the first element found in the head, though it should come contextmenu="id of menu"
after a character set indication if that is not taken care of by appropriate HTTP data-X="user-defined data"
headers. draggable="true | false | auto"
hidden="hidden"
• Meaningful names should provide information about the document. A poor title itemid="microdata id in URL format"
would be something like “My Home Page,” whereas a better title would be “Joe itemprop="microdata value"
Smith Home.” itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
• Browsers can be extremely sensitive to the <title> tag. If the title element is
itemtype="microdata type in URL format"
malformed or not closed, the page might not even render in the browser. spellcheck="true | false"
• The HTML 2.0 and 3.2 specifications define no attributes for the title element. tabindex="number"
• Under most browsers, core HTML 4 attribute values like id and class will work
Attributes Defined by Internet Explorer
for DOM access and make some sense for manipulation via JavaScript, but other
attributes for events or style-related features do not. accesskey="key" (5.5)
bordercolor="color name | #RRGGBB" (4)
• The title element may contain character entities to set accents or introduce other bordercolordark="color name | #RRGGBB" (4)
special characters, though you should use caution to make sure the appropriate bordercolorlight="color name | #RRGGBB" (4)
character set has been defined. Markup may not be included in the title element. hidefocus="true | false" (5.5)
language="javascript | javascript | vbs | vbscript" (4)
• Currently, the HTML5 specification defines all the common attributes for the title tabindex="number" (5.5)
element, like accesskey, class, contextmenu, and so on. Their context, however, valign="center" (4)
seems inappropriate given how browsers work. For example, while it is possible to
imagine a tabbing order or context menu for a browser title, so far such things are Standard Event Attributes
unclear and suggest an over generalization of the HTML5 specification when it onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
comes to global attributes. onmousemove, onmouseout, onmouseover, onmouseup

<tr> (Table Row) HTML5 Event Attributes


This block element specifies a row in a table. The individual cells of the row are defined by onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
the th and td elements. oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
Chapter 3: HTML and XHTML Element Reference 413 414 Part I: Core Markup

ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, charoff This attribute contains an offset, specified as a positive or negative integer, for
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, aligning characters as related to the char value. A value of 2, for example, would align
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, characters in a cell two characters to the right of the character defined by the char attribute.
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,

PART I
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
valign This attribute is used to set the vertical alignment for the table cells with a <tr> tag.
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting
The specification defines baseline, bottom, middle, and top. Internet Explorer also
allows center, which should be the same as middle.
Events Defined by Internet Explorer
Example
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
onbeforepaste, onblur, onclick, oncontextmenu, oncontrolselect, oncopy, <table width="300" border="1">
oncut, ondblclick, ondeactivate, ondrag, ondragend, ondragenter, <tr align="center" valign="middle">
ondragleave, ondragover, ondragstart, ondrop, onfilterchange, onfocus, <td>3</td>
onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup, <td>5.6</td>
onlosecapture, onmousedown, onmousemove, onmouseenter, onmouseleave, <td>7.9</td>
onmouseout, onmouseover, onmouseup onmousewheel, onmove, onmoveend, </tr>
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, </table>
onresizeend, onresizestart, onselectstart, ontimeerror
Compatibility
Element-Specific Attributes
HTML 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+,
align This attribute is used to align the contents of the cells within the element. Common XHTML 1.0, 1.1, Basic Netscape 1.1+, Opera 4+, Safari 1+
values are center, justify, left, and right. If a value is set to char, alignment is set to
Notes
align off the character defined by the char attribute, with offset applied by charoffset.
• This tag is contained only in the <table>, <thead>, <tbody>, and <tfoot> tags. It
bgcolor This attribute specifies a background color for all the cells in a row. Its value can be contains the <th> and <td> tags.
either a named color, such as red, or a color specified in the hexadecimal #RRGGBB format, • The HTML 3.2 specification defines only the align and valign attributes for this
such as #FF0000. element.
bordercolor This attribute, supported by a number of browsers, including Internet Explorer, • Internet Explorer 6 introduced ch and choff attributes per a draft standard at the
is used to set the border color for table cells in the row. The attribute should be used only time, but they do not do anything and later are set as char and charoff.
with a positive value for the border attribute. The value of the attribute can be either a • CSS visual changes to tables are suggested, but many sites claim that under strict
named color, such as green, or a color specified in the hexadecimal #RRGGBB format, such variants the various attributes like bgcolor no longer work. Testing in modern
as #00FF00. CSS should be used instead. browsers (IE 8, Firefox 3) at the time this edition was written does not support these
claims.
bordercolordark This Internet Explorer–specific attribute specifies the darker of two border
colors used to create a three-dimensional effect for the cell’s borders. It must be used with • Under the XHTML 1.0 specification, the closing </tr> tag is required, but under
the border attribute set to a positive value. The attribute value can be either a named color, older HTML and HTML5, the closing tag is optional.
such as blue, or a color specified in the hexadecimal #RRGGBB format, such as #0000FF. • There are extended DOM methods for table-related tags like <tr>, including
CSS should be used instead. insertRow() and deleteRow().

bordercolorlight This Internet Explorer–specific attribute specifies the lighter of two border
colors used to create a three-dimensional effect for a cell’s borders. It must be used with the
<tt> (Teletype Text)
border attribute set to a positive value. The attribute value can be either a named color, This inline element is used to indicate that text should be rendered in a monospaced font
such as red, or a color specified in the hexadecimal #RRGGBB format, such as #FF0000. similar to teletype text. The element is being marked as obsolete or deprecated and should
CSS should be used instead. be avoided in favor of CSS.

char This attribute is used to define the character to which element contents are aligned Standard Syntax
when the align attribute is set to the char value. <tt
class="class name(s)"
dir="ltr | rtl"
Chapter 3: HTML and XHTML Element Reference 415 416 Part I: Core Markup

id="unique alphanumeric identifier" Standard Syntax (Transitional Only)


lang="language code"
style="style information" <u
title="advisory text"> class="class name(s)"

PART I
dir="ltr | rtl"
</tt> id="unique alphanumeric string"
lang="language code"
style="style information"
Attributes Defined by Internet Explorer title="advisory text">
accesskey="key" (5.5) </u>
contenteditable="false | true | inherit"
disabled="false | true" (5.5) Attributes Defined by Internet Explorer
hidefocus="true | false" (5.5)
language="javascript | jscript | vbs | vbscript" (4) accesskey="key" (5.5)
tabindex="number" (5.5) contenteditable="false | true | inherit" (5.5)
unselectable="on | off" (5.5) hidefocus="true | false" (5.5)
language="javascript | jscript | vbs | vbscript" (4)
tabindex="number" (5.5)
HTML 4 Event Attributes unselectable="on | off" (5.5)
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup HTML 4 Event Attributes
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
Events Defined by Internet Explorer onmousemove, onmouseout, onmouseover, onmouseup
onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu, Events Defined by Internet Explorer
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup, onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
onresizeend, onresizestart, onselectstart, ontimeerror onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,
Examples onresizeend, onresizestart, onselectstart, ontimeerror
<p>Here is some <tt>monospaced text</tt></p>.
Examples
<p>Source code in this tag: <tt>main() { printf("hello world"); }</tt></p>
<p>Here is some <u>underlined text</u>.</p>
Compatibility <p>Be careful with <u>underlined</u> text; it looks like
<a href="http://www.pint.com/">a link</a>.</p>
HTML 2, 3.2, 4, 4.01 Firefox 1+, Internet Explorer 2+,
XHTML 1.0, 1.1 Netscape 1+, Opera 2.1+, Safari 1+ <p>If you must <span style="text-decoration: underline;">underline use
CSS</span> please.</p>
Note
• This element has been deprecated by the W3C under XHTML 1.1 and marked as Compatibility
obsolete HTML5. However, like other HTML5 obsolete items this element continues to
work in browsers. The look of the tag can be replicated with the font or font-family HTML 3.2, 4, 4.01 (transitional) Firefox 1+, Internet Explorer 2+,
XHTML 1.0 (transitional) Netscape 3+, Opera 4+, Safari 1+
CSS property set to a value of monospace or a common fixed-width font name.

<u> (Underline)
This element indicates that the enclosed text should be displayed underlined. It is deprecated or
obsolete in most specifications in favor of the CSS property text-decoration: underline.
Chapter 3: HTML and XHTML Element Reference 417 418 Part I: Core Markup

Notes HTML 4 Event Attributes


• This element has been deprecated by the W3C. Under the strict (X)HTML onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
specifications, the element is not supported, and under HTML5 it is marked onmousemove, onmouseout, onmouseover, onmouseup

PART I
obsolete. The look provided by this element is supported by the CSS property
text-decoration:underline. HTML5 Event Attributes
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
• Underlining text can be problematic because it looks similar to a link, especially in
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
a black-and-white environment. ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
<ul> (Unordered List) onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
This element is used to indicate an unordered list, namely a collection of items that does not onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
have a numerical ordering. The individual items in the list are defined by the li element, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
which is the only allowed element within a <ul> tag. onsuspend, ontimeupdate, onvolumechange, onwaiting

Standard Syntax Events Defined by Internet Explorer


<ul onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
class="class name(s)" onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
compact="compact" (transitional only) oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
dir="ltr | rtl" ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
id="unique alphanumeric identifier" onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
lang="language code" onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
style="style information" onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
title="advisory text" onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,
type="circle | disc | square"> (transitional only) onresizeend, onresizestart, onselectstart, ontimeerror
List items specified by <li> tags
Element-Specific Attributes
</ul>
compact This attribute indicates that the list should be rendered in a compact style. Few
Attributes Introduced by HTML5 browsers actually change the rendering of the list, regardless of the presence of this
attribute. The compact attribute requires no value unless it is used with XML-style syntax,
accesskey="spaced list of accelerator key(s)"
where it takes the value of compact.
contenteditable="true | false | inherit"
contextmenu="id of menu"
data-X="user-defined data"
type The type attribute is used to set the bullet style for the list. The values defined under
draggable="true | false | auto" HTML 3.2 and the transitional version of HTML and XHTML are circle, disc, and
hidden="hidden" square. A user agent might decide to use a different bullet depending on the nesting level
itemid="microdata id in URL format" of the list, unless the type attribute is used. The type attribute is dropped under the strict
itemprop="microdata value" versions of HTML 4 and XHTML because style sheets can provide richer bullet control
itemref="space-separated list of IDs that may contain microdata" using the list-style-type and list-style-image properties.
itemscope="itemscope"
itemtype="microdata type in URL format" Examples
spellcheck="true | false"
tabindex="number" <ul compact="compact" title="Sushi Short List" type="circle">
<li>Maguro</li>
<li>Ebi</li>
Attributes Defined by Internet Explorer <li>Hamachi</li>
accesskey="key" (5.5) </ul>
contenteditable="false | true | inherit" (5.5)
hidefocus="true | false" (5.5) <!-- Correct list nesting -->
language="javascript | jscript | vbs | vbscript" (4)
tabindex="number" (5.5)
unselectable="on | off" (5.5)
Chapter 3: HTML and XHTML Element Reference 419 420 Part I: Core Markup

<ul compact title="Sushi Short List" type="circle"> Attributes Introduced by HTML5


<li>Item 1
<ul> accesskey="spaced list of accelerator key(s)"
<li>Item A</li> contenteditable="true | false | inherit"

PART I
<li>Item B</li> contextmenu="id of menu"
</ul></li> data-X="user-defined data"
<li>Item 2</li> draggable="true | false | auto"
</ul> hidden="hidden"
itemid="microdata id in URL format"
itemprop="microdata value"
Compatibility itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+, itemtype="microdata type in URL format"
XHTML 1.0, 1.1, Basic Netscape 1+, Opera 4+, Safari 1+ spellcheck="true | false"
tabindex="number"
Notes
• HTML 2.0 supports only the compact attribute. Attributes Defined by Internet Explorer
• The HTML 3.2 specification supports compact and type. accesskey="key" (5.5)
contenteditable="false | true | inherit" (5.5)
• Under the strict (X)HTML specifications as well as HTML5, the ul element does not hidefocus="true | false" (5.5)
support the compact attribute or the type attribute. Both of these attributes can be language="javascript | jscript | vbs | vbscript" (4)
easily replaced with CSS properties. tabindex="number" (5.5)
unselectable="on | off" (5.5)
• Due to XHTML’s deprecation of attribute minimization, the compact attribute must
have a quoted attribute when used in the transitional variant:
HTML 4 Event Attributes
<ul compact="compact"></ul>
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
• Many Web page designers and page development tools use the <ul> tag to indent onmousemove, onmouseout, onmouseover, onmouseup
text. The only element that should occur within a ul element is li, so such markup
does not conform to standards. However, this common practice is likely to continue. HTML5 Event Attributes
• Since the content model of ul says list items should be the only item within <ul> onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
tags, nested lists should occur within <li> tags rather than outside them as they are oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
commonly found.
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
<var> (Variable) onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
This logical inline element is used to indicate a variable (an identifier that occurs in a onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
programming language or a mathematical expression), with any enclosed text generally onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting
rendered in italics.

Standard Syntax Events Defined by Internet Explorer


onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate,
<var
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
class="class name(s)"
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
dir="ltr | rtl"
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
id="unique alphanumeric value"
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
lang="language code"
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
style="style information"
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
title="advisory text">
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,
onresizeend, onresizestart, onselectstart, ontimeerror
</var>
Chapter 3: HTML and XHTML Element Reference 421 422 Part I: Core Markup

Example ondragstart, ondrop, onerror, onfocus, onhashchange, onkeydown, onkeypress,


onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseout,
<p>In Math the variable <var>x</var> holds the answer to many onmouseover, onmouseup, onmousewheel, onresize, onscroll, onselect,
of life's most important questions. It contains the time it takes onstorage, onsubmit, onunload

PART I
two speeding trains to meet when they have left two different
stations travelling at different speeds, the number of lemons you
have left over after trading with people, and all sorts of other Element-Specific Attributes
interesting values.</p>
autobuffer This Boolean attribute indicates the browser should begin buffering a video
Compatibility right away. This attribute should be used if it is assumed the user will play the video. This
attribute is meaningful only if autoplay is not set, as in that case the browser will play
HTML 2, 3.2, 4, 4.01, 5 Firefox 1+, Internet Explorer 2+, video as soon as it can, allowing no time for further buffering.
XHTML 1.0, 1.1, Basic Netscape 1+, Opera 4+, Safari 1+
autoplay This Boolean attribute indicates the browser should begin playing a video after
Notes page load once enough content has been received and it is reasonable to play without
• As a logical element, var is a perfect candidate for style sheet binding. interruptions.

• The HTML 2.0 and 3.2 specifications support no attributes for this element. controls This Boolean attribute is set to indicate whether or not the browser should present
controls for video, such as playback, pause, volume, and seek. If not present, no controls
<video> (Video) will be shown and it will be up to the developer to script the control of the video element.
This HTML5 element embeds a video into a document.
loop This Boolean attribute, if present, indicates that the video should loop.
HTML5 Standard Syntax poster This attribute is set to the URL of an image that the browser will use in place of the
<video video before it is loaded and playing.
accesskey="spaced list of accelerator key(s)"
autobuffer="true | false" src This attribute is set to the URL of the video to show.
autoplay="autoplay"
class="class name(s)" Examples
contenteditable="true | false | inherit"
contextmenu="id of menu" <video src="movies/movie1.ogg" autoplay>
controls="controls" <p>No support for HTML5 <code>video</code> element.</p>
data-X="user-defined data" </video>
dir="ltr | rtl"
draggable="true | false | auto" <video src="movies/movie1.ogg" poster="coming.png" loop
height="pixels" playcount="3" start="45">
hidden="hidden" <p>No support for HTML5 <code>video</code> element.</p>
id="unique alphanumeric identifier" </video>
lang="language code"
loop="loop" <video>
poster="URL of preview/standby image" <source src="movie2.ogg" type="video/ogg">
spellcheck="true | false" <source src="movie2.mov">
src="URL of video" <p>No support for HTML5 <code>video</code> element.</p>
style="style information" </video>
tabindex="number"
title="advisory text" Compatibility
width="pixels">
HTML5 Firefox 3.5+, Opera 10+, Safari 3.1+
</video>
Notes
HTML5 Event Attributes • Alternate content should be placed inside of the video element for browsers that do
onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, not support it.
ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,
Chapter 3: HTML and XHTML Element Reference 423 424 Part I: Core Markup

• Browsers are quite variable in what codecs they support. For example, Firefox 3.5 <xml> (XML Data Island)
supports Theora for video in Ogg containers, while Safari browsers favor This proprietary element introduced by Microsoft can be used to insert fragments of XML
QuickTime movies. (Extensible Markup Language) data into HTML documents. This idea is generally called

PART I
• Flash video will often be used to avoid cross-browser rendering concerns. Until this data islands and natively will work only under Internet Explorer 5.0 or later. However, it
element is widely supported, developers are advised to continue using Flash video. can be simulated using JavaScript and careful style sheet applications in other browsers.
Under Internet Explorer, an <xml> tag can be used to reference outside data sources using
<wbr> (Word Break) the src attribute, or to surround XML data in the (X)HTML document itself.
This nonstandard element is used to indicate a place where a line break can occur if Internet Explorer Syntax
necessary. This element is used in conjunction with the nobr element, which is used to keep
<xml
text from wrapping. When used this way, wbr can be thought of as a soft line break in
id="unique alphanumeric value"
comparison to a <br> tag. This element is common to many earlier browsers, though it is src="URL of XML data file">
not part of any HTML standard.
...embedded XML markup...
Proprietary Syntax </xml>
<wbr
id="unique alphanumeric value">
Events Defined by Internet Explorer
ondataavailable, ondatasetchanged, ondatasetcomplete, onreadystatechange,
onrowenter, onrowexit, onrowsdelete, onrowsinserted
Examples
<nobr>A line break can occur here<wbr>but not elsewhere, even if Element-Specific Attribute
the line is really long.</nobr>
src This attribute references an external XML data file.
<nobr>For comparison a line break cannot occur here even if the
line is really long like this one is.</nobr> Examples
<!-- This code embeds XML data directly into a document.
Compatibility All code between the <xml> tags is not HTML, but a
hypothetical example of XML. -->
No standards support Internet Explorer 2–7, Netscape 1.1, 2, 3, 4, 4.5–4.8
<xml id="tasty">
Notes <combomeal>
<burger>
• Early versions of standards-based browsers, such as Mozilla and Opera, do not <name>Tasty Burger</name>
support this tag but, oddly, seem to support <nobr>. However, later versions, <bun bread="white">
including IE 8, correctly ignore this feature. <meat />
<cheese />
• To simulate this element’s functionality for setting a soft break in modern browsers
<meat />
that apply white-space: nowrap to an element, use the tag as a custom tag and </bun>
set its style like so: <wbr style="display:inline-block;>. Other schemes </burger>
using the &shy; and &#8203; entities may provide useful functionality as well in <fries size="large" />
some cases. <drink size="large" flavor="Cola" />
</combomeal>
• Documentation for older versions of Internet Explorer defined class, language, </xml>
style, and title for this tag. However, they have little meaning, given this tag’s
purpose, and have since been eliminated from the documentation, though they may <!-- This code fragment uses the src attribute to reference an
effectively be recognized in some manner by the browser parser. external file containing XML data. -->
• Though this is an empty element and should be written as <wbr /> under XHTML,
<xml src="combomeal.xml"></xml>
it does not need to be. It is not standard and will not validate anyway.
Chapter 3: HTML and XHTML Element Reference 425 426 Part I: Core Markup

Compatibility Note that returns

No standards support Internet Explorer 5+ as well as S P A C E S are preserved.</xmp>

PART I
Note Compatibility
• Native browser support for the <xml> tag is limited to Internet Explorer 5 or later, HTML 2 Firefox 1+, Internet Explorer 2+, Netscape 1+, Opera 2.1+, Safari 1+
though given native support for XML in modern browsers, it is possible to simulate
the idea by defining a custom tag and hiding it using CSS display or visibility Notes
properties. See https://developer.mozilla.org/en/Using_XML_Data_Islands_in_
• This element was first deprecated under HTML 3.2, yet all major browsers continue
Mozilla for an example.
to support it, and it is well documented and even extended for Internet Explorer.
The <pre> tag or style sheets should be used instead of this tag.
<xmp> (Example)
• Note that the MSDN documentation does not show oncopy and onbeforecopy
This deprecated but still widely supported element indicates that the enclosed text is an
events for this element but testing shows they do work up until IE 8.
example. Example text generally is rendered in a monospaced font, and the spaces, tabs,
and returns are preserved, as with the pre element.

Syntax (Defined by HTML 2; Deprecated Under HTML 4)


<xmp>
</xmp>

Attributes Defined by Internet Explorer


accesskey="key" (5.5)
class="class name(s)" (4)
contenteditable="false | true | inherit" (5.5)
dir="ltr | rtl"
hidefocus="true | false" (5.5)
id="unique alphanumeric value" (4)
lang="language code" (4)
language="javascript | jscript | vbs | vbscript" (4)
style="style information" (4)
tabindex="number" (5.5)
title="advisory text" (4)
unselectable="on | off" (5.5)

Events Defined by Internet Explorer


onactivate, onbeforeactivate, onbeforecut, onbeforedeactivate,
onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,
oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag,
ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,
onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup,
onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove,
onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend,
onmovestart, onpaste, onpropertychange, onreadystatechange, onresize,
onresizeend, onresizestart, onselectstart, ontimeerror

Example
<xmp>This is a large block of text used as an example.

You might also like