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.

New Elements
New Attributes
Full CSS3 Support
Video and Audio
2D/3D Graphics
Local Storage
Local SQL Database
Web Applications

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

HTML 5 Tags

The following table provides a list of the tags supported in HTML 5 (officially written as HTML5 - without the space). This list is based on the HTML5 Working Draft as of February 2009.
The previous/current version of HTML is HTML 4.01. Here's a list of

Tag	Description	HTML5
<!--...-->	Specifies a comment
<!DOCTYPE>	Specifies the document type
<a>	Specifies a hyperlink
<abbr>	Specifies an abbreviation
<address>	Specifies an address element
<area>	Specifies an area inside an image map
<article>	Specifies an article
<aside>	Specifies content aside from the page content
<audio>	Specifies sound content
<b>	Specifies bold text
<base>	Specifies a base URL for all the links in a page
<bdi>	For bi-directional text formatting
<bdo>	Specifies the direction of text display
<blockquote>	Specifies a long quotation
<body>	Specifies the body element
<br>	Inserts a single line break
<button>	Specifies a push button
<canvas>	Define graphics
<caption>	Specifies a table caption
<cite>	Specifies a citation
<code>	Specifies computer code text
<col>	Specifies attributes for table columns
<colgroup>	Specifies groups of table columns
<command>	Specifies a command
<data>	Allows for machine-readable data to be provided
<datagrid>	Allows for an interactive representation of tree, list, or tabular data
<datalist>	Specifies an "autocomplete" dropdown list
<dd>	Specifies a definition description
<del>	Specifies deleted text
<details>	Specifies details of an element
<dfn>	Defines a definition term
<div>	Specifies a section in a document
<dl>	Specifies a definition list
<dt>	Specifies a definition term
<em>	Specifies emphasized text
<embed>	Specifies external application or interactive content
<eventsource>	Specifies a target for events sent by a server
<fieldset>	Specifies a fieldset
<figcaption>	Specifies caption for the figure element.
<figure>	Specifies a group of media content, and their caption
<footer>	Specifies a footer for a section or page
<form>	Specifies a form
<h1>	Specifies a heading level 1
<h2>	Specifies a heading level 2
<h3>	Specifies a heading level 3
<h4>	Specifies a heading level 4
<h5>	Specifies a heading level 5
<h6>	Specifies a heading level 6
<head>	Specifies information about the document
<header>	Specifies a group of introductory or navigational aids, including hgroup elements
<hgroup>	Specifies a header for a section or page
<hr>	Specifies a horizontal rule
<html>	Specifies an html document
<i>	Specifies italic text
<iframe>	Specifies an inline sub window (frame)
<img>	Specifies an image
<input>	Specifies an input field
<ins>	Specifies inserted text
<kbd>	Specifies keyboard text
<keygen>	Generates a key pair
<label>	Specifies a label for a form control
<legend>	Specifies a title in a fieldset
<li>	Specifies a list item
<link>	Specifies a resource reference
<mark>	Specifies marked text
<map>	Specifies an image map
<menu>	Specifies a menu list
<meta>	Specifies meta information
<meter>	Specifies measurement within a predefined range
<nav>	Specifies navigation links
<noscript>	Specifies a noscript section
<object>	Specifies an embedded object
<ol>	Specifies an ordered list
<optgroup>	Specifies an option group
<option>	Specifies an option in a drop-down list
<output>	Specifies some types of output
<p>	Specifies a paragraph
<param>	Specifies a parameter for an object
<pre>	Specifies preformatted text
<progress>	Specifies progress of a task of any kind
<q>	Specifies a short quotation
<ruby>	Specifies a ruby annotation (used in East Asian typography)
<rp>	Used for the benefit of browsers that don't support ruby annotations
<rt>	Specifies the ruby text component of a ruby annotation.
<s>	Indicates text that's no longer accurate or relevant.
<samp>	Specifies sample computer code
<script>	Specifies a script
<section>	Specifies a section
<select>	Specifies a selectable list
<small>	Specifies small text
<source>	Specifies media resources
<span>	Specifies a section in a document
<strong>	Specifies strong text
<style>	Specifies a style definition
<sub>	Specifies subscripted text
<summary>	Specifies a summary / caption for the <details> element
<sup>	Specifies superscripted text
<table>	Specifies a table
<tbody>	Specifies a table body
<td>	Specifies a table cell
<textarea>	Specifies a text area
<tfoot>	Specifies a table footer
<th>	Specifies a table header
<thead>	Specifies a table header
<time>	Specifies a date/time
<title>	Specifies the document title
<tr>	Specifies a table row
<track>	Specifies a text track for media such as video and audio
<u>	Specifies text with a non-textual annotation.
<ul>	Specifies an unordered list
<var>	Specifies a variable
<video>	Specifies a video
<wbr>	Specifies a line break opportunity for very long words and strings of text with no spaces.

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>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>
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, and the use of the internet, has changed a lot since HTML 4.01 became a standard in 1999.
Today, several elements in HTML 4.01 are obsolete, never used, or not used the way they were intended. All those elements are removed or re-written in HTML5.
To better handle today's internet use, HTML5 also includes new elements for drawing graphics, adding media content, better page structure, better form handling, and several APIs to drag/drop elements, find Geolocation, include web storage, application cache, web workers, etc.

