Basics of HTML5 for Phonegap

HTML5
Rakesh Kumar Jha
M.Tech, MBA

Contents
•HTML5 Home
•HTML5 Forms
•HTML5 Reference
•HTML5 Tags
•HTML5 Canvas
•Audio And Video

HTML5 is The New HTML Standard
HTML5 new features
•New Elements
•New Attributes
•Full CSS3 Support
•Video and Audio
•2D/3D Graphics
•Local Storage
•Local SQL Database
•Web Applications

HTML5 Introduction
HTML5 is the next generation of HTML
What is HTML5?
•HTML5 will be the new standard for HTML, XHTML, and the HTML DOM.
•The previous version of HTML came in 1999.
•HTML5 is still a work in progress. However, most modern browsers have some HTML5 support.

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.

How Did HTML5 Get Started?
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

New Features
Some of the most interesting new features in HTML5:
•The canvas element for drawing
•The video and audio elements for media playback
•Better support for local offline storage
•New content specific elements, like article, footer, header, nav, section
•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, Internet Explorer) continue to add new HTML5 features to their latest versions.

New Markup Elements
•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 re-written in HTML5.
•To better handle today's internet use, HTML5 also includes new elements for better structure, drawing, media content, and better form handling.

New Elements in HTML5
Tag
Description
<article>
Specifies independent, self-contained content, could be a news- article, blog post, forum post, or other articles which can be distributed independently from the rest of the site.
<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
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
<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

New Markup Elements
Tag
Description
<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
<wbr>
Word break. For defining a line-break opportunity.

New Media Elements
Tag
Description
<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
Tag
Description
<canvas>
For making graphics with a script
The canvas element uses JavaScript to make drawings on a web page.

New Form Elements
Tag
Description
<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
HTML5 offers more form elements, with more functionality:

New Input Type Attribute Values
Type
Description
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
datetime-local
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
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.
<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>
The control attribute adds video controls, like play, pause, and volume

HTML5 Video
•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
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
Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:
•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
<source>
Defines multiple media resources for media elements, such as <video> and <audio>
<track>
Defines text tracks in mediaplayers

HTML5 Video + DOM
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 example below calls two methods: play() and pause(). It also uses three properties: paused, height and videoHeight.

HTML5 Video + DOM
<!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">
<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>

HTML5 Video + DOM
<script type="text/javascript">
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.height=(myVideo.videoHeight*2);
}
function makeSmall()
{
myVideo.height=(myVideo.videoHeight/2);
}
function makeNormal()
{
myVideo.height=(myVideo.videoHeight);
}
</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
Method
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

HTML5 Audio
HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element.
<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>

Audio Formats and Browser Support
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
Currently, there are 3 supported file formats for the <audio> element:
MP3, Wav, and Ogg:
<audio>
Defines sound content
<source>
Defines multiple media resources for media elements, such as <video> and <audio>

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:
<canvas id="myCanvas" width="200" height="100"></canvas>

Create a Canvas Element
•Draw With JavaScript
•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 ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script>

Draw With JavaScript - Line
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(10,10);
ctx.lineTo(150,50);
ctx.lineTo(10,50);
ctx.stroke();
</script>
</body>
</html>

Draw With JavaScript - Circle
<!DOCTYPE html>
<html>
<body>
</canvas>
ctx.fillStyle="#FF0000";
ctx.beginPath();
ctx.arc(70,18,15,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
</script>
</body>
</html>

Draw With JavaScript - Gradient
<!DOCTYPE html>
<html>
<body>
</canvas>
var grd=ctx.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
ctx.fillStyle=grd;
ctx.fillRect(0,0,175,50);
</script>
</body>
</html>

Draw With JavaScript - Image
<!DOCTYPE html>
<html>
<body>
</canvas>
window.onload=function()
{
var img=new Image();
img.src="img_flwr.png";
ctx.drawImage(img,0,0);
}
</script>
</body>
</html>

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.

Using Geolocation
Use the getCurrentPosition() method to get the user's position.
<script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } </script>

Using Geolocation
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

Handling Errors and Rejections - Geolocation
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:
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;. } }

Handling Errors and Rejections - Geolocation
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:
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+"' />"; }

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

Location-specific Information
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):

