New Input Types in Html5

Html5 comes with new input types for forms that allows you do a better input control and validation.

Email

This input type ensures that the value entered is a valid email address.

Email:

<input type="email">

URL

This input type ensures that the value entered is a valid url.

URL:

<input type="url">

Number

The value must be a floating point number. When you enter a value which is not a number, it will be cleared after the focus moves away.

Number:

<input type="number"> 

Html Conditional Comments for Internet Explorer

Conditional comments are used to detect special versions of browsers. Browser detection is used for browser compatibility and correct rendering. Here are some helpful tables for using "Html Comments";

Comment syntax table:

Comment type	Syntax or possible value
standard HTML comment	<!-- Comment content  -->
downlevel-hidden	<!--[if expression]> HTML <![endif]-->
downlevel-revealed	<![if expression]> HTML <![endif]>

Supported features table:

Item	Example	Comment
IE	[if IE]	The string "IE" is a feature corresponding to the version of Internet Explorer used to view the Web page.
value	[if IE 7]	An integer or floating point numeral corresponding to the version of the browser. Returns a Boolean value of true if the version number matches the browser version.
WindowsEdition	[if WindowsEdition]	Internet Explorer 8 on Windows 7. The string "WindowsEdition" is a feature corresponding to the edition of Windows used to view the Web page.
value	[if WindowsEdition 1]	An integer corresponding to the edition of Windows used to view the Web page. Returns a Boolean value of true if the value matches the edition being used.
true	[if true]	Always evaluates to true.
false	[if false]	Always evaluates to false.

How to: Draw an Image in HTML5 Canvas

I will show you an example how to set up a canvas and draw in it using "HTML5 canvas and image object".

First, you must insert a canvas in the html body:

<canvas id="mycanvas" width="200" height="200"></canvas>

Then you can draw the image using 2D canvas context and image object. Like this:

var canvas = document.getElementById('mycanvas');
var drawingContext = canvas.getContext('2d');
var img = new Image();
img.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidEBkMVnAtEEzw8S26ScVRKgr4KzU4dsFBwtj-hPKTXgmM2zNYxYErmDligVS6XcWjEem_v_9k1s00Vo8ObVKQtDZV90LYX_J895q6lTJRQwHDsDuOFiPcU9VHBuCMvXgTeEHN_6WKQws/s1600/car-logo.png";
drawingContext.drawImage(img, 50, 50);

In the code above we get the canvas element by using the id. Then we created the 2D context instance by calling getContext function of the context element.

Html5 Tip: How Can I Reset a Canvas

Changing the width or height of a canvas element will remove its contents and reset all the properties (like fillstyle) of its drawing context to their default values. You don’t even need to change the width; you can simply set it to its current value, like this:

var canvas = document.getElementById("mycanvas");
canvas.width = canvas.width;

HTML5 Canvas Tag

The canvas element can be used for rendering graphs, game graphics, or other visual images on the fly. Canvas is currently a "2D" base for drawing on using JavaScript. "3D API" is not supported yet. To use canvas element; you must define the canvas tag and then "draw shapes using Javascript functions".

The definition of the canvas element is like this:

<canvas id="mycanvas" height="200" width="200"></canvas>

this is a blank white space that you can draw. Once you define the tag, you can draw on it using the 2D drawing context. You can get the drawing context using .getContext('2d') function. Using 2D drawing context you can draw rectangle, path, text, gradients and images.

You can "draw a rectangle" like this:

function draw_rectange() {
  var canvas = document.getElementById("mycanvas");
  var drawingContext = canvas.getContext("2d");
  drawingContext.fillStyle = "#FF0000";
  drawingContext.fillRect(40, 30, 120, 80);
}

How to detect HTML5 support

There are four basic techniques for detecting whether a browser supports a particular feature.

1. Check if a certain property exists on a global object (such as window or navigator).
2. Create an element, then check if a certain property exists on that element.
3. Create an element, check if a certain method exists on that element, then call the method and check the value it returns.
4. Create an element, set a property to a certain value, then check if the property has retained its value.

Or you can use Modernizr which is an open-source Javascript library that makes it easy for web designers and helps you to detect the capabilities of the visitor’s browser.

Upgrading to HTML5

This is as simple as changing your doctype. The doctype should be on the first line of every HTML page. In HTML5, the doctype is:

<!DOCTYPE html>

HTML5 doctype won’t break your existing markup, because all the tags defined in HTML 4 are still supported in HTML5.

Html 5 Intoduction

What is HTML5?

HTML5 is the new standard for HTML, XHTML, and the HTML DOM. HTML5 is still a work in progress. However, most modern browsers have some HTML5 support.

What are the new features of HTML5?

New features of HTML5 are based on HTML, CSS, DOM and Javascript. There are some new features in HTML5;

- The <canvas> element for making graphics with Javascript.
- The <audio> and <video> element for media streaming and playback.
- Better support for local storage like localStorage and sessionStorage using the Web Storage interface.
- New input types like email, url, number, range and date.
- New form elements like <datalist>, <keygen> and <output>.

Which browsers support HTML5?

No browsers have full HTML5 support.But Safari, Chrome, Firefox, Opera and Internet Explorer continue to add new HTML5 features to their latest versions.