Features of HTML5

Introduction

This Article is exploring new features in HTML 5. Recently we heard a lot more about HTML 5, and it's features, advantages, and all other stuff. So, "What Does It All Mean??!!" - a common question we ask our self. Let's get started exploring html5.

History of HTML

HTML was Born in late 1990, invented by Tim Berners-Lee(wiki link). He said "this is good" and proposed a draft to the Internet Engineering Task Force (IETF), a standards organization. IETF drafts require implementations, so the HTML draft referenced Mosaic, a web browser that later became Netscape, which later became Firefox. Mosaic, of course, would have been rather worthless without HTML. So a symbiosis between browsers and web standards drove the web from the beginning.

When the original HTML draft expired in 1994, the IETF created the first HTML Working Group (HTMLWG), who created HTML 2. Also in 1994, Tim created the World Wide Web Consortium (W3C), with a mission "To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web." If that sounds like what the HTMLWG was doing, that's because it was. The two standards bodies didn't run in parallel for long.

In 1996, after a series of additions to HTML 2, the IETF HTMLWG was closed and further work on HTML moved to the W3C. The W3C published HTML 3.2 and HTML 4, both in 1997. In December of 1999, HTML 4.01 was published.

In the seventh year (1998), the W3C rested. And rested. And rested. HTML hasn't changed since.

Get Started

You may ask: "How can I start using HTML5 if older browsers don't support it?" But the question itself is misleading. HTML5 is not one big thing; it is a collection of individual features. So you can't detect "HTML5 support," because that doesn't make any sense. But you can detect support for individual features, like canvas, video, or geolocation.

Detection Techniques