Geolocation object - Other interesting Methods
<!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.watchPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>

HTML5 Web Storage
Storing Data on the Client
HTML5 offers two new objects for storing data on the client:
•localStorage - stores data with no time limit
•sessionStorage - stores data for one session
•Earlier, this was done with cookies. Cookies are not suitable for large amounts of data, because they are passed on by EVERY request to the server, making it very slow and in-effective.
•In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. It is possible to store large amounts of data without affecting the website's performance.
•HTML5 uses JavaScript to store and access the data.

The localStorage Object
•The localStorage object stores the data with no time limit. The data will be available the next day, week, or year.
•How to create and access a localStorage:
<script type="text/javascript"> localStorage.lastname="Smith"; document.write(localStorage.lastname); </script>

The localStorage Object
he following example counts the number of times a user has visited a page:
<script type="text/javascript"> if (localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else { localStorage.pagecount=1; } document.write("Visits "+ localStorage.pagecount + " time(s)."); </script>

The sessionStorage Object
The sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window.
<script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script>

HTML5 Input Types
HTML5 New Input Types
HTML5 has several new input types for forms. These new features allow better input control and validation.
•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
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Select your favorite color: <input type="color" name="favcolor" /><br />
<input type="submit" />
</form>
</body>
</html>
Not supported – IE, Mozilla, chrome, Safari,
Supported - Opera

Input Type: date
The date type allows the user to select a date (with time zone).
<!DOCTYPE html>
<html>
<body>
Birthday: <input type="date" name="bday" />
</form>
</body>
</html>
Not supported – IE, Mozilla,
Supported - chrome, Safari, Opera

Input Type: datetime-local
The datetime-local type allows the user to select a date and time (no time zone).
<!DOCTYPE html>
<html>
<body>
Birthday (date and time): <input type="datetime-local" name="bdaytime" />
</form>
</body>
</html>

Input Type: email
The email type is used for input fields that should contain an e-mail address
<!DOCTYPE html>
<html>
<body>
E-mail: <input type="email" name="usremail" /><br />
</form>
</body>
</html>
Not supported – IE, Safari
Supported - chrome, Mozilla, Safari, Opera

Input Type: month
The month type allows the user to select a month and year.
<!DOCTYPE html>
<html>
<body>
Birthday (month and year): <input type="month" name="bdaymonth" />
</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:
<!DOCTYPE html>
<html>
<body>
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
</form>
</body>
</html>

Input Type: number
•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
<form action="demo_form.asp" method="get">
<input type="number" name="points" min="0" max="10" step="3" value="6" />
</form>

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.
Points: <input type="range" name="points" min="1" max="10" />
</form>

Input Type: search
The search type is used for search fields (a search field behaves like a regular text field).
<!DOCTYPE html>
<html>
<body>
Search Google: <input type="search" name="googlesearch" /><br />
</form>
</body>
</html>
Not supported – IE, Mozilla, Opera
Supported - chrome, Safari

Input Type: tel
Define a field for entering a telephone number:
<!DOCTYPE html>
<html>
<body>
Telephone: <input type="tel" name="usrtel" /><br />
</form>
</body>
</html>
Not supported – IE, Mozilla, Opera, chrome, Safari

Input Type: time
•The time type allows the user to select a time.
<!DOCTYPE html>
<html>
<body>
Select a time: <input type="time" name="usr_time" />
</form>
</body>
</html>

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.
<!DOCTYPE html>
<html>
<body>
Add your homepage: <input type="url" name="homepage" /><br />
</form>
</body>
</html>
Not supported – IE, Safari, Opera
Supported - chrome, Mozilla

Input Type: week
The week type allows the user to select a week and year.
<!DOCTYPE html>
<html>
<body>
Select a week: <input type="week" name="year_week" />
</form>
</body>
</html>

HTML5 New Form Elements
HTML5 has several new elements and attributes for forms.
•<datalist>
•<keygen>
•<output>
Tag
IE
Firefox
Opera
Chrome
Safari
<datalist>
No
4.0
9.5
No
No
<keygen>
No
4.0
10.5
3.0
No
<output>
No
4.0
9.5
10.0
5.1

<datalist> Element
•The <datalist> element specifies a list of options for an input field.
•The list is created with <option> elements inside the <datalist>
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
</form>

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

<keygen> Element
<!DOCTYPE html>
<html>
<body>
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
</form>
</body>
</html>

<output> Element
•The <output> element is used for different types of output, like calculations or script output:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" name="a" value="50" />100
+<input type="number" name="b" value="50" />
=<output name="x" for="a b"></output>
</form>

HTML5 New Form Attributes
New form attributes:
autocomplete
Novalidate
New input attributes:
autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height and width
list
min, max and step
multiple
pattern (regexp)
placeholder
required

Browser support attributes
Attribute
IE
Firefox
Opera
Chrome
Safari
autocomplete
8.0
3.5
9.5
3.0
4.0
autofocus
No
4.0
10.0
3.0
4.0
form
No
4.0
9.5
10.0
No
form overrides
No
4.0
10.5
10.0
No
height and width
8.0
3.5
9.5
3.0
4.0
list
No
4.0
9.5
No
No
min, max and step
No
No
9.5
3.0
No
multiple
No
3.5
11.0
3.0
4.0
novalidate
No
4.0
11.0
10.0
No
pattern
No
4.0
9.5
3.0
No
placeholder
No
4.0
11.0
3.0
3.0
required
No
4.0
9.5
3.0
No

autocomplete Attribute
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
E-mail: <input type="email" name="email" /><br />
</form>
<p>Fill in and submit the form, then reload the page, start to fill in the form again - and see how autocomplete works.</p>
<p>Then, try to set autocomplete to "off".</p>
</body>
</html>

autofocus Attribute
The autofocus attribute specifies that a field should automatically get focus when a page is loaded.
<!DOCTYPE html>
<html>
<body>
User name: <input type="text" name="user_name" autofocus="autofocus" />
</form>
</body>
</html>

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:
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
</form>
<p>The input field below is outside the form element, but still part of the form.</p>
Last name: <input type="text" name="lname" form="user_form" />
</body>
</html>

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> types: submit and image.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" /><br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" /><br />
<input type="submit" formnovalidate="true" value="Submit without validation" /><br />
</form>
</body>
</html>
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.
<!DOCTYPE html>
<html>
<body>
User name: <input type="text" name="user_name" /><br />
<input type="image" src="img_submit.gif" width="24" height="24" />
</form>
</body>
</html>

list Attribute
•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.
<!DOCTYPE html>
<html>
<body>
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
</form>
</body>
</html>

min, max and step Attributes
•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):
Points: <input type="number" name="points" min="0" max="10" step="3"/>
</form>

