Appendix: HTML5 Elements and Attributes
These tables provide a reference to some of the most commonly used HTML5 elements, the category of content they belong to as well as their attributes. Although there are new elements in HTML5, some elements from HTML 4.0.1 (such as b and i) have been revised.
This table is not a complete list, for complete references please visit http://www.w3.org/TR/html5/index.html.
For an overview of HTML5 syntax, be sure to read Lesson 2 “Using HTML5 markup”.
In the Attributes column, “globals” refers to common attributes that may be specified on all HTML elements. These attributes are , , , , , , , , , , , , , , and are described in further detail below.
Table 1 List of current HTML5 elements
Element |
Description |
Attributes |
a |
Hyperlink |
globals; href; target; rel; media; hreflang; type |
abbr |
Abbreviation |
globals |
address |
Contact information for a page or section |
globals |
area |
Hyperlink or dead area on an image map |
globals; alt; coords; shape; href; target; rel; media; hreflang; type |
article |
Self-contained syndicatable or reusable composition |
globals |
aside |
Sidebar for tangentially related content |
globals |
audio |
Audio player |
globals; src; preload; autoplay; mediagroup; loop; controls |
b |
Represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood. |
globals |
base |
Base URL and default target browsing context for hyperlinks and forms |
globals; href; target |
block |
A section quoted from another source |
globals; cite |
body |
Document body |
globals; onafterprint; onbeforeprint; onbeforeunload; onblur; onerror; onfocus; onhashchange; onload; onmessage; onoffline; ononline; onpagehide; onpageshow; onpopstate; onredo; onresize; onscroll; onstorage; onundo; onunload |
br |
Line break, e.g. in poem or postal address |
globals |
button |
Button control |
globals; autofocus; disabled; form; formaction; formenctype; formmethod; formnovalidate; formtarget; name; type; value |
canvas |
Scriptable bitmap canvas |
globals; width; height |
caption |
Table caption |
globals |
cite |
Title of a work |
globals |
code |
Computer code |
globals |
col |
Table column |
globals; span |
colgroup |
Group of columns in a table |
globals; span |
command |
Menu command |
globals; type; label; icon; disabled; checked; radiogroup |
datalist |
Container for options for combo box control |
globals |
dd |
Content for corresponding dt element(s) |
globals |
del |
A removal from the document |
globals; cite; datetime |
div |
Generic flow container |
globals |
dl |
Association list consisting of zero or more name-value groups |
globals |
dt |
Legend for corresponding dd element(s) |
globals |
em |
Stress emphasis |
globals |
embed |
Plugin |
globals; src; type; width; height; any* |
fieldset |
Group of form controls |
globals; disabled; form; name |
figcaption |
Caption for figure |
globals |
figure |
Figure with optional caption |
globals |
footer |
Footer for a page or section |
globals |
form |
User-submittable form |
globals; accept-charset; action; autocomplete; enctype; method; name; novalidate; target |
h1, h2, h3, h4, h5, h6 |
Section heading |
globals |
head |
Container for document metadata |
globals |
header |
Introductory or navigational aids for a page or section |
globals |
hgroup |
heading group |
globals |
hr |
Thematic break |
globals |
html |
Root element |
globals; manifest |
i |
Alternate voice |
globals |
iframe |
Nested browsing context |
globals; src; srcdoc; name; sandbox; seamless; width; height |
img |
Image |
globals; alt; src; usemap; ismap; width; height |
input |
Form control |
globals; accept; alt; autocomplete; autofocus; checked; dirname; disabled; form; formaction; formenctype; formmethod; formnovalidate; formtarget; height; list; max; maxlength; min; multiple; name; pattern; placeholder; readonly; required; size; src; step; type; value; width |
ins |
An addition to the document |
globals; cite; datetime |
label |
Caption for a form control |
globals; form; for |
legend |
Caption for fieldset |
globals |
li |
List item |
globals; value* |
link |
Link metadata |
globals; href; rel; media; hreflang; type; sizes |
map |
Image map |
globals; name |
mark |
Highlight |
globals |
menu |
Menu of commands |
globals; type; label |
meta |
Text metadata |
globals; name; http-equiv; content; charset |
meter |
Gauge |
globals; value; min; max; low; high; optimum; form |
nav |
Section with navigational links |
globals |
noscript |
Fallback content for script |
globals |
object |
Image, nested browsing context, or plugin |
globals; data; type; name; usemap; form; width; height |
ol |
Ordered list |
globals; reversed; start |
optgroup |
Group of options in a list box |
globals; disabled; label |
option |
Option in a list box or combo box control |
globals; disabled; label; selected; value |
output |
Calculated output value |
globals; for; form; name |
p |
Paragraph |
globals |
param |
Parameter for object |
globals; name; value |
pre |
Block of preformatted text |
globals |
progress |
Progress bar |
globals; value; max; form |
q |
Quotation |
globals; cite |
script |
Embedded script |
globals; src; async; defer; type; charset |
section |
Generic document or application section |
globals |
select |
List box control |
globals; autofocus; disabled; form; multiple; name; required; size |
small |
Side comment |
globals |
source |
Media source for video or audio |
globals; src; type; media |
span |
Generic phrasing container |
globals |
strong |
Importance |
globals |
style |
Embedded styling information |
globals; media; type; scoped |
sub |
Subscript |
globals |
summary |
Caption for details |
globals |
sup |
Superscript |
globals |
table |
Table |
globals; border |
tbody |
Group of rows in a table |
globals |
td |
Table cell |
globals; colspan; rowspan; headers |
textarea |
Multiline text field |
globals; autofocus; cols; disabled; form; maxlength; name; placeholder; readonly; required; rows; wrap |
tfoot |
Group of footer rows in a table |
globals |
th |
Table header cell |
globals; colspan; rowspan; headers; scope |
thead |
Group of heading rows in a table |
globals |
time |
Date and/or time |
globals; datetime; pubdate |
title |
Document title |
globals |
tr |
Table row |
globals |
track |
Timed text track |
globals; default; kind; label; src; srclang |
u |
Keywords |
globals |
ul |
List |
globals |
var |
Variable |
globals |
video |
Video player |
globals; src; poster; preload; autoplay; mediagroup; loop; controls; width; height |
wbr |
Line breaking opportunity |
globals |
Table 2 List of element content categories
For an overview of content categories be sure to read Lesson 6 “Using HTML5 markup”.
Category |
Elements |
Metadata content |
base; command; link; meta; noscript; script; style; title |
Flow content |
a; abbr; address; article; aside; audio; b; bdi; bdo; blockquote; br; button; canvas; cite; code; command; datalist; del; details; dfn; div; dl; em; embed; fieldset; figure; footer; form; h1; h2; h3; h4; h5; h6; header; hgroup; hr; i; iframe; img; input; ins; kbd; keygen; label; map; mark; math; menu; meter; nav; noscript; object; ol; output; p; pre; progress; q; ruby; s; samp; script; section; select; small; span; strong; sub; sup; svg; table; textarea; time; u; ul; var; video; wbr; Text |
Sectioning content |
article; aside; nav; section |
Heading content |
h1; h2; h3; h4; h5; h6; hgroup |
Phrasing content |
abbr; audio; b; bdi; bdo; br; button; canvas; cite; code; command; datalist; dfn; em; embed; i; iframe; img; input; kbd; keygen; label; mark; math; meter; noscript; object; output; progress; q; ruby; s; samp; script; select; small; span; strong; sub; sup; svg; textarea; time; u; var; video; wbr; Text |
Embedded content |
audio canvas embed iframe img math object svg video |
Interactive content |
a; button; details; embed; iframe; keygen; label; select; textarea; |
Sectioning roots |
blockquote; body; details; fieldset; figure; td |
Form-associated elements |
button; fieldset; input; keygen; label; meter; object; output; progress; select; textarea |
Listed elements |
button; fieldset; input; keygen; object; output; select; textarea |
Labelable elements |
button; input; keygen; meter; output; progress; select; textarea |
Submittable elements |
button; input; keygen; object; select; textarea |
Resettable elements |
input; keygen; output; select; textarea |
formatBlock candidates |
section; nav; article; aside; h1; h2; h3; h4; h5; h6; hgroup; header; footer; address; p; pre; blockquote; div |
Table 3 List of attributes
Attribute |
Element(s) |
Description |
Value |
accept |
input |
Hint for expected file type in file upload controls |
Set of comma-separated tokens* consisting of valid MIME types with no parameters or audio/*, video/*, or image/* |
accept-charset |
form |
Character encodings to use for form submission |
Ordered set of unique space-separated tokens, ASCII case-insensitive, consisting of preferred MIME names of ASCII-compatible character encodings* |
accesskey |
HTML elements |
Keyboard shortcut to activate or focus element |
Ordered set of unique space-separated tokens, case-sensitive, consisting of one Unicode code point in length |
action |
form |
URL to use for form submission |
Valid URL potentially surrounded by spaces |
alt |
area; img; input |
Replacement text for use when images are not available |
Text* |
async |
script |
Execute script asynchronously |
Boolean attribute |
autocomplete |
form; input |
Prevent the user agent from providing autocompletions for the form control(s) |
"on"; |
autofocus |
button; input; keygen; select; textarea |
Automatically focus the form control when the page is loaded |
Boolean attribute |
autoplay |
audio; video |
Hint that the media resource can be started automatically when the page is loaded |
Boolean attribute |
border |
border |
Explicit indication that the table element is not being used for layout purposes |
The empty string, or "1" |
challenge |
keygen |
String to package with the generated and signed public key |
Text |
charset |
meta |
Character encoding declaration |
Preferred MIME name of an encoding* |
charset |
script |
Character encoding of the external script resource |
Preferred MIME name of an encoding* |
checked |
command; input |
Whether the command or control is checked |
Boolean attribute |
cite |
blockquote; del; ins; q |
Link to the source of the quotation or more information about the edit |
Valid URL potentially surrounded by spaces |
class |
HTML elements |
Classes to which the element belongs |
Set of space-separated tokens |
cols |
textarea |
Maximum number of characters per line |
Valid non-negative integer greater than zero |
colspan |
td; th |
Number of columns that the cell is to span |
Valid non-negative integer greater than zero |
content |
meta |
Value of the element |
Text* |
contentedit |
HTML elements |
Whether the element is editable |
"true"; "false" |
contextmenu |
HTML elements |
The element’s context menu |
ID* |
controls |
audio; video |
Show user agent controls |
Boolean attribute |
coords |
area |
Coordinates for the shape to be created in an image map |
Valid list of integers* |
data |
object |
Address of the resource |
Valid non-empty URL potentially surrounded by spaces |
datetime |
del; ins |
Date and (optionally) time of the change |
Valid date string with optional time |
datetime |
time |
Value of the element |
Valid date or time string* |
default |
track |
Enable the track if no other text track is more suitable. |
Boolean attribute |
defer |
script |
Defer script execution |
Boolean attribute |
dir |
HTML elements |
The text directionality of the element |
"ltr"; "rtl" |
dirname |
input; textarea |
Name of form field to use for sending the element’s directionality in form submission |
Text* |
disabled |
button; command; fieldset; input; keygen; optgroup; option; select; textarea |
Whether the form control is disabled |
Boolean attribute |
draggable |
HTML elements |
Whether the element is draggable |
"true"; "false" |
dropzone |
HTML elements |
Accepted item types for drag-and-drop |
Unordered set of unique space-separated tokens, ASCII case-insensitive, consisting of accepted types and drag feedback* |
enctype |
form |
Form data set encoding type to use for form submission |
"application/x-www-form-urlencoded"; "multipart/form-data"; "text/plain" |
for |
label |
Associate the label with form control |
ID* |
for |
output |
Specifies controls from which the output was calculated |
Unordered set of unique space-separated tokens, case-sensitive, consisting of IDs* |
form |
button; fieldset; input; keygen; label; meter; object; output; progress; select; textarea |
Associates the control with a form element |
ID* |
formaction |
button; input |
URL to use for form submission |
Valid URL potentially surrounded by spaces |
formenctype |
button; input |
Form data set encoding type to use for form submission |
"application/x-www-form-urlencoded"; "multipart/form-data"; "text/plain" |
formmethod |
button; input |
HTTP method to use for form submission |
"GET"; "POST" |
formnovali |
button; input |
Bypass form control validation for form submission |
Boolean attribute |
formtarget |
button; input |
Browsing context for form submission |
Valid browsing context name or keyword |
headers |
td; th |
The header cells for this cell |
Unordered set of unique space-separated tokens, case-sensitive, consisting of IDs* |
height |
canvas; embed; iframe; img; input; object; video |
Vertical dimension |
Valid non-negative integer |
hidden |
HTML elements |
Whether the element is relevant |
Boolean attribute |
high |
meter |
Low limit of high range |
Valid floating point number* |
href |
a; area |
Address of the hyperlink |
Valid URL potentially surrounded by spaces |
href |
link |
Address of the hyperlink |
Valid non-empty URL potentially surrounded by spaces |
href |
base |
Document base URL |
Valid URL potentially surrounded by spaces |
hreflang |
a; area; link |
Language of the linked resource |
Valid BCP 47 language tag |
http-equiv |
meta |
Pragma directive |
Text* |
icon |
command |
Icon for the command |
Valid non-empty URL potentially surrounded by spaces |
id |
HTML elements |
The element’s ID |
Text* |
ismap |
img |
Whether the image is a server-side image map |
Boolean attribute |
keytype |
keygen |
The type of cryptographic key to generate |
Text* |
kind |
track |
The type of text track |
"subtitles"; "captions"; "descriptions"; "chapters"; "metadata" |
label |
command; menu; optgroup; option; track |
User-visible label |
Text |
lang |
HTML elements |
Language of the element |
Valid BCP 47 language tag or the empty string |
list |
input |
List of autocomplete options |
ID* |
loop |
audio; video |
Whether to loop the media resource |
Boolean attribute |
low |
meter |
High limit of low range |
Valid floating point number* |
manifest |
html |
Application cache manifest |
Valid non-empty URL potentially surrounded by spaces |
max |
input |
Maximum value |
varies* |
max |
meter; progress |
Upper bound of range |
Valid floating point number* |
maxlength |
input; textarea |
Maximum length of value |
Valid non-negative integer |
media |
a; area; link; source; style |
Applicable media |
Valid media query |
mediagroup |
audio; video |
Groups media elements together with an implicit MediaController |
Text |
method |
form |
HTTP method to use for form submission |
"GET"; "POST" |
min |
input |
Minimum value |
varies* |
min |
meter |
Lower bound of range |
Valid floating point number* |
multiple |
input; select |
Whether to allow multiple values |
Boolean attribute |
name |
button; fieldset; input; keygen; output; select; textarea |
Name of form control to use for form submission and in the form.elements API |
Text* |
name |
form |
Name of form to use in the document.forms API |
Text* |
name |
iframe; object |
Name of nested browsing context |
Valid browsing context name or keyword |
name |
map |
Name of image map to reference from the usemap attribute |
Text* |
name |
meta |
Metadata name |
Text* |
name |
param |
Name of parameter |
Text |
novalidate |
form |
Bypass form control validation for form submission |
Boolean attribute |
open |
details |
Whether the details are visible |
Boolean attribute |
optimum |
meter |
Optimum value in gauge |
Valid floating point number* |
pattern |
input |
Pattern to be matched by the form control’s value |
Regular expression matching the JavaScript Pattern production |
placeholder |
input; textarea |
User-visible label to be placed within the form control |
Text* |
poster |
video |
Poster frame to show prior to video playback |
Valid non-empty URL potentially surrounded by spaces |
preload |
audio; video |
Hints how much buffering the media resource will likely need |
"none"; "metadata"; "auto" |
pubdate |
time |
Whether the element’s value represents a publication time for the nearest article or body |
Boolean attribute |
radiogroup |
command |
Name of group of commands to treat as a radio button group |
Text |
readonly |
input; textarea |
Whether to allow the value to be edited by the user |
Boolean attribute |
rel |
a; area; link |
Relationship between the document containing the hyperlink and the destination resource |
Set of space-separated tokens* |
required |
input; select; textarea |
Whether the control is required for form submission |
Boolean attribute |
reversed |
ol |
Number the list backwards |
Boolean attribute |
rows |
textarea |
Number of lines to show |
Valid non-negative integer greater than zero |
rowspan |
td; th |
Number of rows that the cell is to span |
Valid non-negative integer |
sandbox |
iframe |
Security rules for nested content |
Unordered set of unique space-separated tokens, ASCII case-insensitive, consisting of "allow-same-origin", "allow-forms", and "allow-scripts" |
spellcheck |
HTML elements |
Whether the element is to have its spelling and grammar checked |
"true"; "false" |
scope |
th |
Specifies which cells the header cell applies to |
"row"; "col"; "rowgroup"; "colgroup" |
scoped |
style |
Whether the styles apply to the entire document or just the parent subtree |
Boolean attribute |
seamless |
iframe |
Whether to apply the document’s styles to the nested content |
Boolean attribute |
selected |
option |
Whether the option is selected by default |
Boolean attribute |
shape |
area |
The kind of shape to be created in an image map |
"circle"; "default"; "poly"; "rect" |
size |
input; select |
Size of the control |
Valid non-negative integer greater than zero |
sizes |
link |
Sizes of the icons (for rel="icon") |
Unordered set of unique space-separated tokens, ASCII case-insensitive, consisting of sizes* |
span |
col; colgroup |
Number of columns spanned by the element |
Valid non-negative integer greater than zero |
src |
audio; embed; iframe; img; input; script; source; track; video |
Address of the resource |
Valid non-empty URL potentially surrounded by spaces |
srcdoc |
iframe |
A document to render in the iframe |
The source of an iframe srcdoc document* |
srclang |
track |
Language of the text track |
Valid BCP 47 language tag |
start |
ol |
Ordinal value of the first item |
Valid integer |
step |
input |
Granularity to be matched by the form control’s value |
Valid floating point number greater than zero, or "any" |
style |
HTML elements |
Presentational and formatting instructions |
CSS declarations* |
tabindex |
HTML elements |
Whether the element is focusable, and the relative order of the element for the purposes of sequential focus navigation |
Valid integer |
target |
a; area |
Browsing context for hyperlink navigation |
Valid browsing context name or keyword |
target |
base |
Default browsing context for hyperlink navigation and form submission |
Valid browsing context name or keyword |
target |
form |
Browsing context for form submission |
Valid browsing context name or keyword |
title |
HTML elements |
Advisory information for the element |
Text |
title |
abbr; dfn |
Full term or expansion of abbreviation |
Text |
title |
command |
Hint describing the command |
Text |
title |
link |
Title of the link |
Text |
title |
link; style |
Alternative style sheet set name |
Text |
type |
a; area; link |
Hint for the type of the referenced resource |
Valid MIME type |
type |
button |
Type of button |
"submit"; "reset"; "button" |
type |
button; input |
Type of form control |
input type keyword |
type |
command |
Type of command |
"command"; "checkbox"; "radio" |
type |
embed; object; script; source; style |
Type of embedded resource |
Valid MIME type |
type |
menu |
Type of menu |
"context"; "toolbar" |
usemap |
img; object |
Name of image map to use |
Valid hash-name reference* |
value |
button; option |
Value to be used for form submission |
Text |
value |
input |
Value of the form control |
varies* |
value |
li |
Ordinal value of the list item |
Valid integer |
value |
meter; progress |
Current value of the element |
Valid floating point number |
value |
param |
Value of parameter |
Text |
width |
canvas; embed; iframe; img; input; object; video |
Horizontal dimension |
Valid non-negative integer |
wrap |
textarea |
How the value of the form control is to be wrapped for form submission |
"soft"; "hard" |
Table 4 List of event handler content attributes
Attribute |
Element(s) |
Description |
Value |
onabort |
HTML elements |
abort event handler |
Event handler content attribute |
onafterprint |
body |
afterprint event handler for Window object |
Event handler content attribute |
onbeforeprint |
body |
beforeprint event handler for Window object |
Event handler content attribute |
onbeforeunload |
body |
beforeunload event handler for Window object |
Event handler content attribute |
onblur |
body |
blur event handler for Window object |
Event handler content attribute |
onblur |
HTML elements |
blur event handler |
Event handler content attribute |
oncanplay |
HTML elements |
canplay event handler |
Event handler content attribute |
oncanplaythrough |
HTML elements |
canplaythrough event handler |
Event handler content attribute |
onchange |
HTML elements |
change event handler |
Event handler content attribute |
onclick |
HTML elements |
click event handler |
Event handler content attribute |
oncontextmenu |
HTML elements |
contextmenu event handler |
Event handler content attribute |
oncuechange |
HTML elements |
cuechange event handler |
Event handler content attribute |
ondblclick |
HTML elements |
dblclick event handler |
Event handler content attribute |
ondrag |
HTML elements |
drag event handler |
Event handler content attribute |
ondragend |
HTML elements |
dragend event handler |
Event handler content attribute |
ondragenter |
HTML elements |
dragenter event handler |
Event handler content attribute |
ondragleave |
HTML elements |
dragleave event handler |
Event handler content attribute |
ondragover |
HTML elements |
dragover event handler |
Event handler content attribute |
ondragstart |
HTML elements |
dragstart event handler |
Event handler content attribute |
ondrop |
HTML elements |
drop event handler |
Event handler content attribute |
ondurationchange |
HTML elements |
durationchange event handler |
Event handler content attribute |
onemptied |
HTML elements |
emptied event handler |
Event handler content attribute |
onended |
HTML elements |
ended event handler |
Event handler content attribute |
onerror |
body |
error event handler for Window object, and handler for script error notifications |
Event handler content attribute |
onerror |
HTML elements |
error event handler |
Event handler content attribute |
onfocus |
body |
focus event handler for Window object |
Event handler content attribute |
onfocus |
HTML elements |
focus event handler |
Event handler content attribute |
onhashchange |
body |
hashchange event handler for Window object |
Event handler content attribute |
oninput |
HTML elements |
input event handler |
Event handler content attribute |
oninvalid |
HTML elements |
invalid event handler |
Event handler content attribute |
onkeydown |
HTML elements |
keydown event handler |
Event handler content attribute |
onkeypress |
HTML elements |
keypress event handler |
Event handler content attribute |
onkeyup |
HTML elements |
keyup event handler |
Event handler content attribute |
onload |
body |
load event handler for Window object |
Event handler content attribute |
onload |
HTML elements |
load event handler |
Event handler content attribute |
onloadeddata |
HTML elements |
loadeddata event handler |
Event handler content attribute |
onloadedmetadata |
HTML elements |
loadedmetadata event handler |
Event handler content attribute |
onloadstart |
HTML elements |
loadstart event handler |
Event handler content attribute |
onmessage |
body |
message event handler for Window object |
Event handler content attribute |
onmousedown |
HTML elements |
mousedown event handler |
Event handler content attribute |
onmousemove |
HTML elements |
mousemove event handler |
Event handler content attribute |
onmouseout |
HTML elements |
mouseout event handler |
Event handler content attribute |
onmouseover |
HTML elements |
mouseover event handler |
Event handler content attribute |
onmouseup |
HTML elements |
mouseup event handler |
Event handler content attribute |
onmousewheel |
HTML elements |
mousewheel event handler |
Event handler content attribute |
onoffline |
body |
offline event handler for Window object |
Event handler content attribute |
ononline |
body |
online event handler for Window object |
Event handler content attribute |
onpagehide |
body |
pagehide event handler for Window object |
Event handler content attribute |
onpageshow |
body |
pageshow event handler for Window object |
Event handler content attribute |
onpause |
HTML elements |
pause event handler |
Event handler content attribute |
onplay |
HTML elements |
play event handler |
Event handler content attribute |
onplaying |
HTML elements |
playing event handler |
Event handler content attribute |
onpopstate |
body |
popstate event handler for Window object |
Event handler content attribute |
onprogress |
HTML elements |
progress event handler |
Event handler content attribute |
onratechange |
HTML elements |
ratechange event handler |
Event handler content attribute |
onreadystatechange |
HTML elements |
readystatechange event handler |
Event handler content attribute |
onredo |
body |
redo event handler for Window object |
Event handler content attribute |
onreset |
HTML elements |
reset event handler |
Event handler content attribute |
onresize |
body |
resize event handler for Window object |
Event handler content attribute |
onscroll |
body |
scroll event handler for Window object |
Event handler content attribute |
onscroll |
HTML elements |
scroll event handler |
Event handler content attribute |
onseeked |
HTML elements |
seeked event handler |
Event handler content attribute |
onseeking |
HTML elements |
seeking event handler |
Event handler content attribute |
onselect |
HTML elements |
select event handler |
Event handler content attribute |
onshow |
HTML elements |
show event handler |
Event handler content attribute |
onstalled |
HTML elements |
stalled event handler |
Event handler content attribute |
onstorage |
body |
storage event handler for Window object |
Event handler content attribute |
onsubmit |
HTML elements |
submit event handler |
Event handler content attribute |
onsuspend |
HTML elements |
suspend event handler |
Event handler content attribute |
ontimeupdate |
HTML elements |
timeupdate event handler |
Event handler content attribute |
onundo |
body |
undo event handler for Window object |
Event handler content attribute |
onunload |
body |
unload event handler for Window object |
Event handler content attribute |
onvolumechange |
HTML elements |
volumechange event handler |
Event handler content attribute |
onwaiting |
HTML elements |
waiting event handler |
Event handler content attribute |
Table 5 List of events
Event |
Interface |
Description |
DOMContentLoaded |
Event |
Fired at the Document once it and its scripts have loaded, without waiting for other subresources |
abort |
Event |
Fired at the Window when the download was aborted by the user |
afterprint |
Event |
Fired at the Window after printing |
beforeprint |
Event |
Fired at the Window before printing |
beforeunload |
BeforeUnloadEvent |
Fired at the Window when the page is about to be unloaded, in case the page would like to show a warning prompt |
blur |
Event |
Fired at nodes losing focus |
change |
Event |
Fired at controls when the user commits a value change |
click |
Event |
Fired at an element before its activation behavior is run |
contextmenu |
Event |
Fired at elements when the user requests their context menu |
error |
Event |
Fired at elements when network and script errors occur |
focus |
Event |
Fired at nodes gaining focus |
hashchange |
HashChangeEvent |
Fired at the Window when the fragment identifier part of the document’s current address changes |
input |
Event |
Fired at controls when the user changes the value |
invalid |
Event |
Fired at controls during form validation if they do not satisfy their constraints |
load |
Event |
Fired at the Window when the document has finished loading; fired at an element containing a resource (e.g. img, embed) when its resource has finished loading |
message |
MessageEvent |
Fired at an object when the object receives a message |
offline |
Event |
Fired at the Window when the network connections fails |
online |
Event |
Fired at the Window when the network connections returns |
pagehide |
PageTransitionEvent |
Fired at the Window when the page’s entry in the session history stops being the current entry |
pageshow |
PageTransitionEvent |
Fired at the Window when the page’s entry in the session history becomes the current entry |
popstate |
PopStateEvent |
Fired at the Window when the user navigates the session history |
readystatechange |
Event |
Fired at the Document when it finishes parsing and again when all its subresources have finished loading |
reset |
Event |
Fired at a form element when it is reset |
show |
Event |
Fired at a menu element when it is shown as a context menu |
submit |
Event |
Fired at a form element when it is submitted |
unload |
Event |
Fired at the Window object when the page is going away |
Table 6 Media element events
Event name |
Interface |
Dispatched when... |
Preconditions |
loadstart |
Event |
The user agent begins looking for media data, as part of the resource selection algorithm. |
networkState equals NETWORK_LOADING |
progress |
Event |
The user agent is fetching media data. |
networkState equals NETWORK_LOADING |
suspend |
Event |
The user agent is intentionally not currently fetching media data, but does not have the entire media resource downloaded. |
networkState equals NETWORK_IDLE |
abort |
Event |
The user agent stops fetching the media data before it is completely downloaded, but not due to an error. |
error is an object with the code MEDIA_ERR_ABORTED. networkState equals either NETWORK_EMPTY or NETWORK_IDLE, depending on when the download was aborted. |
error |
Event |
An error occurs while fetching the media data. |
error is an object with the code MEDIA_ERR_NETWORK or higher. networkState equals either NETWORK_EMPTY or NETWORK_IDLE, depending on when the download was aborted. |
emptied |
Event |
A media element whose networkState was previously not in the NETWORK_EMPTY state has just switched to that state (either because of a fatal error during load that’s about to be reported, or because the load() method was invoked while the resource selection algorithm was already running). |
networkState is NETWORK_EMPTY; all the IDL attributes are in their initial states. |
stalled |
Event |
The user agent is trying to fetch media data, but data is unexpectedly not forthcoming. |
networkState is NETWORK_LOADING. |
loadedmetadata |
Event |
The user agent has just determined the duration and dimensions of the media resource and the text tracks are ready. |
readyState is newly equal to HAVE_METADATA or greater for the first time. |
loadeddata |
Event |
The user agent can render the media data at the current playback position for the first time. |
readyState newly increased to HAVE_CURRENT_DATA or greater for the first time. |
canplay |
Event |
The user agent can resume playback of the media data, but estimates that if playback were to be started now, the media resource could not be rendered at the current playback rate up to its end without having to stop for further buffering of content. |
readyState newly increased to HAVE_FUTURE_DATA or greater. |
canplaythrough |
Event |
The user agent estimates that if playback were to be started now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering. |
readyState is newly equal to HAVE_ENOUGH_DATA. |
playing |
Event |
Playback is ready to start after having been paused or delayed due to lack of media data. |
readyState is newly equal to or greater than HAVE_FUTURE_DATA and paused is false, or paused is newly false and readyState is equal to or greater than HAVE_FUTURE_DATA. Even if this event fires, the element might still not be potentially playing, e.g. if the element is blocked on its media controller (e.g. because the current media controller is paused, or another slaved media element is stalled somehow, or because the media resource has no data corresponding to the media controller position), or the element is paused for user interaction. |
waiting |
Event |
Playback has stopped because the next frame is not available, but the user agent expects that frame to become available in due course. |
readyState is equal to or less than HAVE_CURRENT_DATA, and paused is false. Either seeking is true, or the current playback position is not contained in any of the ranges in buffered. It is possible for playback to stop for other reasons without paused being false, but those reasons do not fire this event (and when those situations resolve, a separate playing event is not fired either): e.g. the element is newly blocked on its media controller, or playback ended, or playback stopped due to errors, or the element has paused for user interaction. |
seeking |
Event |
The seeking IDL attribute changed to true and the seek operation is taking long enough that the user agent has time to fire the event. |
|
seeked |
Event |
The seeking IDL attribute changed to false. |
|
ended |
Event |
Playback has stopped because the end of the media resource was reached. |
currentTime equals the end of the media resource; ended is true. |
durationchange |
Event |
The duration attribute has just been updated. |
|
timeupdate |
Event |
The current playback position changed as part of normal playback or in an especially interesting way, for example discontinuously. |
|
play |
Event |
The element is no longer paused. Fired after the play() method has returned, or when the autoplay attribute has caused playback to begin. |
paused is newly false. |
pause |
Event |
The element has been paused. Fired after the pause() method has returned. |
paused is newly true. |
ratechange |
Event |
Either the |
|
volumechange |
Event |
Either the volume attribute or the muted attribute has changed. Fired after the relevant attribute’s setter has returned. |
|