When your browser renders a web page, it constructs a Document Object Model (DOM), a collection of objects that represent the HTML elements on the page. Every element - every <p>, every <div>, every <span> - is represented in the DOM by a different object. (There are also global objects, like window and document,that aren't tied to specific elements.)

All DOM objects share a set of common properties, but some objects have more than others.

In browsers that support HTML5 features, certain objects will have unique properties. A quick peek at the DOM will tell you which features are supported.

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

From simplest to most complex:

Check if a certain property exists on a global object (such as window or navigator).
1. function supports_geolocation() {
2. return !!navigator.geolocation;
3. }
Create an element, then check if a certain property exists on that element.
1. function supports_canvas() {
2. return !!document.createElement('canvas').getContext;
3. }
Create an element, check if a certain method exists on that element, then call the method and check the value it returns.
1. function supports_h264_baseline_video() {
2. if (!supports_video()) { return false; }
3. var v = document.createElement("video");
4. return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
5. }
Create an element, set a property to a certain value, then check if the property has retained its value.
1. var i = document.createElement("input");
2. i.setAttribute("type", "color");
3. return i.type !== "text";

Canvas

HTML 5 defines the <canvas> element as "a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly." A canvas is a rectangle on your page where you can use JavaScript to draw anything you want.

So what does a canvas look like? Nothing, really. A <canvas> element has no content and no border of its own.

The markup looks like this:

<canvas width="300" height="225"></canvas>

You can have more than one <canvas> element on the same page. Each canvas will show up in the DOM, and each canvas maintains its own state. If you give each canvas an id attribute, you can access them just like any other element.

Let's expand that markup to include an id attribute:

<canvas id="a" width="300" height="225"></canvas>

Now you can easily find that <canvas> element in the DOM.

var a_canvas = document.getElementById("a");

So, you have an <canvas> element, and you have its drawing context. The drawing context is where all the drawing methods and properties are defined. There's a whole group of properties and methods devoted to drawing rectangles:

The fillStyle property can be a CSS color, a pattern, or a gradient. The default fillStyle is solid black, but you can set it to whatever you like. Each drawing context remembers its own properties as long as the page is open unless you do something to reset it.

fillRect(x, y, width, height) draws a rectangle filled with the current fill style.
The strokeStyle property is like fillStyle - it can be a CSS color, a pattern, or a gradient.
strokeRect(x, y, width, height) draws a rectangle with the current stroke style. strokeRect doesn't fill in the middle; it just draws the edges.
clearRect(x, y, width, height) clears the pixels in the specified rectangle.

Video

Anyone who has visited YouTube.com in the past four years knows that you can embed video on a web page. But prior to HTML5, there was no standards-based way to do this. Virtually all the video you've ever watched "on the web" has been funneled through a third-party plugin - maybe QuickTime, maybe RealPlayer, maybe Flash. (YouTube uses Flash.) These plugins integrate with your browser well enough that you may not even be aware that you're using them. That is until you try to watch a video on a platform that doesn't support that plugin.

HTML5 defines a standard way to embed video on a web page, using a <video> element. Support for the <video> element is still evolving, which is a polite way of saying it doesn't work yet. At least, it doesn't work everywhere. But don't despair! There are alternatives and fallbacks and options galore.

If your eyes haven't glazed over yet, you're doing better than most. As you can tell, video (and audio) is a complicated subject - and this was the abridged version! I'm sure you're wondering how all of this relates to HTML5. Well, HTML5 includes an <video> element for embedding video into a web page. There are no restrictions on the video codec, audio codec, or container format you can use for your video. One <video> element can link to multiple video files, and the browser will choose the first video file it can actually play. It is up to you to know which browsers support which containers and codecs.

HTML5 gives you two ways to include video on your web page. Both of them involve the <video> element. If you only have one video file, you can simply link to it in an src attribute. This is remarkably similar to including an image with an <img src="..."> tag.

<video src="pr6.webm"></video>

Technically, that's all you need. But just like an <img> tag, you should always include width and height attributes in your <video> tags. The width and height attributes can be the same as the maximum width and height you specified during the encoding process. Don't worry if one dimension of the video is a little smaller than that. Your browser will center the video inside the box defined by the <video> tag. It won't ever be swooshed or stretched out of proportion.

<video src="pr6.webm" width="320" height="240"></video>

There are two other optional attributes I want to mention before we go any further: preload and autoplay. Don't shoot the messenger; let me explain why these are useful. The preload attribute tells the browser that you would like it to start downloading the video file as soon as the page loads. This makes sense if the entire point of the page is to view the video. On the other hand, if it's just supplementary material that only a few visitors will watch, then you can set preload to none to tell the browser to minimize network traffic.

Here's an example of a video that will start downloading (but not playing) as soon as the page loads:

<video src="pr6.webm" width="320" height="240" preload></video>

And here's an example of a video that will not start downloading as soon as the page loads:

<video src="pr6.webm" width="320" height="240" preload="none"></video>

The autoplay attribute does exactly what it sounds like: it tells the browser that you would like it to start downloading the video file as soon as the page loads and you would like it to start playing the video automatically as soon as possible. Some people love this; some people hate it. But let me explain why it's important to have an attribute like this in HTML5. Some people are going to want their videos to play automatically, even if it annoys their visitors. If HTML5 didn't define a standard way to auto-play videos, people would resort to JavaScript hacks to do it anyway.

(For example, by calling the video's play() method during the window's load event.) This would be much harder for visitors to counteract. On the other hand, it's a simple matter to add an extension to your browser (or write one, if necessary) to say "ignore the autoplay attribute, I don't ever want videos to play automatically."

Here's an example of a video that will start downloading and playing as soon as possible after the page loads:

<video src="pr6.webm" width="320" height="240" autoplay></video>

Here Other example shows how to detect when a video has failed to play correctly:

<script>
function failed(e) {
// video playback failed - show a message saying why
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
alert('You aborted the video playback.');
break;
case e.target.error.MEDIA_ERR_NETWORK:
alert('A network error caused the video download to fail part-way.');
break;
case e.target.error.MEDIA_ERR_DECODE:
alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
break;
default:
alert('An unknown error occurred.');
break;
}
}
</script>
<p>
<video src="tgif.vid" autoplay controls onerror="failed(event)"></video>
</p>
<p>
<a href="tgif.vid">Download the video file</a>.
</p>

some Html5 points will be coming soon in the next articles...............