The New <canvas> Element

Tag	Description
<canvas>	Used to draw graphics, on the fly, via scripting (usually JavaScript)

New Media Elements

Tag	Description
<audio>	Defines sound content
<video>	Defines a video or movie
<source>	Defines multiple media resources for <video> and <audio>
<embed>	Defines a container for an external application or interactive content (a plug-in)
<track>	Defines text tracks for <video> and <audio>

New Form Elements

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

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
<bdi>	Isolates a part of text that might be formatted in a different direction from 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
<dialog>	Defines a dialog box or window
<summary>	Defines a visible heading for a <details> element
<figure>	Specifies self-contained content, like illustrations, diagrams, photos, code 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
<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)
<rt>	Defines an explanation/pronunciation of characters (for East Asian 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

Removed Elements

The following HTML 4.01 elements are removed from HTML5:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

Canvas

The <canvas> element is used to draw graphics, on the fly, on a web page.

Draw a red rectangle, a gradient rectangle, a multicolor rectangle, and some multicolor text onto the canvas:

What is Canvas?

The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.

Browser Support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <canvas> element.
Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.

Create a Canvas

A canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element.
Note: By default, the <canvas> element has no border and no content.
The markup looks like this:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>

</body>
</html>

Draw Onto The Canvas With JavaScript

All drawing on the canvas must be done inside a JavaScript:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

</script>

</body>
</html>

Canvas Coordinates

The canvas is a two-dimensional grid.
The upper-left corner of the canvas has coordinate (0,0)
So, the fillRect() method above had the parameters (0,0,150,75).
This means: Start at the upper-left corner (0,0) and draw a 150x75 pixels rectangle.
Coordinates Example
Mouse over the rectangle below to see its x and y coordinates:

Canvas - Paths

To draw straight lines on a canvas, we will use the following two methods:

moveTo(x,y) defines the starting point of the line
lineTo(x,y) defines the ending point of the line

To actually draw the line, we must use one of the "ink" methods, like stroke().

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

</script>

</body>
</html>

Example

Create a circle with the arc() method:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

</script>

</body>
</html>

Canvas - Text

To draw text on a canvas, the most important property and methods are:

font - defines the font properties for text
fillText(text,x,y) - Draws "filled" text on the canvas
strokeText(text,x,y) - Draws text on the canvas (no fill)

Using fillText():

Example

Write a 30px high filled text on the canvas, using the font "Arial":

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

</script>

</body>
</html>

Example

Write a 30px high text (no fill) on the canvas, using the font "Arial":

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

</script>

</body>
</html>

Canvas - Gradients

Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited to solid colors.
There are two different types of gradients:

createLinearGradient(x,y,x1,y1) - Creates a linear gradient
createRadialGradient(x,y,r,x1,y1,r1) - Creates a radial/circular gradient

Once we have a gradient object, we must add two or more color stops.
The addColorStop() method specifies the color stops, and its position along the gradient. Gradient positions can be anywhere between 0 to 1.
To use the gradient, set the fillStyle or strokeStyle property to the gradient, and then draw the shape, like a rectangle, text, or a line.
Using createLinearGradient():

Example

Create a linear gradient. Fill rectangle with the gradient:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

</script>

</body>
</html>

Using createRadialGradient():

Example

Create a radial/circular gradient. Fill rectangle with the gradient:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

</script>

</body>
</html>

Canvas - Images

To draw an image on a canvas, we will use the following method:

drawImage(image,x,y)

Image to use:

Example

Draw the image onto the canvas:

<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

</script>

</body>
</html>

HTML Canvas Reference

For a complete reference of all the properties and methods that can be used with the Canvas object (with try-it examples on every property and method), go to our Canvas Reference.

The HTML <canvas> Tag

Tag	Description
<canvas>	Used to draw graphics, on the fly, via scripting (usually JavaScript)

HTML5 Inline SVG

HTML5 has support for inline SVG.

What is SVG?

SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the Web
SVG defines the graphics in XML format
SVG graphics do NOT lose any quality if they are zoomed or resized
Every element and every attribute in SVG files can be animated
SVG is a W3C recommendation

SVG Advantages

Advantages of using SVG over other image formats (like JPEG and GIF) are:

SVG images can be created and edited with any text editor
SVG images can be searched, indexed, scripted, and compressed
SVG images are scalable
SVG images can be printed with high quality at any resolution
SVG images are zoomable (and the image can be zoomed without degradation)

Browser Support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support inline SVG.

Embed SVG Directly Into HTML Pages

In HTML5, you can embed SVG elements directly into your HTML page:

Example

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

</body>
</html>

To learn more about SVG, please read our SVG Tutorial.

Differences Between SVG and Canvas

SVG is a language for describing 2D graphics in XML.
Canvas draws 2D graphics, on the fly (with a JavaScript).
SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.
In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.
Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

Comparison of Canvas and SVG

The table below shows some important differences between Canvas and SVG:

Canvas	SVG
Resolution dependent No support for event handlers Poor text rendering capabilities You can save the resulting image as .png or .jpg Well suited for graphic-intensive games	Resolution independent Support for event handlers Best suited for applications with large rendering areas (Google Maps) Slow rendering if complex (anything that uses the DOM a lot will be slow) Not suited for game applications

HTML5 Drag and Drop

Drag and drop is a part of the HTML5 standard.

Drag the W3Schools image into the rectangle.

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, Opera, Chrome, and Safari 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>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

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:

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)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