multiple Attribute
•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.
<!DOCTYPE html>
<html>
<body>
Select images: <input type="file" name="img" multiple="multiple" />
</form>
<p>Try selecting more than one file when browsing for files.</p>
</body>
</html>

novalidate Attribute
•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.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" novalidate="novalidate">
E-mail: <input type="email" name="user_email" />
</form>
</body>
</html>

pattern Attribute
•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):
Country code: <input type="text" name="country_code" pattern="[A- z]{3}"
title="Three letter country code" />
</form>

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
<!DOCTYPE html>
<html>
<body>
<input type="search" name="user_search" placeholder="Emp ID" />
</form>
</body>
</html>

required Attribute
•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.
Name: <input type="text" name="usr_name" required="required" />
</form>

HTML5 Tags
•HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors.
•Some of the new features in HTML5 are functions for embedding audio, video, graphics, client-side data storage, and interactive documents.
•HTML5 also contains new elements like <nav>, <header>, <footer>, and <figure>.
•The HTML5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and many hundreds of other vendors.
•Note: HTML5 is not a W3C recommendation yet!

W3C HTML Activities
•HTML is the universal markup language for the Web

HTML Versions
HTML 2.0
•HTML 2.0 was developed by the Internet Engineering Task Force HTML Working Group in 1996.
•HTML 2.0 is an outdated version of HTML. For a Web developer there is no need to study the HTML 2.0 standard.
HTML 3.2
•HTML 3.2 became a W3C Recommendation 14. January 1997. HTML 3.2 added new features such as fonts, tables, applets, superscripts, subscripts and more, to the existing HTML 2.0 standard.
•One of the elements added to the HTML 3.2 standard, was the <font> tag. This tag introduced unnecessary complexity to the important task of separating HTML content (text) from its presentation (style). The <font> tag became deprecated in HTML 4.0.
HTML 4.0
•HTML 4.0 became a W3C Recommendation 18. December 1997. A second release was issued on 24. April 1998 with only some editorial corrections.

