HTML Global Attributes
HTML attributes give elements meaning and context.
The global attributes below can be used on any HTML
element.
HTML Global Attributes
=
Attribute added in HTML5.
| Attribute |
Description |
| accesskey |
Specifies a shortcut key to activate/focus an element |
| class |
Specifies one or more classnames for an element (refers to a class in
a style sheet) |
|
contenteditable |
Specifies whether the content of an element is editable or not |
|
contextmenu |
Specifies a context menu for an element. The context menu appears when
a user right-clicks on the element |
|
data-* |
Used to store custom data private to the page or application |
| dir |
Specifies the text direction for the content in an element |
|
draggable |
Specifies whether an element is draggable or not |
|
dropzone |
Specifies whether the dragged data is copied, moved, or linked, when
dropped |
|
hidden |
Specifies that an element is not yet, or is no longer, relevant |
| id |
Specifies a unique id for an element |
| lang |
Specifies the language of the element's content |
|
spellcheck |
Specifies whether the element is to have its spelling and grammar
checked or not |
| style |
Specifies an inline CSS style for an element |
| tabindex |
Specifies the tabbing order of an element |
| title |
Specifies extra information about an element |
|
translate |
Specifies whether the content of an element should be translated or
not |
HTML Event Attributes
Global Event Attributes
HTML 4 added the ability to let events trigger actions in a browser, like
starting a JavaScript when a user clicks on an element.
To learn more about programming events, please visit the
JavaScript tutorial.
Below are the global event attributes that can be added to HTML elements to
define event actions.
Window Event Attributes
Events triggered for the window object (applies to the <body> tag):
= New event
attributes in HTML5.
| Attribute |
Value |
Description |
|
onafterprint |
script |
Script to be run after the document is printed |
|
onbeforeprint |
script |
Script to be run before the document is printed |
|
onbeforeunload |
script |
Script to be run when the document is about to be unloaded |
|
onerror |
script |
Script to be run when an error occur |
|
onhashchange |
script |
Script to be run when there has been changes to the anchor part of the
a URL |
| onload |
script |
Fires after the page is finished loading |
|
onmessage |
script |
Script to be run when the message is triggered |
|
onoffline |
script |
Script to be run when the browser starts to work offline |
|
ononline |
script |
Script to be run when the browser starts to work online |
|
onpagehide |
script |
Script to be run when a user navigates away from a page |
|
onpageshow |
script |
Script to be run when a user navigates to a page |
|
onpopstate |
script |
Script to be run when the window's history changes |
|
onresize |
script |
Fires when the browser window is resized |
|
onstorage |
script |
Script to be run when a Web Storage area is updated |
| onunload |
script |
Fires once a page has unloaded (or the browser window has been
closed) |
Form Events
Events triggered by actions inside a HTML form (applies to almost all HTML
elements, but is most used in form elements):
| Attribute |
Value |
Description |
| onblur |
script |
Fires the moment that the element loses focus |
| onchange |
script |
Fires the moment when the value of the element is changed |
|
oncontextmenu |
script |
Script to be run when a context menu is triggered |
| onfocus |
script |
Fires the moment when the element gets focus |
|
oninput |
script |
Script to be run when an element gets user input |
|
oninvalid |
script |
Script to be run when an element is invalid |
|
onreset |
script |
Fires when the Reset button in a form is clicked |
| onsearch |
script |
Fires when the user writes something in a search field (for
<input="search">) |
| onselect |
script |
Fires after some text has been selected in an element |
| onsubmit |
script |
Fires when a form is submitted |
Keyboard Events
| Attribute |
Value |
Description |
| onkeydown |
script |
Fires when a user is pressing a key |
| onkeypress |
script |
Fires when a user presses a key |
| onkeyup |
script |
Fires when a user releases a key |
Mouse Events
Events triggered by a mouse, or similar user actions:
| Attribute |
Value |
Description |
| onclick |
script |
Fires on a mouse click on the element |
| ondblclick |
script |
Fires on a mouse double-click on the element |
|
ondrag |
script |
Script to be run when an element is dragged |
|
ondragend |
script |
Script to be run at the end of a drag operation |
|
ondragenter |
script |
Script to be run when an element has been dragged to a valid drop
target |
|
ondragleave |
script |
Script to be run when an element leaves a valid drop target |
|
ondragover |
script |
Script to be run when an element is being
dragged over a valid drop target |
|
ondragstart |
script |
Script to be run at the start of a drag operation |
|
ondrop |
script |
Script to be run when dragged element is being dropped |
| onmousedown |
script |
Fires when a mouse button is pressed down on an element |
| onmousemove |
script |
Fires when the mouse pointer is moving while it is over an element |
| onmouseout |
script |
Fires when the mouse pointer moves out of an element |
| onmouseover |
script |
Fires when the mouse pointer moves over an element |
| onmouseup |
script |
Fires when a mouse button is released over an element |
| onmousewheel |
script |
Deprecated. Use the onwheel
attribute instead |
|
onscroll |
script |
Script to be run when an element's scrollbar is being scrolled |
|
onwheel |
script |
Fires when the mouse wheel rolls up or down over an element |
Clipboard Events
| Attribute |
Value |
Description |
| oncopy |
script |
Fires when the user copies the content of an element |
| oncut |
script |
Fires when the user cuts the content of an element |
| onpaste |
script |
Fires when the user pastes some content in an element |
Media Events
Events triggered by medias like videos, images and audio (applies to all HTML
elements, but is most common in media elements, like <audio>,
<embed>, <img>, <object>, and <video>).
Look at the HTML Audio and Video DOM
Reference for more information.
| Attribute |
Value |
Description |
| onabort |
script |
Script to be run on abort |
|
oncanplay |
script |
Script to be run when a file is ready to start playing (when it has
buffered enough to begin) |
|
oncanplaythrough |
script |
Script to be run when a file can be played all the way to the end
without pausing for buffering |
|
oncuechange |
script |
Script to be run when the cue changes in a <track> element |
|
ondurationchange |
script |
Script to be run when the length of the media changes |
|
onemptied |
script |
Script to be run when something bad happens and the file is suddenly
unavailable (like unexpectedly disconnects) |
|
onended |
script |
Script to be run when the media has reach the end (a useful event for
messages like "thanks for listening") |
|
onerror |
script |
Script to be run when an error occurs when the file is being
loaded |
|
onloadeddata |
script |
Script to be run when media data is loaded |
|
onloadedmetadata |
script |
Script to be run when meta data (like dimensions and duration) are
loaded |
|
onloadstart |
script |
Script to be run just as the file begins to load before anything is
actually loaded |
|
onpause |
script |
Script to be run when the media is paused either by the user or
programmatically |
|
onplay |
script |
Script to be run when the media is ready to start playing |
|
onplaying |
script |
Script to be run when the media actually has started playing |
|
onprogress |
script |
Script to be run when the browser is in the process of getting the
media data |
|
onratechange |
script |
Script to be run each time the playback rate changes (like when a user
switches to a slow motion or fast forward mode) |
|
onseeked |
script |
Script to be run when the seeking attribute is set to false indicating
that seeking has ended |
|
onseeking |
script |
Script to be run when the seeking attribute is set to true indicating
that seeking is active |
|
onstalled |
script |
Script to be run when the browser is unable to fetch the media data
for whatever reason |
|
onsuspend |
script |
Script to be run when fetching the media data is stopped before it is
completely loaded for whatever reason |
|
ontimeupdate |
script |
Script to be run when the playing position has changed (like when the
user fast forwards to a different point in the media) |
|
onvolumechange |
script |
Script to be run each time the volume is changed which (includes
setting the volume to "mute") |
|
onwaiting |
script |
Script to be run when the media has paused but is expected to resume
(like when the media pauses to buffer more data) |
Misc Events
| Attribute |
Value |
Description |
|
onerror |
script |
Fires when an error occurs while loading an external file |
|
onshow |
script |
Fires when a <menu> element is shown as a context menu |
|
ontoggle |
script |
Fires when the user opens or closes the <details> element |
HTML Canvas Reference
Description
The HTML5 <canvas> tag is used to draw graphics, on the fly, via
scripting (usually JavaScript).
However, the <canvas> element has no drawing abilities of its own (it
is only a container for graphics) - you must use a script to actually draw the
graphics.
The getContext() method returns an object that provides methods and
properties for drawing on the canvas.
This reference will cover the properties and methods of the getContext("2d")
object, which can be used to draw text, lines, boxes, circles, and more - on
the canvas.
Browser Support
The numbers in the table specify the first browser version that fully
supports the element.
| Elements |
 |
 |
 |
 |
 |
