Presented By

Sudha Rani Balla

What

is HTML5? New Features. Browser Support. New Elements in HTML5. Media elements. Canvas element. Markup elements.
HTML5

Video. HTML5 Audio. HTML5 Web Storage Local Storage Session Storage. Advantages of HTML5 over HTML 4. Disadvantages of HTML5 Conclusion

Hypertext Markup Language revision 5 is (HTML5) markup language for the structure and presentation of World Wide Web contents. HTML5 supports the traditional HTML and XHTML-style syntax and other new features in its markup, New APIs, XHTML and error handling. HTML5 is still a work in progress. However, most modern browsers have some HTML5 support. How It Get Started??????

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 storage New content specific elements, like article, footer, header, nav, section New form controls, like calendar, date, time, email, url, search

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

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 todays internet use, HTML5 also includes new elements for better structure, drawing, media content and better form handling.

Tag
<audio> <video> <source> <track>

Description
For multimedia content, sounds, music or other audio streams For video content, such as a movie clip or other video streams For media resources for media elements, defined inside video or audio elements For text tracks used in media players

The canvas element uses JavaScript to make drawings on a web page.

Tag
<canvas>

Description
For making graphics with a script

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>

HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.

How It Works?
<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>

Currently, there are 3 supported video formats for the <video> element

MP4 WebM Ogg

Browser
Internet Explorer 9 Firefox 4.0 Google Chrome 6 Apple Safari 5 Opera 10.6

MP4
YES NO YES YES NO

WebM
NO YES YES NO YES

Ogg
NO YES YES NO YES

HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element.

How It Works?
<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>

Attribute autoplay controls

Value autoplay controls

Description Specifies that the audio will start playing as soon as it is ready Specifies that audio controls should be displayed (such as a play/pause button etc). Specifies that the audio will start over again, every time it is finished Specifies if and how the author thinks the audio should be loaded when the page loads Specifies the URL of the audio file

loop preload

loop auto metadata none URL

Src

 Currently, there are 3 supported file formats for the <audio> element MP3 Wav Ogg
Browser Internet Explorer 9 Firefox 4.0 Google Chrome 6 Apple Safari 5 Opera 10.6 MP3 YES NO YES YES NO Wav NO YES YES YES YES Ogg NO YES YES NO YES

Tag
<figure>
<figcaption> <meter> <progress> <time>

Description
For grouping a section of stand-alone content, could be a video
The caption of the figure section For a measurement, used only if the maximum and minimum values are known The state of a work in progress For defining a time or a date, or both

HTML5 offers two new objects for storing data on the client:

localStorage - stores data with no time limit sessionStorage - stores data for one session

HTML5 uses JavaScript to store and access the data.

The localStorage object stores the data with no time limit. The data will be available the next day, week, or year.

Example

<script type="text/javascript"> localStorage.lastname="Smith"; document.write(localStorage.lastname); </script>

The sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window.

Example

<script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script>

No More Frames.
The elements frame, frameset are being removed from the language and all of these can be handled using CSS or other methods.
Many elements have been added directly to the language that are currently (in HTML4) Flash or JSbased hacks, such as <canvas>, <video>, and <audio>.

Security Features Browser Compatibility

Due to usability purpose the web sites made by developers are highly interactive nowadays and for this developers need to include fluid animations, stream video, play music and Social Network sites like Facebook and Twitter into the websites. Till now they have only the option to integrate it with the help of Flash or Silver light, Flex or JavaScript like tools. But these consume so much time to develop and even the complexity of web application also increased. But now with the help of HTML5 it is possible to embed video and audio, high quality drawings, charts and animation and many other rich content without using any plug-in and third party programs as the functionality is built into the browser.