HTML Versions
The most important feature of HTML 4.0 was the introduction of style sheets (CSS).
HTML 4.01
•HTML 4.01 became a W3C Recommendation 24. December 1999.
•HTML 4.01 was a minor update of corrections and bug- fixes from HTML 4.0.
•XHTML 1.0
•XHTML 1.0 reformulates HTML 4.01 in XML.
•XHTML 1.0 became a W3C Recommendation 20. January 2000.

HTML Versions
HTML 5
•On January 22nd, 2008, W3C published a working draft for HTML 5.
Specification
Recommendation
HTML 3.2
14. January 1997
HTML 4.0
24. April 1998
HTML 4.01
24. December 1999
HTML 5
19. October 2010 (latest draft)

New tags in HTML5
Tag
Description

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

New tags in HTML5
Tag
Description
<b>
Defines bold text
<base>
Specifies the base URL/target for all relative URLs in a document
<basefont>
<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>
<blockquote>
Defines a section that is quoted from another source
<body>
Defines the document's 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>

New tags in HTML5
Tag
Description
<cite>
Defines the title of a work
<code>
Defines a piece of computer code
<col>
Specifies column properties for each column within a <colgroup> 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>
<div>
Defines a section in a document
<dl>
Defines a definition list

New tags in HTML5
Tag
Description
<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 a caption for a <figure> element
<figure>New
Specifies self-contained content
<font>
<footer>New
Defines a footer for a document or section
<form>
Defines an HTML form for user input
<frame>
<frameset>
<h1> to <h6>
Defines HTML headings
<head>
Defines information about the document

New tags in HTML5
Tag
Description
<header>New
Specifies an introduction, or a group of navigation elements for a document
<hgroup>New
Groups a set of <h1> to <h6> elements when a heading has multiple levels
<hr>
Defines a thematic change in the content
<html>
Defines the root of an HTML document
<i>
Defines a part of text in an alternate voice or mood
<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

New tags in HTML5
Tag
Description
<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/highlighted 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>
<noscript>
Defines an alternate content for users that do not support client- side scripts
<object>
Defines an embedded object

New tags in HTML5
Tag
Description
<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 do 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)

New tags in HTML5
Tag
Description
<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
<select>
Defines a drop-down list
<small>
Defines smaller text
<source>New
Defines multiple media resources for media elements (<video> and <audio>)
<span>
<strike>
<strong>
Defines important text
<style>
Defines style information for a document

New tags in HTML5
Tag
Description
<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
<sub>
Defines subscripted text
<summary>New
Defines a visible heading for a <details> element

New tags in HTML5
Tag
Description
<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>
<u>
<ul>
Defines an unordered list
<var>
Defines a variable
<video>New
Defines a video or movie
<wbr>New
Defines a possible line-break
<time>New
Defines a date/time
<title>
Defines a title for the document

HTML5 Global Attributes
•The global attributes are supported by all HTML 5 elements (with a few exceptions).
•New global attributes in HTML5.
Attribute
Value
Description
accesskey
character
Specifies a shortcut key to access an element
class
classname
Refers to a class specified in a style sheet
contenteditableNew
true false inherit
Specifies whether a user can edit the content of an element or not

contextmenuNew
menu_id
Specifies a context menu for an element. The value must be the id of a <menu> element
dir
ltr rtl auto
Specifies the text direction for the content in an element
draggableNew
true false auto
Specifies whether a user is allowed to drag an element or not
dropzoneNew
copy move link
Specifies what happens when dragged items/data is dropped in the element
hiddenNew
hidden
Specifies that an element should be hidden
id
id
Specifies a unique id for an element
lang
language_code
Specifies the language of the element's content
spellcheckNew
true false
Specifies if the element must have its spelling and grammar checked
style
style_definitions
Specifies an inline style for an element
tabindex
number
Specifies the tab order of an element
title
text
Specifies extra information about an element