Code explained:

Call preventDefault() to prevent the browser default handling of the data (default is open as link on drop)
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

HTML5 Geolocation

HTML5 Geolocation is used to locate a user's position

Locate the User's Position

The HTML5 Geolocation API is used to get the geographical position of a user.
Since this can compromise user privacy, the position is not available unless the user approves it.

Browser Support

Internet Explorer 9+, Firefox, Chrome, Safari and Opera support Geolocation.
Note: Geolocation is much more accurate for devices with GPS, like iPhone.

HTML5 - Using Geolocation

Use the getCurrentPosition() method to get the user's position.
The example below is a simple Geolocation example returning the latitude and longitude of the user's position:

Example

Example explained:

Check if Geolocation is supported
If supported, run the getCurrentPosition() method. If not, display a message to the user
If the getCurrentPosition() method is successful, it returns a coordinates object to the function specified in the parameter ( showPosition )
The showPosition() function gets the displays the Latitude and Longitude

The example above is a very basic Geolocation script, with no error handling.

Handling Errors and Rejections

The second parameter of the getCurrentPosition() method is used to handle errors. It specifies a function to run if it fails to get the user's location:

Example

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function showError(error)
{
switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
}
</script>
</body>
</html>

Error Codes:

Permission denied - The user did not allow Geolocation
Position unavailable - It is not possible to get the current location
Timeout - The operation timed out

Displaying the Result in a Map

To display the result in a map, you need access to a map service that can use latitude and longitude, like Google Maps:

Example

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your position:</p>
<button onclick="getLocation()">Try It</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
else{x.innerHTML="Geolocation is not supported by this browser.";}
}

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;

