HTML 5
Example
<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
</body>
</html>
What is HTML5?
HTML5 will be the new standard for HTML.
The previous version of HTML, HTML 4.01, came in 1999. The web has changed a lot since
then.
HTML5 is still a work in progress. However, the major browsers support many of the new
HTML5 elements and APIs.
How Did HTML5 Get Started?
HTML5 is a 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:
New features should be based on HTML, CSS, DOM, and JavaScript
Reduce the need for external plugins (like Flash)
Better error handling
More markup to replace scripting
HTML5 should be device independent
The development process should be visible to the public
The HTML5 <!DOCTYPE>
In HTML5 there is only one <!doctype> declaration, and it is very simple:
<!DOCTYPE html>
Minimum HTML5 Document
Below is a simple HTML5 document, with the minimum of required tags:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML5 - New Features
Some of the most interesting new features in HTML5:
The <canvas> element for 2D drawing
The <video> and <audio> elements for media playback
Support for local storage
New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
New form controls, like calendar, date, time, email, url, search
Browser Support for HTML5
HTML5 is not yet an official standard, and no browsers have full HTML5 support.
But all major browsers (Safari, Chrome, Firefox, Opera, 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 removed or re-written in HTML5.
To better handle today's internet use, HTML5 includes new elements for better structure,
better form handling, drawing, and for media content.
New Semantic/Structural Elements
HTML5 offers new elements for better structure:
Tag Description
<article> Defines an article
<aside> Defines content aside from the page content
Isolates a part of text that might be formatted in a different direction from
<bdi>
other text outside it
<command> Defines a command button that a user can invoke
<details> Defines additional details that the user can view or hide
<summary> Defines a visible heading for a <details> element
Specifies self-contained content, like illustrations, diagrams, photos, code
<figure>
listings, etc.
<figcaption> Defines a caption for a <figure> element
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<ruby> Defines a ruby annotation (for East Asian typography)
Defines an explanation/pronunciation of characters (for East Asian
<rt>
typography)
<rp> Defines what to show in browsers that do not support ruby annotations
<section> Defines a section in a document
<time> Defines a date/time
<wbr> Defines a possible line-break
New Media Elements
HTML5 offers new elements for media content:
Tag Description
<audio> Defines sound content
<video> Defines a video or movie
<source> Defines multiple media resources for <video> and <audio>
Defines a container for an external application or interactive content (a plug-
<embed>
in)
<track> Defines text tracks for <video> and <audio>
The new <canvas> Element
Tag Description
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
New Form Elements
HTML5 offers new form elements, for more functionality:
Tag Description
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation
Removed Elements
The following HTML 4.01 elements are removed from HTML5:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
<u>
Video on the Web
Until now, there has not been a standard for showing a video/movie on a web page.
Today, most videos are shown through a plug-in (like flash). However, different browsers
may have different plug-ins.
HTML5 defines a new element which specifies a standard way to embed a video/movie on a
web page: the <video> element.
HTML5 Video - How It Works
To show a video in HTML5, this is all you need:
Example
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
Try it yourself »
The control attribute adds video controls, like play, pause, and volume.
It is also a good idea to always include width and height attributes. If height and width are set,
the space required for the video is reserved when the page is loaded. However, without these
attributes, the browser does not know the size of the video, and cannot reserve the appropriate
space to it. The effect will be that the page layout will change during loading (while the video
loads).
You should also insert text content between the <video> and </video> tags for browsers that
do not support the <video> element.
The <video> element allows multiple <source> elements. <source> elements can link to
different video files. The browser will use the first recognized format.
Video Formats and Browser Support
Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and
Ogg:
Browser MP4 WebM Ogg
Internet Explorer 9 YES NO NO
Firefox 4.0 NO YES YES
Google Chrome 6 YES YES YES
Apple Safari 5 YES NO NO
Opera 10.6 NO YES YES
MP4 = MPEG 4 files with H264 video codec and AAC audio codec
WebM = WebM files with VP8 video codec and Vorbis audio codec
Ogg = Ogg files with Theora video codec and Vorbis audio codec
HTML5 Video Tags
Tag Description
<video> Defines a video or movie
Defines multiple media resources for media elements, such as <video>
<source>
and <audio>
<track> Defines text tracks in mediaplayers
HTML5 <video> - Take Control Using the DOM
The HTML5 <video> element also has methods, properties, and events.
There are methods for playing, pausing, and loading, for example. There are properties (e.g.
duration, volume, seeking) that you can read or set. There are also DOM events that can
notify you, for example, when the <video> element begins to play, is paused, is ended, etc.
The examples below illustrate, in a simple way, how to address a <video> element, read and
set properties, and call methods.
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br />
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4" />
<source src="mov_bbb.ogg" type="video/ogg" />
Your browser does not support HTML5 video.
</video>
</div>
<script type="text/javascript">
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
<p>Video courtesy of <a href="http://www.bigbuckbunny.org/"
target="_blank">Big Buck Bunny</a>.</p>
</body>
</html>
HTML5 <video> - Methods, Properties, and Events
The table below lists the video methods, properties, and events supported by most browsers:
Methods Properties Events
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error
duration timeupdate
ended ended
error abort
paused empty
muted emptied
seeking waiting
volume loadedmetadata
height
width
Note: Of the video properties, only videoWidth and videoHeight are immediately available.
The other properties are available after the video's meta data has loaded.
Audio on the Web
Until now, there has not been a standard for playing audio files on a web page.
Today, most audio files are played through a plug-in (like flash). However, different browsers
may have different plug-ins.
HTML5 defines a new element which specifies a standard way to embed an audio file on a
web page: the <audio> element.
HTML5 Audio - How It Works
To play an audio file in HTML5, this is all you need:
Example
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
Try it yourself »
The control attribute adds audio controls, like play, pause, and volume.
You should also insert text content between the <audio> and </audio> tags for browsers that
do not support the <audio> element.
The <audio> element allows multiple <source> elements. <source> elements can link to
different audio files. The browser will use the first recognized format.
Audio Formats and Browser Support
Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg:
Browser MP3 Wav Ogg
Internet Explorer 9 YES NO NO
Firefox 4.0 NO YES YES
Google Chrome 6 YES YES YES
Apple Safari 5 YES YES NO
Opera 10.6 NO YES YES
HTML5 Audio Tags
Tag Description
<audio> Defines sound content
Defines multiple media resources for media elements, such as <video>
<source>
and <audio>
Drag and Drop
Drag and drop is a very common feature. It is when you "grab" an object and drag it to a
different location.
In HTML5, drag and drop is part of the standard, and any element can be draggable.
Browser Support
Internet Explorer 9, Firefox, Chrome, and Safari 5 support drag and drop.
Note: Drag and drop does not work in Safari 5.1.2.
HTML5 Drag and Drop Example
The example below is a simple drag and drop example:
Example
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>
Try it yourself »
It might seem complicated, but lets go through all the different parts of a drag and drop event.
Make an Element Draggable
First of all: To make an element draggable, set the draggable attribute to true:
<img draggable="true" />
What to Drag - ondragstart and setData()
Then, specify what should happen when the element is dragged.
In the example above, the ondragstart attribute calls a function, drag(event), that specifies
what data to be dragged.
The dataTransfer.setData() method sets the data type and the value of the dragged data:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
In this case, the data type is "Text" and the value is the id of the draggable element ("drag1").
Where to Drop - ondragover
The ondragover event specifies where the dragged data can be dropped.
By default, data/elements cannot be dropped in other elements. To allow a drop, we must
prevent the default handling of the element.
This is done by calling the event.preventDefault() method for the ondragover event:
event.preventDefault()
Do the Drop - ondrop
When the dragged data is dropped, a drop event occurs.
In the example above, the ondrop attribute calls a function, drop(event):
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
Code explained:
Get the dragged data with the dataTransfer.getData("Text") method. This method will
return any data that was set to the same type in the setData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into the drop element
Call preventDefault() to prevent the browser default handling of the data
(default is open as link on drop)
