Professional Documents
Culture Documents
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??????
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
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:
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
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>
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
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
The localStorage object stores the data with no time limit. The data will be available the next day, week, or year.
Example
The sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window.
Example
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>.
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.