| <canvas> |
4.0 |
9.0 |
2.0 |
3.1 |
9.0 |
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support
<canvas> and its properties and methods.
Note: Internet Explorer 8 and earlier versions, do not support the
<canvas> element.
Colors, Styles, and Shadows
| Property |
Description |
| fillStyle |
Sets or returns the color, gradient, or pattern used to fill the
drawing |
| strokeStyle |
Sets or returns the color, gradient, or pattern used for strokes |
| shadowColor |
Sets or returns the color to use for shadows |
| shadowBlur |
Sets or returns the blur level for shadows |
| shadowOffsetX |
Sets or returns the horizontal distance of the shadow from the
shape |
| shadowOffsetY |
Sets or returns the vertical distance of the shadow from the
shape |
| Method |
Description |
| createLinearGradient() |
Creates a linear gradient (to use on canvas content) |
| createPattern() |
Repeats a specified element in the specified direction |
| createRadialGradient() |
Creates a radial/circular gradient (to use on canvas content) |
| addColorStop() |
Specifies the colors and stop positions in a gradient object |
Line Styles
| Property |
Description |
| lineCap |
Sets or returns the style of the end caps for a line |
| lineJoin |
Sets or returns the type of corner created, when two lines meet |
| lineWidth |
Sets or returns the current line width |
| miterLimit |
Sets or returns the maximum miter length |
Rectangles
| Method |
Description |
| rect() |
Creates a rectangle |
| fillRect() |
Draws a "filled" rectangle |
| strokeRect() |
Draws a rectangle (no fill) |
| clearRect() |
Clears the specified pixels within a given
rectangle |
Paths
| Method |
Description |
| fill() |
Fills the current drawing (path) |
| stroke() |
Actually draws the path you have defined |
| beginPath() |
Begins a path, or resets the current path |
| moveTo() |
Moves the path to the specified point in the canvas, without creating
a line |
| closePath() |
Creates a path from the current point back to the starting point |
| lineTo() |
Adds a new point and creates a line to that point from the last
specified point in the canvas |
| clip() |
Clips a region of any shape and size from the original canvas |
| quadraticCurveTo() |
Creates a quadratic Bézier curve |
| bezierCurveTo() |
Creates a cubic Bézier curve |
| arc() |
Creates an arc/curve (used to create circles, or parts of
circles) |
| arcTo() |
Creates an arc/curve between two tangents |
| isPointInPath() |
Returns true if the specified point is in the current path, otherwise
false |
Transformations
| Method |
Description |
| scale() |
Scales the current drawing bigger or smaller |
| rotate() |
Rotates the current drawing |
| translate() |
Remaps the (0,0) position on the canvas |
| transform() |
Replaces the current transformation matrix for the drawing |
| setTransform() |
Resets the current transform to the identity matrix. Then runs
transform() |
Text
| Property |
Description |
| font |
Sets or returns the current font properties for text content |
| textAlign |
Sets or returns the current alignment for text content |
| textBaseline |
Sets or returns the current text baseline used when drawing text |
| Method |
Description |
| fillText() |
Draws "filled" text on the canvas |
| strokeText() |
Draws text on the canvas (no fill) |
| measureText() |
Returns an object that contains the width of the specified text |
Image Drawing
| Method |
Description |
| drawImage() |
Draws an image, canvas, or video onto the canvas |
Pixel Manipulation
| Property |
Description |
| width |
Returns the width of an ImageData object |
| height |
Returns the height of an ImageData object |
| data |
Returns an object that contains image data of a specified ImageData
object |
| Method |
Description |
| createImageData() |
Creates a new, blank ImageData object |
| getImageData() |
Returns an ImageData object that copies the pixel data for the
specified rectangle on a canvas |
| putImageData() |
Puts the image data (from a specified ImageData object) back onto the
canvas |
Compositing
| Property |
Description |
| globalAlpha |
Sets or returns the current alpha or transparency value of the
drawing |
| globalCompositeOperation |
Sets or returns how a new image are drawn onto an existing image |
Other
| Method |
Description |
| save() |
Saves the state of the current context |
| restore() |
Returns previously saved path state and attributes |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
HTML Audio/Video DOM Reference
HTML Audio and Video DOM Reference
The HTML5 DOM has methods, properties, and events for the <audio> and
<video> elements.
These methods, properties, and events allow you to manipulate <audio>
and <video> elements using JavaScript.
HTML Audio/Video Methods
| Method |
Description |
| addTextTrack() |
Adds a new text track to the audio/video |
| canPlayType() |
Checks if the browser can play the specified audio/video type |
| load() |
Re-loads the audio/video element |
| play() |
Starts playing the audio/video |
| pause() |
Pauses the currently playing audio/video |
HTML Audio/Video Properties
| Property |
Description |
| audioTracks |
Returns an AudioTrackList object representing available audio
tracks |
| autoplay |
Sets or returns whether the audio/video should start playing as soon as
it is loaded |
| buffered |
Returns a TimeRanges object representing the buffered parts of the
audio/video |
| controller |
Returns the MediaController object representing the current media
controller of the audio/video |
| controls |
Sets or returns whether the audio/video should display controls (like
play/pause etc.) |
| crossOrigin |
Sets or returns the CORS settings of the audio/video |
| currentSrc |
Returns the URL of the current audio/video |
| currentTime |
Sets or returns the current playback position in the audio/video (in
seconds) |
| defaultMuted |
Sets or returns whether the audio/video should be muted by default |
| defaultPlaybackRate |
Sets or returns the default speed of the audio/video playback |
| duration |
Returns the length of the current audio/video (in seconds) |
| ended |
Returns whether the playback of the audio/video has ended or not |
| error |
Returns a MediaError object representing the error state of the
audio/video |
| loop |
Sets or returns whether the audio/video should start over again when
finished |
| mediaGroup |
Sets or returns the group the audio/video belongs to (used to link
multiple audio/video elements) |
| muted |
Sets or returns whether the audio/video is muted or not |
| networkState |
Returns the current network state of the audio/video |
| paused |
Returns whether the audio/video is paused or not |
| playbackRate |
Sets or returns the speed of the audio/video playback |
| played |
Returns a TimeRanges object representing the played parts of the
audio/video |
| preload |
Sets or returns whether the audio/video should be loaded when the
page loads |
| readyState |
Returns the current ready state of the audio/video |
| seekable |
Returns a TimeRanges object representing the seekable parts of the
audio/video |
| seeking |
Returns whether the user is currently seeking in the audio/video |
| src |
Sets or returns the current source of the audio/video element |
| startDate |
Returns a Date object representing the current time offset |
| textTracks |
Returns a TextTrackList object representing the available text
tracks |
| videoTracks |
Returns a VideoTrackList object representing the available video
tracks |
| volume |
Sets or returns the volume of the audio/video |
HTML Audio/Video Events
| Event |
Description |
| abort |
Fires when the loading of an audio/video is aborted |
| canplay |
Fires when the browser can start playing the audio/video |
| canplaythrough |
Fires when the browser can play through the audio/video without
stopping for buffering |
| durationchange |
Fires when the duration of the audio/video is changed |
| emptied |
Fires when the current playlist is empty |
| ended |
Fires when the current playlist is ended |
| error |
Fires when an error occurred during the loading of an audio/video |
| loadeddata |
Fires when the browser has loaded the current frame of the
audio/video |
| loadedmetadata |
Fires when the browser has loaded meta data for the audio/video |
| loadstart |
Fires when the browser starts looking for the audio/video |
| pause |
Fires when the audio/video has been paused |
| play |
Fires when the audio/video has been started or is no longer paused |
| playing |
Fires when the audio/video is playing after having been paused or
stopped for buffering |
| progress |
Fires when the browser is downloading the audio/video |
| ratechange |
Fires when the playing speed of the audio/video is changed |
| seeked |
Fires when the user is finished moving/skipping to a new position in the
audio/video |
| seeking |
Fires when the user starts moving/skipping to a new position in the
audio/video |
| stalled |
Fires when the browser is trying to get media data, but data is not
available |
| suspend |
Fires when the browser is intentionally not getting media data |
| timeupdate |
Fires when the current playback position has changed |
| volumechange |
Fires when the volume has been changed |
| waiting |
Fires when the video stops because it needs to buffer the next
frame |