HTML5 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.
•New event attributes in HTML5.
Attribute
Value
Description
nafterprintNew
script
Script to be run after the document is printed
onbeforeprintNew
script
Script to be run before the document is printed
onbeforeonloadNew
script
Script to be run before the document loads
onblur
script
Script to be run when the window loses focus
onerrorNew
script
Script to be run when an error occur
onfocus
script
Script to be run when the window gets focus
onhaschangeNew
script
Script to be run when the document has changed

HTML5 Event Attributes
Attribute
Value
Description
onload
script
Script to be run when the document loads
onmessageNew
script
Script to be run when the message is triggered
onofflineNew
script
Script to be run when the document goes offline
ononlineNew
script
Script to be run when the document comes online
onpagehideNew
script
Script to be run when the window is hidden
onpageshowNew
script
Script to be run when the window becomes visible
onpopstateNew
script
Script to be run when the window's history changes
onredoNew
script
Script to be run when the document performs a redo
onresizeNew
script
Script to be run when the window is resized
onstorageNew
script
Script to be run when when a Web Storage area is updated
onundoNew
script
Script to be run when the document performs an undo
onunloadNew
script
Script to be run when the user leaves the document

Form Events
Attribute
Value
Description
onblur
script
Script to be run when an element loses focus
onchange
script
Script to be run when an element changes
oncontextmenuNew
script
Script to be run when a context menu is triggered
onfocus
script
Script to be run when an element gets focus
onformchangeNew
script
Script to be run when a form changes
onforminputNew
script
Script to be run when a form gets user input
oninputNew
script
Script to be run when an element gets user input
oninvalidNew
script
Script to be run when an element is invalid
onreset
script
Script to be run when a form is reset Not supported in HTML5
onselect
script
Script to be run when an element is selected
onsubmit
script
Script to be run when a form is submitted

Keyboard Events
Attribute
Value
Description
onkeydown
script
Script to be run when a key is pressed down
onkeypress
script
Script to be run when a key is pressed and released
onkeyup
script
Script to be run when a key is released
Events triggered by a keyboard (applies to all HTML5 elements):

Mouse Events
Attribute
Value
Description
onabort
script
Script to be run on abort
oncanplayNew
script
Script to be run when a file is ready to start playing (when it has buffered enough to begin)
oncanplaythroughNew
script
Script to be run when a file can be played all the way to the end without pausing for buffering
ondurationchangeNew
script
Script to be run when the length of the media changes
onemptiedNew
script
Script to be run when something bad happens and the file is suddenly unavailable (like unexpectedly disconnects)
onendedNew
script
Script to be run when the media has reach the end (a useful event for messages like "thanks for listening")
onerrorNew
script
Script to be run when an error occurs when the file is being loaded
onloadeddataNew
script
Script to be run when media data is loaded
onloadedmetadataNew
script
Script to be run when meta data (like dimensions and duration) are loaded

Mouse Events
Attribute
Value
Description
onloadstartNew
script
Script to be run just as the file begins to load before anything is actually loaded
onpauseNew
script
Script to be run when the media is paused either by the user or programmatically
onplayNew
script
Script to be run when the media is ready to start playing
onplayingNew
script
Script to be run when the media actually has started playing
onprogressNew
script
Script to be run when the browser is in the process of getting the media data
onratechangeNew
script
Script to be run each time the playback rate changes (like when a user switches to a slow motion or fast forward mode)
onreadystatechangeNew
script
Script to be run each time the ready state changes (the ready state tracks the state of the media data)
onseekedNew
script
Script to be run when the seeking attribute is set to false indicating that seeking has ended

Mouse Events
Attribute
Value
Description
onseekingNew
script
Script to be run when the seeking attribute is set to true indicating that seeking is active
onstalledNew
script
Script to be run when the browser is unable to fetch the media data for whatever reason
onsuspendNew
script
Script to be run when fetching the media data is stopped before it is completely loaded for whatever reason
ontimeupdateNew
script
Script to be run when the playing position has changed (like when the user fast forwards to a different point in the media)
onvolumechangeNew
script
Script to be run each time the volume is changed which (includes setting the volume to "mute")
onwaitingNew
script
Script to be run when the media has paused but is expected to resume (like when the media pauses to buffer more data)
onseekingNew
script
Script to be run when the seeking attribute is set to true indicating that seeking is active
onstalledNew
script
Script to be run when the browser is unable to fetch the media data for whatever reason