var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}

function showError(error)
{
switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
}
</script>
</body>
</html>

In the example above we use the returned latitude and longitude data to show the location in a Google map (using a static image).
Google Map Script
How to use a script to show an interactive map with a marker, zoom and drag options.

Location-specific Information

This page demonstrated how to show a user's position on a map. However, Geolocation is also very useful for location-specific information.
Examples:

Up-to-date local information
Showing Points-of-interest near the user
Turn-by-turn navigation (GPS)

The getCurrentPosition() Method - Return Data

The getCurrentPosition() method returns an object if it is successful. The latitude, longitude and accuracy properties are always returned. The other properties below are returned if available.

Property	Description
coords.latitude	The latitude as a decimal number
coords.longitude	The longitude as a decimal number
coords.accuracy	The accuracy of position
coords.altitude	The altitude in meters above the mean sea level
coords.altitudeAccuracy	The altitude accuracy of position
coords.heading	The heading as degrees clockwise from North
coords.speed	The speed in meters per second
timestamp	The date/time of the response

Geolocation object - Other interesting Methods

watchPosition() - Returns the current position of the user and continues to return updated position as the user moves (like the GPS in a car).
clearWatch() - Stops the watchPosition() method.
The example below shows the watchPosition() method. You need an accurate GPS device to test this (like iPhone):

Example

HTML5 Video

Many modern websites show videos. HTML5 provides a standard for showing them.

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.

Browser Support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <video> element.
Note: Internet Explorer 8 and earlier versions, do not support the <video> element.

HTML5 Video - How It Works

To show a video in HTML5, this is all you need:

Example

<!DOCTYPE html>

<html>

<body>

Your browser does not support the video tag.

</video>

</body>

</html>

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	YES	NO	NO
Chrome	YES	YES	YES
Firefox	NO Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP4	YES	YES
Safari	YES	NO	NO
Opera	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

MIME Types for Video Formats

Format	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

HTML5 <video> - DOM Methods and Properties

HTML5 has DOM methods, properties, and events for the <video> and <audio> elements.
These methods, properties, and events allow you to manipulate <video> and <audio> elements using JavaScript.
There are methods for playing, pausing, and loading, for example and there are properties (like duration and volume). There are also DOM events that can notify you when the <video> element begins to play, is paused, is ended, etc.
The example below illustrate, in a simple way, how to address a <video> element, read and set properties, and call methods.

Example 1

Create simple play/pause + resize controls for a video:

The example above calls two methods: play() and pause(). It also uses two properties: paused and width.

<!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>
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>

For a full reference go to our HTML5 Audio/Video DOM Reference.

HTML5 Video Tags

Tag	Description
<video>	Defines a video or movie
<source>	Defines multiple media resources for media elements, such as <video> and <audio>
<track>	Defines text tracks in media players

HTML5 Audio

HTML5 provides a standard for playing audio files.

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.

Browser Support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <audio> element.
Note: Internet Explorer 8 and earlier versions, do not support the <audio> element.

HTML5 Audio - How It Works

To play an audio file in HTML5, this is all you need:

Example

<!DOCTYPE html>

<html>

<body>

Your browser does not support the audio element.

</audio>

</body>

</html>

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	YES	NO	NO
Chrome	YES	YES	YES
Firefox	NO Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3	YES	YES
Safari	YES	YES	NO
Opera	NO	YES	YES

MIME Types for Audio Formats

Format	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

HTML5 Audio Tags

Tag	Description
<audio>	Defines sound content
<source>	Defines multiple media resources for media elements, such as <video> and <audio>

HTML5 Input Types

HTML5 New Input Types

HTML5 has several new input types for forms. These new features allow better input control and validation.
This chapter covers the new input types:

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

Note: Not all major browsers support all the new input types. However, you can already start using them; If they are not supported, they will behave as regular text fields.

Input Type: color

The color type is used for input fields that should contain a color.

Example

<!DOCTYPE html>

<html>

<body>

Select your favorite color: <input type="color" name="favcolor"><br>

</form>

</body>

</html>

Input Type: date

The date type allows the user to select a date.

