HTML5 Browsers Support

  • Chrome 10.0 is the winner.
  • Firefox 4.0 is next in line and it scored pretty decently.
  • Internet Explorer 8 has worst support of HTML5.
  • IE10 is expected to be supporting HTML5 to a greater extent.

HTML5 Editable Content

  • Content can be made editable with adding the contenteditable attribute to it.
  • More useful if paired with HTML5 Local Storage.
  • contenteditable attribute can be added to CSS styles

<div contenteditable="true">
   You can edit content in this div...
</div>

HTML5 Audio and Video

  • Previously, we used <object> and <embed> tags
  • No need to worry about plugins like Flash.

HTML5 Audio is supported with the following tag:

<audio controls="controls">
    <source src="audiofile.mp3" type="audio/mp3" />
    <source src="audiofile.ogg" type="audio/ogg" />
    Your browser does not support the <audio> tag.
</audio>

HTML5 Video is supported with the following tag:

<video controls="controls" width="400" height="300">
    <source src="videofile.mp4" type="audio/mp4" />
    <source src="videofile.ogg" type="audio/ogg" />
    Your browser does not support the <video> tag.
</video>

HTML5 Canvas

  • Allows to render 2D shapes or graphics on web page with help of JavaScript.
  • Allows creating animation.

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#00FF00";
    ctx.fillRect(0,0,250,250);
</script>

HTML5 Form Input Types and Attributes

  • HTML5 has introduced 13 new input types and several new attributes for <form> and <input> tags.
  • You can determine your browser supporting various features of HTML5 using http://html5test.com/
  • Not all browsers fully support HTML5 new input types and attribute.

<form id="myform">
    Name: <input name="name" required placeholder="Your name" pattern="[A-z]{10}" />
    <br/>
    Email: <input type="email" name="email" required placeholder="test@domain.com"/>
    <br/>
    URL: <input type="url" name="url" placeholder="Homepage URL"/>
    <br/>
    Age: <input type="number" name="age" min="18" max="99" />
    <br/>
    Description: <textarea name="desc" placeholder="Description text here"></textarea>
    <br/>
    <input type="submit" value="Submit" />
</form>

HTML5 Declaration

Old:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

New:

<!DOCTYPE html>

With this the browser knows what type of document to expect.

HTML5 Tags

  • HTML5 contains a rich set of proposed tags.
  • The goal of these new tags is to bring richer semantic meaning to content.
  • Some tags from previous HTML version have been deprecated such as <acronym>, <big>, <dd>, <frame>, <strike>, etc.
  • Some of the new tags are <source>, <footer>, <video>, <canvas>, <audio> and further more.

HTML5 Features

  • Video playback and drag-and-drop.
  • Through a standardized interface, it provides new multimedia functionality of <audio> and <video>.
  • Reduced usage of plugins like Flash.
  • Offline storage,

html5 features

  • The canvas element for immediate mode 2D drawing,
  • Document editing,
  • Browser history management,
  • Drag-and-drop,
  • Compressed and user-friendly API.
  • Addition of formats like date, time, calendar, email, url
  • Other features such as ContentEditable, Stylable elements, Canvas element for drawing, geo-location, Web Forms 2.0, server-sent DOM Events, hyper-threading for Web browsers, application caches, client-side storage and further more.