HTML5 canvas.getContext("2d") reference
Context
•The canvas element has no drawing abilities of its own.
•A canvas is a rectangular area, where you can control every pixel using JavaScript.
•HTML5 has a built-in object for the canvas element, the getContext("2d") object.
•The getContext("2d") object has methods to draw lines, boxes, circles, and more.

Colors and Styles
Attribute
Value
Description
fillStyle
color/style
The fill-color of the drawing, black is default
strokeStyle
color/style
The stroke-color of the drawing, black is default
lineWidth
number
The width of the drawing stroke, 1 is default
lineCap
butt round square
The style of the ending of the line, butt is default
lineJoin
bevel round miter
The style of the corners of the line, miter is default
miterLimit
number
The limit size of the corners in a line, default is 10
shadowColor
color
The color of the shadow, black is default
shadowOffsetX
number
The horizontal distance of the shadow, 0 is default
shadowOffsetY
number
The vertical distance of the shadow, 0 is default
shadowBlur
number
The size of the blurring effect, 0 is default

Colors and Styles
Method
Description
createPattern(obj,pattern)
Creates a pattern from an image to be used by the fillStyle or strokeStyle attributes
createLinearGradient(x0,y0,z1,y1)
Creates a gradient object. Use this object as a value to the strokeStyle or fillStyle attributes
createRadialGradient(x0,y0,r0,x1,y1,r1)
Creates a gradient object as a circle. Use this object as a value to the strokeStyle or fillStyle attributes
addColorStop(position,color)
This is a method of the gradient objects above. Specifies the gradient's position and color
drawCustomFocusRing(element)
drawSystemFocusRing(element)

Path, Curve, Circle, and Rectangle
Method
Description
fill()
Fills the current path with the selected color, black is default
stroke()
Creates a stroke/path described with the specified path methods
clip()
Creates an area in the canvas, and this area is the only visible area in the canvas
quadraticCurveTo(cpx,cpy,x,y)
Creates a quadratic Bezier curve from the current point in the path to the specified path
bezierCurveTo(cpx,cpy,cpx,cpy,x,y)
Creates a cubic Bezier curve from the current point in the path to the specified path
arc(x,y,r,sAngle,eAngle,aClockwise)
Creates a circle, or parts of a circle
arcTo(x1,y1,x2,y2,radius)
Creates an arc between two points
isPointInPath(x,y)
Returns a Boolean value, true if the specified point is in the path, otherwise false

Path, Curve, Circle, and Rectangle
Method
Description
fillRect(x,y,w,h)
Draws a filled rectangle using the color/style of the fillStyle attribute
strokeRect(x,y,w,h)
Draws the lines of a rectangle using the color/style of the strokeStyle attribute
clearRect(x,y,w,h)
Clears a rectangle area. All pixels inside this area will be erased
beginPath()
Starts a new path, or clears the current path
moveTo(x,y)
Moves the path to the specified point, without creating a line
closePath()
Creates a line (path) from the last point in the path, to the first point. Completes the path
lineTo(x,y)
Creates a line from the last point in the path to the given point
rect(x,y,w,h)
Creates a rectangle

Transformations
Method
Description
scale(x,y)
Scales the drawings based on the x and y parameters
rotate(angle)
Rotates the drawings based on the given angle
translate(x,y)
Moves the drawings horizontally and vertically
transform(a,b,c,d,e,f)
Changes the shape of the drawings based on a matrix
setTransform(a,b,c,d,e,f)
Clears the current transformation, then makes the changes of the drawings based on a matrix

Text
Attribute
Value
Description
font
fontproperties
Specifies font properties used for writing on the canvas
textAlign
start end left right center
The alignment of the text, "start" is default
textBaseline
alphabetic bottom hanging ideographic middle top
The vertical alignment of the text, "alphabetic" is default

Text
Method
Description
fillText(text,x,y,maxWidth)
Draws text on the canvas, and fills it with the color set by the fillStyle attribute
strokeText(text,x,y,maxWidth)
Draws text on the canvas, without filling, using the color set by the strokeStyle attribute.
measureText(text).width
Measures the given text string, returns the result in pixels