Example

<!DOCTYPE html>

<html>

<body>

Birthday: <input type="date" name="bday">

</form>

</body>

</html>

Input Type: datetime

The datetime type allows the user to select a date and time (with time zone).

Example

Define a date and time control (with time zone):

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
Birthday (date and time): <input type="datetime" name="bdaytime">
<input type="submit">
</form>

</body>
</html>

Input Type: datetime-local

The datetime-local type allows the user to select a date and time (no time zone).

Example

Define a date and time control (no time zone):

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
Birthday (date and time): <input type="datetime-local" name="bdaytime">
<input type="submit">
</form>

</body>
</html>

Input Type: email

The email type is used for input fields that should contain an e-mail address.

Example

Define a field for an e-mail address (will be automatically validated when submitted):

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
E-mail: <input type="email" name="email">
<input type="submit">
</form>

<p><b>Note:</b> type="email" is not supported in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Tip: Safari on iPhone recognizes the email type, and changes the on-screen keyboard to match it (adds @ and .com options).

Input Type: month

The month type allows the user to select a month and year.

Example

Define a month and year control (no time zone):

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
Birthday (month and year): <input type="month" name="bdaymonth">
<input type="submit">
</form>

</body>
</html>

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:

Example

Define a numeric field (with restrictions):

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>

<p><b>Note:</b> type="number" is not supported in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Use the following attributes to specify restrictions:

max - specifies the maximum value allowed
min - specifies the minimum value allowed
step - specifies the legal number intervals
value - Specifies the default value

Try an example with all the restriction attributes: Try it yourself

Input Type: range

The range type is used for input fields that should contain a value from a range of numbers.
You can also set restrictions on what numbers are accepted.

Example

Define a control for entering a number whose exact value is not important (like a slider control):

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
Points: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>

<p><b>Note:</b> type="range" is not supported in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Use the following attributes to specify restrictions:

max - specifies the maximum value allowed
min - specifies the minimum value allowed
step - specifies the legal number intervals
value - Specifies the default value

Input Type: search

The search type is used for search fields (a search field behaves like a regular text field).

Example

Define a search field (like a site search, or Google search):

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
Search Google: <input type="search" name="googlesearch"><br>
<input type="submit">
</form>

</body>
</html>

Friday, September 6, 2013

HTML5 Introduction

What is HTML5?

How Did HTML5 Get Started?

HTML 5 Tags

Related:

The HTML5 <!DOCTYPE>

Minimum HTML5 Document

HTML5 - New Features

Browser Support for HTML5

New Elements in HTML5

The New <canvas> Element

New Media Elements

New Form Elements

New Semantic/Structural Elements

Removed Elements

Canvas

What is Canvas?

Browser Support

Create a Canvas

Draw Onto The Canvas With JavaScript

Canvas Coordinates

Canvas - Paths

Example

Canvas - Text

Example

Example

Canvas - Gradients

Example

Example

Canvas - Images

Image to use:

Example

HTML Canvas Reference

The HTML <canvas> Tag

HTML5 Inline SVG

HTML5 has support for inline SVG.

What is SVG?

SVG Advantages

Browser Support

Embed SVG Directly Into HTML Pages

Example

Differences Between SVG and Canvas

Comparison of Canvas and SVG

HTML5 Drag and Drop

Drag and Drop

Browser Support

HTML5 Drag and Drop Example

Example

Make an Element Draggable

What to Drag - ondragstart and setData()

Where to Drop - ondragover

Do the Drop - ondrop

HTML5 Geolocation

Locate the User's Position

Browser Support

HTML5 - Using Geolocation

Example

Handling Errors and Rejections

Example

Displaying the Result in a Map

Example

Location-specific Information

The getCurrentPosition() Method - Return Data

Geolocation object - Other interesting Methods

Example

HTML5 Video

Video on the Web

Browser Support

HTML5 Video - How It Works

Example

Video Formats and Browser Support

MIME Types for Video Formats

HTML5 <video> - DOM Methods and Properties

Example 1

HTML5 Video Tags

HTML5 Audio

Audio on the Web

Browser Support

HTML5 Audio - How It Works