Hypertext Markup Language (HTML) is the underlying markup language of the World Wide Web. Its the common thread that ties together virtually every Web site, from largescale corporate sites such as Microsofts to single-page classroom projects at the local grade school.
Dont let the phrase markup language intimidate you. A markup language annotates or marks up plain text, letting a browser know how to format that text so it looks good
on a Web page. Its easy to get started, in fact, you can create a simple Web page in just a few minutes. While full-featured What You See Is What You Get (WYSIWYG) tools exist
that can help speed up the process of writing Web pages, all you really need is an ordinary text-editing program such as Microsoft Notepad. You dont need special software
or extensive training.
Some of the basic stuff you can do with HTML is turning plain text into attractive formatting, incorporating graphics and hyperlinks, and creating Web content in virtually any program that edits text.
What is HTML? In simple terms, a Web page (or HTML document) is a plain text file that has been encoded using Hypertext Markup Language (HTML) so that it appears nicely formatted
in a Web browser. Here is what HTML means, word-by-word:
1-Hypertext Text that you click to jump from document to document. This is a reference to the ability of Web pages to link to one another.
2-Markup Tags that apply layout and formatting conventions to plain text. Literally, the plain text is marked up with the tags.
3-Language A reference to the fact that HTML is considered a programming language.
HTML5 will be the new standard for HTML, XHTML, and the HTML
DOM.
The previous version of HTML came in 1999. The web has changed a
lot since then.
HTML5 is still a work in progress. However, most modern browsers
have some HTML5 support.
How Did HTML5 Get Started?
HTML5 is cooperation between the World Wide Web Consortium
(W3C) and the Web Hypertext Application Technology Working Group
(WHATWG).
WHATWG was working with web forms and applications, and W3C
was working with XHTML 2.0. In 2006, they decided to cooperate and
create a new version of HTML.
Some rules for HTML5 were established:
1-New features should be based on HTML, CSS, DOM, and
JavaScript
2-Reduce the need for external plugins (like Flash)
3-Better error handling
4-More markup to replace scripting
5-HTML5 should be device independent
6-The development process should be visible to the public
New Features:
Some of the most interesting new features in HTML5:
1-The canvas element for drawing
2-The video and audio elements for media playback
3-Better support for local offline storage
4-New content specific elements, like article, footer, header, nav,
section
5-New form controls, like calendar, date, time, email, url, search
Browser Support:
HTML5 is not yet an official standard, and no browsers have full
HTML5 support.
But all major browsers (Safari, Chrome, Firefox, Opera, and Internet
Explorer) continue to add new HTML5 features to their latest versions.
New Elements in HTML5:
The internet has changed a lot since HTML 4.01 became a standard in
1999. Today, some elements in HTML 4.01 are obsolete, never used, or not
used the way they were intended to. These elements are deleted or rewritten in HTML5.
To better handle todays internet use, HTML5 also includes new
elements for better structure, drawing, media content, and better
form handling.
New Markup Elements:
New elements for better structure
<article> For external content, like text from a news-article,
blog, forum, or any other content from an external
source <aside> For content aside from the content it is placed in.
The aside content should be related to the
surrounding content <bdi> For text that should not be bound to the text-direction of its parent elements <command> A button, or a radiobutton, or a checkbox
details for describing details about a document, or parts
of a document <details> For describing details about a document, or parts of a document <summary> A caption, or summary, inside the details element <figure> For grouping a section of stand-alone content,
could be a video <figcaption> The caption of the figure section <footer> For a footer of a document or section, could
include the name of the author, the date of the
document, contact information, or copyright
information <header> For an introduction of a document or section, could
include navigation <hgroup> For a section of headings, using h1 to h6,
where the largest is the main heading of the
section, and the others are sub-headings <mark> For text that should be highlighted <meter> For a measurement, used only if the maximum and
minimum values are known <nav> For a section of navigation <progress> The state of a work in progress <ruby> For ruby annotation (Chinese notes or characters) <rt> For explanation of the ruby annotation <rp> What to show browsers that do not support the
ruby element <section> For a section in a document. Such as chapters,
headers, footers, or any other sections of the
document <time> For defining a time or a date, or both <wbr> Word break. For defining a line-break opportunity.
New Media Elements
HTML5 provides a new standard for media content:
<audio> For multimedia content, sounds, music or other
audio streams <video> For video content, such as a movie clip or other
video streams <source> For media resources for media elements, defined
inside video or audio elements <embed> For embedded content, such as a plug-in <track> For text tracks used in mediaplayers
The Canvas Element:
The canvas element uses JavaScript to make drawings on a web page.
<canvas> For making graphics with a script
New Form Elements
HTML5 offers more form elements, with more functionality:
<datalist> A list of options for input values <keygen> Generate keys to authenticate users <output> For different types of output, such as output written
by a script
New Input Type Attribute Values:
Also, the input element's type attribute has many new values, for
better input control before sending it to the server:
<tel> The input value is of type telephone number <search> The input field is a search field <url> The input value is a URL <email> The input value is one or more email addresses <datetime>: The input value is a date and/or time <date> The input value is a date <month> The input value is a month <week> The input value is a week <time> The input value is of type time <datetimelocal> The input value is a local date/time <number> The input value is a number <range> The input value is a number in a given range <color> The input value is a hexadecimal color, like #FF8800 <placeholder> Specifies a short hint that describes the expected value of an input field
HTML5 Video:
Video on the Web
Until now, there has never been a standard for showing video on a web
page. Today, most videos are shown through a plugin (like flash). However,
not all browsers have the same plugins. HTML5 specifies a standard way to include video, with the video
element.
Video Formats:
Currently, there are 3 supported video formats for the video element:
Ogg = Ogg files with Theora video codec and Vorbis audio codec
MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec
WebM = WebM files with VP8 video codec and Vorbis audio codec
Attribute: <audio> Value: muted. Defining the default state of the
the audio. Currently, only "muted"
is allowed
Attribute: <autoplay> Value: autoplay. If present, then the video will start
playing as soon as it is ready
Attribute: <controls> Value: controls. If present, controls will be
displayed, such as a play button
Attribute: <height> Value: pixels. Sets the height of the video player
Attribute: <loop> Value: loop. If present, the video will start over
again, every time it is finished
Attribute: <poster> Value: url. Specifies the URL of an image
representing the video
Attribute: <preload> Value: preload. If present, the video will be loaded
at page load, and ready to run. Ignored if "autoplay" is present
Attribute: <src> Value: url. The URL of the video to play
width pixels Sets the width of the video player
HTML5 Audio:
Audio on the Web
Until now, there has never been a standard for playing audio on a web
page. Today, most audio are played through a plugin (like flash). However,
not all browsers have the same plugins. HTML5 specifies a standard way to include audio, with the audio
element. The audio element can play sound files, or an audio stream.
Audio Formats:
Currently, there are 3 supported formats for the audio element:
Attribute: <autoplay> Value: autoplay. Specifies that the audio will start
playing as soon as it is ready.
Attribute: <controls> Value: controls. Specifies that controls will be
displayed, such as a play button.
Attribute: <loop> Value: loop. Specifies that the audio will start
playing again (looping) when it
reaches the end
Attribute: <preload> Value: preload. Specifies that the audio will be loaded
at page load, and ready to run. Ignored if autoplay is present.
Attribute: <src> Value: url. Specifies the URL of the audio to play.
HTML5 Canvas:
The canvas element is used to draw graphics on a web page.
What is Canvas?
The HTML5 canvas element uses JavaScript to draw graphics on a web
page. A canvas is a rectangular area, and you control every pixel of it.
The canvas element has several methods for drawing paths, boxes,
circles, characters, and adding images.
Create a Canvas Element:
Add a canvas element to the HTML5 page. Specify the id, width, and height of the element:
The canvas element has no drawing abilities of its own. All drawing
must be done inside a JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript uses the id to find the canvas element:
var c=document.getElementById("myCanvas");
Then, create a context object:
var cxt=c.getContext("2d");
The getContext("2d") object is a built-in HTML5 object, with many
methods to draw paths, boxes, circles, characters, images and more.
The next two lines draws a red rectangle:
The fillStyle method makes it red, and the fillRect method specifies
the shape, position, and size.
Understanding Coordinates
The fillRect method above had the parameters (0,0,150,75). This means: Draw a 150x75 rectangle on the canvas, starting at the top left corner (0,0).
The canvas' X and Y coordinates are used to position drawings on the canvas.
HTML5 Input Types:
HTML5 New Input Types
HTML5 has several new input types for forms. These new features allow for better input control and validation. This chapter covers the new input types:
Note: Opera has the best support for the new input types. However,
you can already start using them in all major browsers. If they are not
supported, they will behave as regular text fields.
Input Type - email:
The email type is used for input fields that should contain an e-mail
address. The value of the email field is automatically validated when the form is
submitted.
Example:
E-mail: <input type="email" name="user_email" />
Tip: Safari on the iPhone recognizes the email input type, and changes the on-screen keyboard to match it (adds @ and .com options).
Input Type - url:
The url type is used for input fields that should contain a URL address.
The value of the url field is automatically validated when the form is
submitted.
Example:
Homepage: <input type="url" name="user_url" />
Tip: Safari on the iPhone recognizes the url input type, and changes
the on-screen keyboard to match it (adds .com option).
Input Type - number:
The number type is used for input fields that should contain a numeric
value. You can also set restrictions on what numbers are accepted:
Use the following attributes to specify restrictions for the number
type:
Attribute: <max> Value: number. Specifies the maximum value allowed
Attribute: <min> Value: number. Specifies the minimum value allowed
Attribute: <step> Value: number. Specifies legal number intervals (if
step="3", legal numbers could be -
3,0,3,6, etc)
Attribute: <value> Value: number. Specifies the default value
Tip: Safari on the iPhone recognizes the number input type, and
changes the on-screen keyboard to match it (shows numbers).
Input Type - range:
The range type is used for input fields that should contain a value from
a range of numbers. The range type is displayed as a slider bar.
You can also set restrictions on what numbers are accepted:
Use the following attributes to specify restrictions for the range type:
Attribute: <max> Value: number. Specifies the maximum value allowed
Attribute: <min> Value: number. Specifies the minimum value allowed
Attribute: <step> Value: number. Specifies legal number intervals (if
step="3", legal numbers could be - 3,0,3,6, etc)
Attribute: <value> Value: number. Specifies the default value
Input Type - Date Pickers:
The following example allows you to select a date from a calendar:
Example:
Date: <input type="date" name="user_date" />
Input Type - color:
The color type is used for input fields that should contain a color.
This input type will allow you to select a color from a color picker:
Example:
Color: <input type="color" name="user_color" />
HTML5 Form Elements:
HTML5 New Form Elements:
HTML5 has several new elements and attributes for forms.
This chapter covers the new form elements:
The datalist element specifies a list of options for an input field.
The list is created with option elements inside the datalist.
To bind a datalist to an input field, let the list attribute of the input
field refer to the id of the datalist:
Tip: The option elements should always have a value attribute.
keygen Element:
The purpose of the keygen element is to provide a secure way to
authenticate users. The keygen element is a key-pair generator. When a form is
submitted, two keys are generated, one private and one public.
The private key is stored on the client, and the public key is sent to the
server. The public key could be used to generate a client certificate to
authenticate the user in the future.
Currently, the browser support for this element is not good enough to
be a useful security standard.
The autocomplete attribute specifies that the form or input field
should have an autocomplete function. Note: The autocomplete attribute works with <form>, and the
following <input> types: text, search, url, telephone, email, password,
datepickers, range, and color. When the user starts to type in an autocomplete field, the browser
should display options to fill in the field:
Note: In some browsers you may need to activate the autocomplete
function for this to work.
autofocus Attribute:
The autofocus attribute specifies that a field should automatically get
focus when a page is loaded.
Note: The autofocus attribute works with all <input> types.
Example:
User name: <input type="text"
name="user_name" autofocus="autofocus" />
form Attribute
The form attribute specifies one or more forms the input field belongs to. Note: The form attribute works with all <input> types. The form attribute must refer to the id of the form it belongs to:
Example:
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />
Note: To refer to more than one form, use a space-separated list.
Form Override Attributes:
The form override attributes allow you to override some of the attributes set for the form element.
The form override attributes are:
<formaction> - Overrides the form action attribute <formenctype> - Overrides the form enctype attribute <formmethod> - Overrides the form method attribute <formnovalidate> - Overrides the form novalidate attribute <formtarget> - Overrides the form target attribute
Note: The form override attributes works with the following <input>
Note: These attributes are helpful for creating different submit
buttons.
height and width Attributes
The height and width attributes specifies the height and width of the
image used for the input type image. Note: The height and width attributes only works with <input> type:
image.
The list attribute specifies a datalist for an input field. A datalist is a list
of options for an input field. Note: The list attribute works with the following <input> types: text,
search, url, telephone, email, date pickers, number, range, and color.
The min, max and step attributes are used to specify restrictions for
input types containing numbers or dates.
The max attribute specifies the maximum value allowed for the input
field.
The min attribute specifies the minimum value allowed for the input
field.
The step attribute specifies the legal number intervals for the input
field (if step="3", legal numbers could be -3,0,3,6, etc).
Note: The min, max, and step attributes works with the following
<input> types: date pickers, number, and range.
The example below shows a numeric field that accepts values between
0 and 10, with a step of 3 (legal numbers are 0, 3, 6 and 9):
The multiple attribute specifies that multiple values can be selected for
an input field. Note: The multiple attribute works with the following <input> types:
email, and file. Example:
The novalidate attribute specifies that the form or input field should
not be validated when submitted.
If this attribute is present the form will not validate form input.
Note: The novalidate attribute works with: <form> and the following
<input> types: text, search, url, telephone, email, password, date
pickers, range, and color.
The pattern attribute specifies a pattern used to validate an input field.
The pattern is a regular expression.
Note: The pattern attribute works with the following <input> types:
text, search, url, telephone, email, and password. The example below shows a text field that can only contain three
letters (no numbers or special characters):
Example:
Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
placeholder Attribute:
The placeholder attribute provides a hint that describes the expected
value of an input field.
Note: The placeholder attribute works with the following <input>
types: text, search, url, telephone, email, and password
The hint is displayed in the input field when it is empty, and disappears
when the field gets focus:
The required attribute specifies that an input field must be filled out
before submitting.
Note: The required attribute works with the following <input> types:
text, search, url, telephone, email, password, date pickers, number,
checkbox, radio, and file. Example:
Other HTML5 Tags and their corresponding descriptions:
<!--...--> Defines a comment
<!DOCTYPE> Defines the document type
<a> Defines a hyperlink
<abbr> Defines an abbreviation
<acronym> Not supported in HTML5
<address> Defines contact information for the author/owner of a document/article
<applet> Not supported in HTML5
<area> Defines an area inside an image-map
<article>New Defines an article
<aside>New Defines content aside from the page content
<audio>New Defines sound content
<b> Defines bold text
<base> Specifies the base URL/target for all relative URLs in a document
<basefont> Not supported in HTML5
<bdi>New Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo> Overrides the current text direction
<big> Not supported in HTML5
<blockquote> Defines a section that is quoted from another source
<body> Defines the documents body
<br> Defines a single line break
<button> Defines a clickable button
<canvas>New Used to draw graphics, on the fly, via scripting (usually JavaScript)
<caption> Defines a table caption
<center> Not supported in HTML5
<cite> Defines the title of a work
<code> Defines a piece of computer code
<col> Specifies column properties for each column within a
element
<colgroup> Specifies a group of one or more columns in a table for formatting
<command>New Defines a command button that a user can invoke
<datalist>New Specifies a list of pre-defined options for input controls
<dd> Defines a description of an item in a definition list
<del> Defines a text that has been deleted from a document
<details>New Defines additional details that the user can view or hide
<dfn> Defines a definition term
<dir> Not supported in HTML5
<div> Defines a section in a document
<dl> Defines a definition list
<dt> Defines a term (an item) in a definition list
<em> Defines emphasized text
<embed>New Defines a container for an external application or interactive content (a plug-in)
<fieldset> Groups related elements in a form
<figcaption>New Defines the caption of a figure element
<figure>New Defines a group of media content, and their caption
<font> Not supported in HTML5
<footer>New Defines a footer for a section or page
<form> Defines an HTML form for user input
<frame> Not supported in HTML5
<frameset> Not supported in HTML5
<h1> to <h6> Defines HTML headings
<head> Defines information about the document
<header>New Defines a header for a section or page
<hgroup>New Defines information about a section in a document
<hr> Defines a horizontal line
<html> Defines an HTML document
<i> Defines italic text
<iframe> Defines an inline frame
<img> Defines an image
<input> Defines an input control
<ins> Defines a text that has been inserted into a document
<keygen>New Defines a key-pair generator field (for forms)
<kbd> Defines keyboard input
<label> Defines a label for an input element
<legend> Defines a caption for a <fieldset>, <figure>, or <details> element
<li> Defines a list item
<link> Defines the relationship between a document and an external resource (most used to link to style sheets)
<map> Defines a client-side image-map
<mark>New Defines marked text
<menu> Defines a list/menu of commands
<meta> Defines metadata about an HTML document
<meter>New Defines a scalar measurement within a known range (a gauge)
<nav>New Defines navigation links
<noframes> Not supported in HTML5
<noscript> Defines an alternate content for users that do not support client-side scripts
<object> Defines an embedded object
<ol> Defines an ordered list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<output>New Defines the result of a calculation
<p> Defines a paragraph
<param> Defines a parameter for an object
<pre> Defines preformatted text
<progress>New Represents the progress of a task
<q> Defines a short quotation
<rp>New Defines what to show in browsers that not support ruby annotations
<rt>New Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby>New Defines a ruby annotation (for East Asian typography)
<s> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<script> Defines a client-side script
<section>New Defines a section in a document
<select> Defines a drop-down list
<small> Defines smaller text
<source>New Defines multiple media resources for media elements (<video> and <audio>)
<span> Defines a section in a document
<strike> Not supported in HTML5
<strong> Defines important text
<style> Defines style information for a document
<sub> Defines subscripted text
<summary>New Defines a visible heading for a <details> element
<sup> Defines superscripted text
<table> Defines a table
<tbody> Groups the body content in a table
<td> Defines a cell in a table
<textarea> Defines a multiline input control (text area)
<tfoot> Groups the footer content in a table
<th> Defines a header cell in a table
<thead> Groups the header content in a table
<time>New Defines a date/time
<title> Defines a title for the document
<tr> Defines a row in a table
<track>New Defines text tracks for media elements (<video> and <audio>)
<tt> Not supported in HTML5
<u> Not supported in HTML5
<ul> Defines an unordered list
<var> Defines a variable
<video>New Defines a video or movie
<wbr>New Defines a possible line-break
<xmp> Not supported in HTML5
Other HTML5 Global Attributes and their corresponding Values and Descriptions:
Attribute: accesskey. Value: character. Specifies a shortcut key to access an element
Attribute: class. Value: classname. Refers to a class specified in a style sheet
Attribute: contenteditable (New). Value: true, false, inherit. Specifies whether a user can edit the content of an element or not
Attribute: contextmenu (New). Value: menu_id. Specifies a context menu for an element. The value must be the id of a <menu> element
Attribute: dir. Value: ltr, rtl, auto. Specifies the text direction for the content in an element
Attribute: draggable (New). Value: true, false, auto. Specifies whether a user is allowed to drag an element or not
Attribute: dropzone (New). Value: copy, move, link. Specifies what happens when dragged items/data is dropped in the element
Attribute: hidden (New). Value: hidden. Specifies that an element should be hidden
Attribute: id. Value: id. Specifies a unique id for an element
Attribute: lang. Value: language_code. Specifies the language of the elements content
Attribute: spellcheck (New). Value: true, false. Specifies if the element must have its spelling and grammar checked
Attribute: style. Value: style_definitions. Specifies an inline style for an element
Attribute: tabindex. Value: number. Specifies the tab order of an element
Attribute: title. Value: text. Specifies extra information about an element
Window Event Attributes
Events triggered for the window object (applies to the <body> tag):
Attribute: onafterprint (New). Value: script. Script to be run after the document is printed
Attribute: onbeforeprint (New). Value: script. Script to be run before the document is printed
Attribute: onbeforeonload (New). Value: script. Script to be run before the document loads
Attribute: onblur. Value: script. Script to be run when the window loses focus
Attribute: onerror (New). Value: script. Script to be run when an error occur
Attribute: onfocus. Value: script. Script to be run when the window gets focus
Attribute: onhaschange (New). Value: script. Script to be run when the document has changed
Attribute: onload. Value: script. Script to be run when the document loads
Attribute: onmessage (New). Value: script. Script to be run when the message is triggered
Attribute: onoffline (New). Value: script. Script to be run when the document goes offline
Attribute: ononline (New). Value: script. Script to be run when the document comes online
Attribute: onpagehide (New). Value: script. Script to be run when the window is hidden
Attribute: onpageshow (New). Value: script. Script to be run when the window becomes visible
Attribute: onpopstate (New). Value: script. Script to be run when the windows history changes
Attribute: onredo (New). Value: script. Script to be run when the document performs a redo
Attribute: onresize (New). Value: script. Script to be run when the window is resized
Attribute: onstorage (New). Value: script. Script to be run when the document loads
Attribute: onundo (New). Value: script. Script to be run when the document performs an undo
Attribute: onunload (New). Value: script. Script to be run when the user leaves the document
Form Events:
Events triggered by actions inside a HTML form (applies to all HTML5 elements, but is most common in form elements):
Attribute: onblur. Value: script. Script to be run when an element loses focus
Attribute: onchange. Value: script. Script to be run when an element changes
Attribute: oncontextmenu (New). Value: script. Script to be run when a context menu is triggered
Attribute: onfocus. Value: script. Script to be run when an element gets focus
Attribute: onformchange (New). Value: script. Script to be run when a form changes
Attribute: onforminput (New). Value: script. Script to be run when a form gets user input
Attribute: oninput (New). Value: script. Script to be run when an element gets user input
Attribute: oninvalid (New). Value: script. Script to be run when an element is invalid
Attribute: onreset. Value: script. Script to be run when a form is reset (Not supported in HTML5)
Attribute: onselect. Value: script. Script to be run when an element is selected
Attribute: onsubmit. Value: script. Script to be run when a form is submitted
Keyboard Events:
Events triggered by a keyboard (applies to all HTML5 elements):
Attribute: onkeydown. Value: script. Script to be run when a key is pressed down
Attribute: onkeypress. Value: script. Script to be run when a key is pressed and released
Attribute: onkeyup. Value: script. Script to be run when a key is released
Mouse Events
Events triggered by a mouse, or similar user actions (applies to all HTML5 elements):
Attribute: onclick. Value: script. Script to be run on a mouse click
Attribute: ondblclick. Value: script. Script to be run on a mouse double-click
Attribute: ondrag (New). Value: script. Script to be run when an element is dragged
Attribute: ondragend (New). Value: script. Script to be run at the end of a drag operation
Attribute: ondragenter (New). Value: script. Script to be run when an element has been dragged to a valid drop target
Attribute: ondragleave (New). Value: script. Script to be run when an element leaves a valid drop target
Attribute: ondragover (New). Value: script. Script to be run when an element is being dragged over a valid drop target
Attribute: ondragstart (New). Value: script. Script to be run at the start of a drag operation
Attribute: ondrop (New). Value: script. Script to be run when dragged element is being dropped
Attribute: onmousedown. Value: script. Script to be run when a mouse button is pressed
Attribute: onmousemove. Value: script. Script to be run when the mouse pointer moves
Attribute: onmouseout. Value: script. Script to be run when the mouse pointer moves out of an element
Attribute: onmouseover. Value: script. Script to be run when the mouse pointer moves over an element
Attribute: onmouseup. Value: script. Script to be run when a mouse button is released
Attribute: onmousewheel (New). Value: script. Script to be run when the mouse wheel is being rotated
Attribute: onscrollNew. Value: script. Script to be run when an elements scrollbar is being scrolled
Media Events:
Events triggered by medias like videos, images and audio (applies to all HTML5 elements, but is most common in media elements, like audio, embed, img, object, and video):
Attribute: onabort. Value: script. Script to be run on abort
Attribute: oncanplay (New). Value: script. Script to be run when a file is ready to start playing (when it has buffered enough to begin)
Attribute: oncanplaythrough (New). Value: script. Script to be run when a file can be played all the way to the end without pausing for buffering
Attribute: ondurationchange (New). Value: script. Script to be run when the length of the media changes
Attribute: onemptied (New). Value: script. Script to be run when something bad happens and the file is suddenly unavailable (like unexpectedly disconnects)
Attribute: onended (New). Value: script. Script to be run when the media has reach the end (a useful event for messages like thanks for listening)
Attribute: onerror (New). Value: script. Script to be run when an error occurs when the file is being loaded
Attribute: onloadeddata (New). Value: script. Script to be run when media data is loaded
Attribute: onloadedmetadata (New). Value: script. Script to be run when meta data (like dimensions and duration) are loaded
Attribute: onloadstart (New). Value: script. Script to be run just as the file begins to load before anything is actually loaded
Attribute: onpause (New). Value: script. Script to be run when the media is paused either by the user or programmatically
Attribute: onplay (New). Value: script. Script to be run when the media is ready to start playing
Attribute: onplaying (New). Value: script. Script to be run when the media actually has started playing
Attribute: onprogress (New). Value: script. Script to be run when the browser is in the process of getting the media data
Attribute: onratechange (New). Value: script. Script to be run each time the playback rate changes (like when a user switches to a slow motion or fast forward mode)
Attribute: onreadystatechange (New). Value: script. Script to be run each time the ready state changes (the ready state tracks the state of the media data)
Attribute: onseeked (New). Value: script. Script to be run when the seeking attribute is set to false indicating that seeking has ended
Attribute: onseeking (New). Value: script. Script to be run when the seeking attribute is set to true indicating that seeking is active
Attribute: onstalled (New). Value: script. Script to be run when the browser is unable to fetch the media data for whatever reason
Attribute: onsuspend (New). Value: script. Script to be run when fetching the media data is stopped before it is completely loaded for whatever reason
Attribute: ontimeupdate (New). Value: script. Script to be run when the playing position has changed (like when the user fast forwards to a different point in the media)
Attribute: onvolumechange (New). Value: script. Script to be run each time the volume is changed which (includes setting the volume to mute)
Attribute: onwaiting (New). Value: script. Script to be run when the media has paused but is expected to resume (like when the media pauses to buffer more data)