Images and Pixel Manipulation
Attribute
Value
Description
width
number
Specifies the width of the imagedata object
height
number
Specifies the height of the imagedata object
data
array
An array containing the rgba values of all pixels in an imagedata object
Method
Description
drawImage()
Use a picture when drawing onto the canvas
createImageData()
Creates a blank imagedata object
getImageData(x,y,w,h)
Creates a new imagedata object, containing data from the canvas
putImageData(imgdat,dx,dy,x,y,w,h)
Draws imagedata onto th canvas

Compositing
Attribute
Value
Description
globalAlpha
number
Specifies the transparency of the drawings
globalCompositeOperation
source-atop source-in source-out source-over destination-atop destination-in destination-out destination-over lighter copy xor vendorName- operationName
Specifies how shapes and drawings are positioned onto the canvas, source- over is default

HTML Elements and Valid Doctypes
•HTML5/HTML 4.01/XHTML Elements and Valid DTDs
•The table below lists all HTML5/HTML 4.01/XHTML elements, and shows what Doctype (DTD) each element appears in.

Tag
HTML5
HTML 4.01 / XHTML 1.0
XHTML 1.1
Transitional
Strict
Frameset
<a>
Yes
Yes
Yes
Yes
Yes
<abbr>
Yes
Yes
Yes
Yes
Yes
<acronym>
No
Yes
Yes
Yes
Yes
<address>
Yes
Yes
Yes
Yes
Yes
<applet>
No
Yes
No
Yes
No
<area>
Yes
Yes
Yes
Yes
No
<article>
Yes
No
No
No
No
<aside>
Yes
No
No
No
No
<audio>
Yes
No
No
No
No
<b>
Yes
Yes
Yes
Yes
Yes
<base>
Yes
Yes
Yes
Yes
Yes
<basefont>
No
Yes
No
Yes
No
<bdi>
Yes
No
No
No
No
<bdo>
Yes
Yes
Yes
Yes
No

Tag
HTML5
XHTML 1.1
Transitional
Strict
Frameset
<big>
No
Yes
Yes
Yes
Yes
<blockquote>
Yes
Yes
Yes
Yes
Yes
<body>
Yes
Yes
Yes
Yes
Yes
<br>
Yes
Yes
Yes
Yes
Yes
<button>
Yes
Yes
Yes
Yes
Yes
<canvas>
Yes
No
No
No
No
<caption>
Yes
Yes
Yes
Yes
Yes
<center>
No
Yes
No
Yes
No
<cite>
Yes
Yes
Yes
Yes
Yes
<code>
Yes
Yes
Yes
Yes
Yes
<col>
Yes
Yes
Yes
Yes
No
<colgroup>
Yes
Yes
Yes
Yes
No
<command>
Yes
No
No
No
No
<datalist>
Yes
No
No
No
No

Tag
HTML5
XHTML 1.1
Transitional
Strict
Frameset
<dd>
Yes
Yes
Yes
Yes
Yes
<del>
Yes
Yes
Yes
Yes
No
<details>
Yes
No
No
No
No
<dfn>
Yes
Yes
Yes
Yes
Yes
<dir>
No
Yes
No
Yes
No
<div>
Yes
Yes
Yes
Yes
Yes
<dl>
Yes
Yes
Yes
Yes
Yes
<dt>
Yes
Yes
Yes
Yes
Yes
<em>
Yes
Yes
Yes
Yes
Yes
<embed>
Yes
No
No
No
No
<fieldset>
Yes
Yes
Yes
Yes
Yes
<figcaption>
Yes
No
No
No
No
<figure>
Yes
No
No
No
No
<font>
No
Yes
No
Yes
No

Tag
HTML5
XHTML 1.1
Transitional
Strict
Frameset
<footer>
Yes
No
No
No
No
<form>
Yes
Yes
Yes
Yes
Yes
<frame>
No
No
No
Yes
No
<frameset>
No
No
No
Yes
No
<h1> to <h6>
Yes
Yes
Yes
Yes
Yes
<head>
Yes
Yes
Yes
Yes
Yes
<header>
Yes
No
No
No
No
<hgroup>
Yes
No
No
No
No
<hr>
Yes
Yes
Yes
Yes
Yes
<html>
Yes
Yes
Yes
Yes
Yes
<i>
Yes
Yes
Yes
Yes
Yes
<iframe>
Yes
Yes
No
Yes
No
<img>
Yes
Yes
Yes
Yes
Yes
<input>
Yes
Yes
Yes
Yes
Yes

Tag
HTML5
XHTML 1.1
Transitional
Strict
Frameset
<ins>
Yes
Yes
Yes
Yes
No
<keygen>
Yes
No
No
No
No
<kbd>
Yes
Yes
Yes
Yes
Yes
<label>
Yes
Yes
Yes
Yes
Yes
<legend>
Yes
Yes
Yes
Yes
Yes
<li>
Yes
Yes
Yes
Yes
Yes
<link>
Yes
Yes
Yes
Yes
Yes
<map>
Yes
Yes
Yes
Yes
No
<mark>
Yes
No
No
No
No
<menu>
Yes
Yes
No
Yes
No
<meta>
Yes
Yes
Yes
Yes
Yes
<meter>
Yes
No
No
No
No
<nav>
Yes
No
No
No
No
<noframes>
No
Yes
No
Yes
No

Tag
HTML5
XHTML 1.1
Transitional
Strict
Frameset
<noscript>
Yes
Yes
Yes
Yes
Yes
<object>
Yes
Yes
Yes
Yes
Yes
<ol>
Yes
Yes
Yes
Yes
Yes
<optgroup>
Yes
Yes
Yes
Yes
Yes
<option>
Yes
Yes
Yes
Yes
Yes
<output>
Yes
No
No
No
No
<p>
Yes
Yes
Yes
Yes
Yes
<param>
Yes
Yes
Yes
Yes
Yes
<pre>
Yes
Yes
Yes
Yes
Yes
<progress>
Yes
No
No
No
No
<q>
Yes
Yes
Yes
Yes
Yes
<rp>
Yes
No
No
No
No
<rt>
Yes
No
No
No
No
<ruby>
Yes
No
No
No
No

Tag
HTML5
XHTML 1.1
Transitional
Strict
Frameset
<s>
Yes
Yes
No
Yes
No
<samp>
Yes
Yes
Yes
Yes
Yes
<script>
Yes
Yes
Yes
Yes
Yes
<section>
Yes
No
No
No
No
<select>
Yes
Yes
Yes
Yes
Yes
<small>
Yes
Yes
Yes
Yes
Yes
<source>
Yes
No
No
No
No
<span>
Yes
Yes
Yes
Yes
Yes
<strike>
No
Yes
No
Yes
No
<strong>
Yes
Yes
Yes
Yes
Yes
<style>
Yes
Yes
Yes
Yes
Yes
<sub>
Yes
Yes
Yes
Yes
Yes
<summary>
Yes
No
No
No
No
<sup>
Yes
Yes
Yes
Yes
Yes

Tag
HTML5
XHTML 1.1
Transitional
Strict
Frameset
<table>
Yes
Yes
Yes
Yes
Yes
<tbody>
Yes
Yes
Yes
Yes
No
<td>
Yes
Yes
Yes
Yes
Yes
<textarea>
Yes
Yes
Yes
Yes
Yes
<tfoot>
Yes
Yes
Yes
Yes
No
<th>
Yes
Yes
Yes
Yes
Yes
<thead>
Yes
Yes
Yes
Yes
No
<time>
Yes
No
No
No
No
<title>
Yes
Yes
Yes
Yes
Yes
<tr>
Yes
Yes
Yes
Yes
Yes
<track>
Yes
No
No
No
No
<tt>
No
Yes
Yes
Yes
Yes
<u>
No
Yes
No
Yes
No
<ul>
Yes
Yes
Yes
Yes
Yes

Tag
HTML5
XHTML 1.1
Transitional
Strict
Frameset
<var>
Yes
Yes
Yes
Yes
Yes
<video>
Yes
No
No
No
No
<wbr>
Yes
No
No
No
No

Basics of HTML5 for Phonegap

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to Basics of HTML5 for Phonegap

Similar to Basics of HTML5 for Phonegap (20)

More from Rakesh Jha

More from Rakesh Jha (20)

Recently uploaded

Recently uploaded (7)

Basics of HTML5 for Phonegap