You are on page 1of 37


Many people have contributed to the success of this. Although a single sentence hardly suffices, I would like to thank Almighty God for blessing us with His grace. I extend my sincere and heartfelt thanks to Dr. David Peter, Head of Division, Computer Science and Engineering, for providing us the right ambience for carrying out this work. I am profoundly indebted to my seminar guide, Mr. Sudheep Elayidom for innumerable acts of timely advice, encouragement and I sincerely express my gratitude to him. I express my immense pleasure and thankfulness to all the teachers and staff of the Department of Information Technology for their cooperation and support. Last but not the least, I thank all others, and especially my classmates who in one way or another helped me in the successful completion of this work.

Anmol Kansal


HTML5 is currently under development as the next major revision of the HTML standard. Like its immediate predecessors, HTML 4.01 and XHTML 1.1, HTML5 is a standard for structuring and presenting content on the World Wide Web. The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears. The HTML5 specification was adopted as the starting point of the work of the new HTML working group of the World Wide Web Consortium (W3C) in 2007. According to the W3C timetable, it is estimated that HTML5 will reach W3C Recommendation by late 2010. The HTML5 syntax is no longer based on SGML despite the similarity of its markup. HTML5 also incorporates Web Forms 2.0, another WHATWG specification. In addition to specifying markup, HTML5 specifies scripting application programming interfaces (APIs). Existing document object model (DOM) interfaces are extended and de facto features documented. There are also new APIs, such as canvas element for immediate mode 2D drawing, timed media playback, offline storage database, document editing, drag-and-drop, crossdocument messaging, browser history management, MIME type and protocol handler registration, Microdata, Geolocation etc.


Chapter Introduction History Aim of HTML5 HTML5 Structure o STRUCTURE o HEADER o FOOTER o NAV o ASIDE o SECTION o ARTICLE Current status of HTML5 Presentational Markup Removed and Redefined 16 o REMOVED o REDEFINED o NEW ELEMNT o NEW ATTRIBUTE HTML5s Open Media Effort HTML5 V/S HTML4 LIMITATIONS OF HTML5 21 29 32 14 Page no. 4 5 6 7


36 37



HTML or Hypertext Markup Language is a formatting or scripting language that programmers and developers use to create documents on the Web. You view a Web page written in HTML in a Web browser such as Internet Explorer, Mozilla Firefox or Google Chrome. The HTML language has specific rules that allow placement and format of text, graphics, video and audio on a Web page. The web is constantly evolving. New and innovative websites are being created every day, pushing the boundaries of HTML in every direction. HTML 4 has been around for nearly a decade now, and publishers seeking new techniques to provide enhanced functionality are being held back by the constraints of the language and browsers. To give authors more flexibility and interoperability, and enable more interactive and exciting websites and applications, HTML 5 introduces and enhances a wide range of features including form controls, APIs, multimedia, structure, and semantics. HTML5 is the fifth revision of the HTML standard and as of April 2012 is still under development. The latest edition HTML5 has enhanced features for programmers such as <video>, <audio> and <canvas> elements. Work on HTML 5, which commenced in 2004, is currently being carried out in a joint effort between the W3C HTML WG and the WHATWG. Many key players are participating in the W3C effort including representatives from the four major browser vendors: Apple, Mozilla, Opera, and Microsoft; and a range of other organizations and individuals with many diverse interests and expertise. HTML5 is a specification for how the web's core language, HTML, should be formatted and utilized to deliver text, images, multimedia, web apps, search forms, and anything else you see in your browser. In some ways, it's mostly a core set of standards that only web developers really need to know. In other ways, it's a major revision to how the web is put together. Not every web site will use it, but those that do will have better support across modern desktop and mobile browsers (that is, everything except Internet Explorer).


History of HTML till now: HTML 3.0 was developed in 1995 HTML 3.2 was completed by 1997 HTML 4 was developed in the year 1998 In this year 1998 W3C stopped working on HTML and started working on XML based HTML that is XHTML. And it is known as XHTML 1.0.It has completed in the year 2000. In parallel with XHTML W3C worked on different language that is not compatible to HTML and XHTML 1.0, known as XHTML2. Introduction of Xforms, a new technology which is meant to be the next generation of web forms renewed interest in renovating HTML, rather than developing a brand new language for web.

HTML5 was first started by Mozilla, Apple, and Opera under a group called the
WHATWG (Web Hypertext Application Technology Working Group). In 2006 W3C showed an interest in HTML5 and in 2007 they created a working group to work in HTML5 project. First Public Working Draft was released on 22 January 2008, (i.e. officially released) by World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).


Aim of HTML5
HTML5s goals are grand. The specification is sprawling and often misunderstood. As stated by W3C, HTML5 specifically aims at: It tries to bring order to chaos by codifying common practices, embracing what has already been implemented by various diverse browsers. It tries really hard to omit the space found between (x) html and its versions as in HTML4 or XHTML1. It continues the effort of W3C to make html more of a logical markup language, rather than just being a physical one.


HTML5 Structure
STRUCTURE HTML 5 introduces a whole set of new elements that make it much easier to structure pages. Most HTML 4 pages include a variety of common structures, such as headers, footers and columns and today, it is fairly common to mark them up using div elements, giving each a descriptive id or class.

Fig: HTML4 document structure

Diagram illustrates a typical two-column layout marked up using divs with id and class attributes. It contains a header, footer, and horizontal navigation bar below the header. The main content contains an article and sidebar on the right. The use of div elements is largely because current versions of HTML 4 lack the necessary semantics for describing these parts more specifically. HTML 5 addresses this issue by introducing new elements for representing each of these different sections.


Fig: HTML5 document structure

The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer. The markup for that document could look like the following: <body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body>

There are several advantages to using these elements. When used in conjunction with the heading elements (h1 to h6), all of these provide a way to mark up nested sections with heading levels, beyond the six levels possible with previous versions of HTML. The specification includes a detailed algorithm for generating an outline that takes the structure of these elements into account and remains backwards compatible with previous versions. This can be used by both authoring tools and browsers to generate tables of contents to assist users with navigating the document. For example, the following markup structure marked up with nested section and h1 elements: <section> <h1>Level 1</h1> <section> <h1>Level 2</h1> <section> <h1>Level 3</h1> </section> </section> </section> For better compatibility with current browsers, it is also possible to make use of the other heading elements (h2 to h6) appropriately in place of the h1 elements. By identifying the purpose of sections in the page using specific sectioning elements, assistive technology can help the user to more easily navigate the page. For example, they can easily skip over the navigation section or quickly jump from one article to the next without the need for authors to provide skip links. Authors also benefit because replacing many of the divs in the


document with one of several distinct elements can help make the source code clearer and easier to author. The following are the new structural elements introduced in HTML5: Header The header element represents the header of a section. Headers may contain more than just the sections headingfor example it would be reasonable for the header to include sub headings, version history information or bylines. The header element contains introductory information to a section or page. This can involve anything from our normal documents headers (branding information) to an entire table of contents. <header> <h1>A Preview of HTML 5</h1> <p class="byline">By Lachlan Hunt</p> </header> <header> <h1>Example Blog</h1> <h2>Insert tag line here.</h2> </header> Footer The footer element represents the footer for the section it applies to. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. The footer element is for marking up the footer of, not only the current page, but each section contained in the page. So, its very likely that youll be using the <footer> element multiple times within one page. <footer> 2007 Example Inc.</footer>
10 | P a g e

Nav The nav element represents a section of navigation links. It is suitable for either site navigation or a table of contents. The nav element is reserved for a section of a document that contains links to other pages or links to sections of the same page. Not all link groups need to be contained within the <nav> element, just primary navigation. <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/products">Products</a></li> <li><a href="/services">Services</a></li> <li><a href="/about">About</a></li> </ul> </nav> Aside The aside element is for content that is tangentially related to the content around it. Aside, represents content related to the main area of the document. This is usually expressed in sidebars that contain elements like related posts, tag clouds, etc. They can also be used for pull quotes.

<aside> <h1>Archives</h1> <ul> <li><a href="/2007/09/">September 2007</a></li> <li><a href="/2007/08/">August 2007</a></li>

11 | P a g e

<li><a href="/2007/07/">July 2007</a></li> </ul>

</aside> Section The section element represents a generic section of a document or application, such as a chapter. It acts much the same way a <div> does by separating off a portion of the document. For example, <section> <h1>Chapter 1: The Period</h1> <p>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, ...</p> </section>

12 | P a g e

Article The article element represents an independent section of a document, page or site, which can stand alone. It is suitable for content like news or blog articles, forum posts or individual comments or any independent item of content. <article id="comment-2"> <header> <h4> <a href="#comment-2" rel="bookmark">Comment #2</a> by <a href="">Jack O'Niell</a></h4> <p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time> </header> <p>That's another great article!</p> </article>

13 | P a g e

Current status of HTML5

Given the looseness HTML5 supports and its de-emphasis of the XML approach to markup, you might assume that HTML5 is a retreat from doing things in the right way and an acceptance of tag soup as legitimate markup. The harsh reality is that, indeed, valid markup is more the exception than the rule online. Numerous surveys have shown that in the grand scheme of things, few Web sites validate. For example, in a study of the Alexa Global Top 500 in January 2008, only 6.57 percent of the sites surveyed validated. When sample sizes are increased and we begin to look at sites that are not as professional, things actually get worse. Interestingly, Google has even larger studies, and while they dont focus specifically on validation, what they indicate on tag usage indicates clearly that no matter the sample size, clean markup is more the exception than the rule. Yet despite the markup madness, the Web continues to work. In fact, some might say the permissive nature of browsers that parse junk HTML actually helps the Web grow because it lowers the barrier to entry for new Web page authors. Certainly a shaky foundation to build upon, but the stark reality is that we must deal with malformed markup. To this end, HTML5 makes one very major contribution: it defines what to do in the presence of markup syntax problems. The permissive nature of browsers is required for browsers to fix markup mistakes. HTML5 directly acknowledges this situation and aims to define how browsers should parse both wellformed and malformed markup, as indicated by this brief excerpt from the specification: This specification defines the parsing rules for HTML documents, whether they are syntactically correct or not. Certain points in the parsing algorithm are said to be parse errors. The error handling for parse errors is well-defined: user agents must either act as described below when encountering such problems, or must abort processing at the first error that they encounter for which they do not wish to apply the rules described below. While a complete discussion of the implementation of an HTML5compliant browser parser is of little interest to Web document authors, browser implementers now have a common specification to consult to determine what to do when tags are not nested, simply left open, or mangled in a variety of ways. This is the part of the HTML5 specification that will likely produce the most good, because obtaining consensus among browser vendors to handle markup
14 | P a g e

problems in a consistent manner is a more likely path to an improved Web than defining some strict syntax and then attempting to educate document authors around the world en masse to write good markup. HTML5s aim to bring order to the chaos of sloppy markup is but one of the grand aims of the specification. It also aims to replace traditional HTML, XHTML, and DOM specifications, and to do so in a backward-compatible fashion. In its attempt to do this, the specification is sprawling, addressing not just what elements exist but how they are used and scripted. HTML5 embraces the fact that the Web not only is composed of documents but also supports applications, thus markup must acknowledge and facilitate the building of such applications. More of the philosophy of HTML5 will be discussed later in the chapter when addressing some strong opinions, myths, and misconceptions surrounding the specification; for now, take a look at what markup features HTML5 actually changes.

15 | P a g e

Presentational Markup Removed and Redefined

HTML5 removes a number of elements and attributes. Many of the elements are removed because they are more presentational than semantic. Table below presents the elements currently scheduled for removal from HTML5. NOTE:
Although these elements are removed from the specification and should be avoided in favor of CSS,

they likely will continue to be supported by browsers for some time to come. The specification even acknowledges this fact.

Looking at Table, one might notice that some elements that apparently should be eliminated somehow live on. For example, <small> continues to be allowed, but <big> is obsolete. The idea here is to preserve elements but shift meaning. For example, <small> is no longer intended to correspond to text that is just reduced in size, similar to <font size="-1"> or <span style="fontsize: smaller;">, but instead is intended to represent the use of small text, such as appears in fine print or legal information. If you think this decision seems a bit preposterous, join the crowd. Some of the other changes to element meaning seem even a bit more preposterous, such as the claim that a <b> tag now represents inline text that is stylistically offset from standard text, typically using a different type treatment. So apparently <b> tags are not necessarily bold, but rather convey some sense that the text is different (which likely means bold). Unlikely to be thought of in such a manner by mere markup mortals, we simply say <b> tags live on, as do a number of other presentational elements. Removed Element <applet> <frame> <frameset> <noframes> <base font> <font> <center> Text-align: center or margin: auto depending on context Body{font-family: family; font-size: size} Reasoning / Alternatives( or CSS Equivalent) Obsolete syntax for java applets/ Use the object element. Usability concerns/ Use fixed-positions elements with CSS or object elements with sourced documents.

16 | P a g e

<s>, <strike>

Text-decoration: strike
Text-decoration: underline

The 2nd Table presents the meaning-changed elements that stay put in HTML5 and their new meaning. HTML Element <b> New Meaning in HTML5 Represents an inline run of text that is different stylistically from normal text, by being bold, but conveys no other meaning. Represents a thematic break rather than a horizontal rule.



Represents small print, as in comments or legal fine print


Represents importance rather than strong emphasis.

<dd> <dt>

Used with HTML5s new details and figures element to define or summarize the contained text

Like the strict variants of (X)HTML, HTML5 also removes numerous presentation focused attributes. This Table summarizes these values and presents CS\S alternatives.

17 | P a g e

18 | P a g e

In with the New Elements For most Web page authors, the inclusion of new elements is the most interesting aspect of HTML5. Some of these elements are not yet supported, but already many browsers are implementing a few of the more interesting ones, such as audio and video, and others can easily be simulated even if they are not directly understood yet, as you will see later in the chapter. This table summarizes the elements added by HTML5.

19 | P a g e

New Attributes One quite important aspect of HTML5 is the introduction of new attributes. There are quite a few attributes that are global and thus found on all elements. This Table provides a brief overview of these attributes.

20 | P a g e

HTML5s Open Media Effort

An interesting aspect of HTML5 that is reminiscent of the previous efforts of Netscape and Microsoft is the support for tag-based multimedia in HTML documents. Traditionally, multimedia has been inserted with the embed and object elements, particularly when inserting Adobe Flash, Apple QuickTime, Windows Media, and other formats. However, there was a time when tags specifically to insert media were supported; interestingly, some of those features, such as the dynsrc attribute for <img> tags, lived on until just recently. HTML5 brings this concept of tag-based multimedia back.

<video> To insert video, use a <video> tag and set its src attribute to a local or remote URL containing a playable movie. You should also display playblack controls by including the controls attribute, as well as set the dimensions of the movie to its natural size. This simple demo shows the use of the new element: <video src="video.mp4" width="640" height="360" controls> <strong> HTML5 video element not supported</strong> </video>

21 | P a g e

You should note the included content in the tag that non supporting browsers fall back to. The following shows Internet Explorer displaying the alternative content:

However, even if a browser supports the video element, it might still have problems displaying the video. For example, Firefox 3.5 wont load this particular media format directly:

22 | P a g e

HTML5 open video has, as it currently stands, brought back the madness of media codec support that Flash solved, albeit in a less than stellar way. To address the media support problem, you need to add in alternative formats to use by including a number of <source> tags: <video width="640" height="360" controls poster="loading.png"> <source src="html_5.mp4" type="video/mp4"> <source src="html_5.ogv" type="video/ogg"> <strong>HTML5 video element not supported</strong> </video> Other video element specific attributes like autobuffer can be used to advise the browser to download media content in the background to improve playback, and autoplay, which when set, will start the media as soon as it can. A complete example of the video element in action is shown here: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML5 video example</title> </head> <body> <h1>Simple Video Examples</h1> <video src="" width="640" height="360" controls> <strong>HTML5 video element not supported</strong> </video> <br><br><br> <video width="640" height="360" controls poster="loading.png"> <source src="" type="video/mp4"> <source src="" type="video/ogg"> <strong>HTML5 video element not supported</strong> </video>
23 | P a g e

</body> </html>

<audio> HTML5s audio element is quite similar to the video element. The element should support common sound formats such as WAV files: <audio src=""></audio> In this manner, the audio element looks pretty much the same as Internet Explorers proprietary bgsound element. Having the fallback content rely on that proprietary tag might not be a bad idea: <audio> <bgsound src=""> </audio>

If we want to allow the user to control sound play, unless you have utilized JavaScript to control this, you may opt to show controls with the same named attribute. Depending on the browser, these controls may look quite different, as shown next. <audio src="" controls></audio>

As with the video element, you also have autobuffer and autoplay attributes for the audio element. Unfortunately, just like video, there are also audio format support issues, so we may want to specify different formats using <source> tags:

<audio controls autobuffer autoplay> <source src="" type="audio/ogg"> <source src="" type="audio/wav"> </audio>
24 | P a g e

A complete example is shown here:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML5 audio examples</title> </head> <body> <h1>Simple Audio Examples</h1> <h2>wav Format</h2> <audio src="" controls></audio> <h2>ogg Format</h2> <audio src="" controls></audio> <h2>Multiple Formats and Fallback</h2> <audio controls autobuffer autoplay> <source src="" type="audio/ogg"> <source src="" type="audio/wav"> <!--[if IE]> <bgsound src=""> <![endif]--> </audio> </body> </html>

Client-Side Graphics with <canvas> The canvas element is used to render simple graphics such as line art, graphs, and other custom graphical elements on the client side. Initially introduced in the summer of 2004 by Apple in its Safari browser, the canvas element is now supported in many browsers, including Firefox 1.5+, Opera 9+, and Safari 2+, and as such is included in the HTML5 specification. While Internet Explorer does not directly support the tag as of yet, there are JavaScript libraries3 that emulate
25 | P a g e

<canvas> syntax using Microsofts Vector Markup Language (VML). From a markup point of view, there is little that you can do with a <canvas> tag. You simply put the element in the page, name it with an id attribute, and define its dimensions with height and width attributes:

<canvas id="canvas" width="300" height="300"> <strong>Canvas Supporting Browser Required</strong> </canvas> Note the alternative content placed within the element for browsers that dont support the element. After you place a <canvas> tag in a document, your next step is to use JavaScript to access and draw on the element. For example, the following fetches the object by its id value and creates a two-dimensional drawing context:

var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d");

Once you have the drawing context, you might employ various methods to draw on it. For example, the strokeRect(x,y,width,height) method takes x and y coordinates and height and width, all specified as numbers representing pixels. For example, context.strokeRect(10,10,150,50);

would draw a simple rectangle of 150 pixels by 50 pixels starting at the coordinate 10,10 from the origin of the placed <canvas> tag. If you wanted to set a particular color for the stroke, you might set it with the strokeStyle() method, like so: context.strokeStyle = "blue"; context.strokeRect(10,10,150,50); Similarly, you can use the fillRect(x,y,width,height) method to make a rectangle, but this time in a solid manner: context.fillRect(150,30,75,75); By default, the fill color will be black, but you can define a different fill color by using the fillColor() method. As a demonstration this example sets a light red color:
26 | P a g e

context.fillStyle = "rgb(218,0,0)"; You can use standard CSS color functions, which may include opacity; for example, herethe opacity of the reddish fill is set to 40 percent: context.fillStyle = "rgba(218,112,214,0.4)"; A full example using the first canvas element and associated JavaScript is presented here:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML5 canvas example</title> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.strokeStyle = "orange"; context.strokeRect(10,10,150,50); context.fillStyle = "rgba(218,0,0,0.4)"; context.fillRect(150,30,75,75); } </script> </head> <body> <h1>Simple Canvas Examples</h1> <canvas id="canvas" width="300" height="300"> <strong>Canvas Supporting Browser Required</strong> </canvas> </body> </html>

27 | P a g e

Unfortunately, Internet Explorer up to version 8 will not be able to render the example without a compatibility library:

28 | P a g e


HTML5 differences with HTML4
HTML5 introduces new elements and its attributes like <audio> and <video>. Video elements are used to for video files. The attributes for <audio> tag are src, preload, autoplay, loop and controls.

HTML5 defines a syntax that is backward compatible to HTML and XHTML. o In HTML4, the media type was text/html, but in HTML5 it is text/htmlsandboxed. o For XML the media type is application/xhtml+XML or application/XML.

HTML 5 allows MathML and SVG elements to be inside a document. New elements are introduced for a better structure. They are, o section - section represents a generic document or application section. It can be used with header tags. o article-We can represent a blog entry or article using this tag o aside-represents a piece of content that is only slightly related to the rest of the page. o hggroup- represents the header of a section. o Header-represents a group of introductory or navigational aids. o Footer-represents a footer for a section and can contain information about the author, copyright information. o nav- represents the section for navigation. o Figure-used to give caption for video or audio.

Other new elements in HTML5 are video,audio,embed,mark,progress,meter,time,ruby,rt,rp,canvas,command,details, datalist etc. o Video and audio-for multimedia content o embed-for plug in content o mark-represents marked text o progress-when completing a task it gives the progress like progress of file downloading o time-represents date/time

29 | P a g e

o meter-represents a measurement o canvas- for rendering the dynamic bit map images o datalist:-Together with the a new list attribute for input can be used to make combo boxes o New attributes are identified to various elements. There are several new global attributes. They are, o Contentedittable o Contextmenu o Draggable o Hidden o Spell check etc

Some elements are missing for HTML5. They are, o big, center, font, u, s, strike etc. These effects can be better handled by CSS. o frames, frameset, noframes etc. Their usage affects usability and accessibility for the end user in a negative way. o acronym, applet, isindex, dir. Their usage creates confusion and so they are avoided o

Some attributes are not allowed in HTML5. Most of the styling attributes are removed from the HTML5. User can use CSS for that purpose. Examples of removed attributes are given below. o align attribute on caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr o background attribute on body. o Bgcolor attribute on table, tr, td, th and body. o Border attribute on table and object. o Cellpadding and cellspacing attributes on table.

30 | P a g e

New API's in HTML5 API's for multimedia by using video and audio tags:- Using audio and video tags the user can embed different audio/video formats in to the web page API that allow offline web applications:- HTML5 allows several features in which the web applications can work locally, that is without an internet connection. So that the web applications can store their data locally. Drag and drop API: - HTML5 allows drag and drop feature with the help of the draggtable attribute API that exposes the history and allows pages to add to it to prevent breaking the back button An API that allows a Web application to register itself for certain protocols or media types Editing API in combination with a new global contenteditable attribute: - Can edit the contents at client side browser with the help of contenteditable attribute HTML Microdata: In HTML microdata the user can embed machine readable data in to HTML documents. It is built in such a way that it is easy to write and it has unambiguous parsing model. HTML micro data is compatible with RDF and JSON. So that it is compatible to Web3.0 HTML canvas 2D context- This API is used for rendering the 2D graphics, bitmaps and shapes. This technology introduced by Apple. Example code <canvas id=rect width=100 height=50> your browser does not support this feature </canvas> HTML5 web messaging: Through this mechanism user can communicate between browsing contexts in HTML documents

31 | P a g e


New open standards created in the mobile era( HTML5), will win on mobile devices (and PCs too). Clearly, Apple is backing HTML 5, CSS 3 and JavaScript for developing future web applications.HTML5 still has some real constraints and it may not replace Flash for eLearning/ mLearning development in the near future because of the following reasons:

BROWSERS DO NOT PROVIDE FULL SUPPORT FOR HTML5 None of the web browsers for mobile or desktop have full HTML 5 implementations at present. Internet Explorer (IE 6, 7 and 8), the most widely used web browser, has no support for HTML5. The new version (IE 9) which is expected to be released sometime in 2011 will support HTML5. Internet Explorer (IE 6, 7 and 8), the most widely used web browser, has no support for HTML5. Even Apple iPad Safari browser doesnt have full HTML5 support.

CROSS PLATFORM / BROWSER COMPATIBILITY Every browser has its own rendering mechanism so an application developed for iPad Safari is not guaranteed to work well in other browsers like IE, Firefox or Chrome. Developers will have to make modifications in the code to make it work in different browsers. This is not the case with plug-ins like Flash or Silverlight where the applications once developed can run on all the browsers without any modifications.

HTML5 has added new video and audio tags that can play video/audio in a browser without a plug-in but it doesnt officially support any video or audio format.Content developers will have to spend more time in encoding the videos to Ogg Theora and to H.264 formats so that all major browsers are supported. But this is not sufficient as IE doesnt support the video tag and would not be able to play the video or audio file without a plug-in. Flash supports FLV/FV4 formats and those are not browser dependent. Also, Flash or Silverlight video/audio supports secure media streaming; there is no clear counterpart for this in HTML5.

32 | P a g e

DEVELOPMENT TOOLS There are no tools available (except Dreamweaver CS5) that can create animations for HTML5 having a good designer developer workflow required to create quality graphics and animations like Flash Professional. To create animations with HTML5, developers have to code animations using JavaScript and CSS. A task which tools like Flash professional can do in minutes may take hours, if not days, to do using HTML5, CSS3 and JavaScript.

33 | P a g e


YOUTUBE HTML5 VIDEO PLAYER This is an opt-in experiment for HTML5 support on YouTube. If you are using a supported browser, you can choose to use the HTML5 player instead of the Flash player for most videos. SUPPORTED BROWSERS They support browsers that support both the video tag in HTML5 and either the h.264 video codec or the WebM format (with VP8 codec). These include: Firefox 4 (WebM, Beta) Google Chrome (h.264 supported now, WebM enabled version available via Early Release Channel) Opera 10.6+ (WebM) Apple Safari (h.264, version 4+) Microsoft Internet Explorer 9 (h.264, Platform Preview 3) Microsoft Internet Explorer 6, 7, or 8 with Google Chrome Frame installed FEATURES Full screen support is partially implemented. Pressing the full screen button will expand the player to fill your browser. If your browser supports a full screen option, you can then use that to truly fill the screen. The HTML5 player has a badge in the control bar. If you don't see the "HTML5" icon in the control bar, you've been directed to the Flash player . The HTML5 player also has a badge to indicate the video is using the WebM format. If you don't see the "WebM" icon, the video is encoded using h.264 If you want to find videos with WebM formats available, you can use the Advanced Search options to look for them (or just add &webm=1 to any search URL)

34 | P a g e

ADDITIONAL RESTRICTIONS Videos with ads are not supported (they will play in the Flash player) On Firefox and Opera, only videos with WebM transcodes will play in HTML5 If you've opted in to other testtube experiments, you may not get the HTML5 player (Feather is supported, though)

35 | P a g e

HTML5 is the future. Working with the messed-up markup that dominates the Web and providing a definition of how user agents should parse the mess is a tremendous improvement in Web development. Yet HTML5 doesnt simply embrace the past; it extends the language with many more elements and continues the move to more semantic markup. While some markup purists may bemoan the resurgence of HTML traditions, the XML future is not destroyed by HTML5. If you want to use lowercase, quote all attributes, and self-close empty elements, go right aheadthat conforms to HTML5 as well. However, HTML5 isnt just about markup; it is also about metadata, media, Web applications, APIs, and more. Its a sprawling specification that will continue to evolve, but much of it is here today, so get busy and embrace the future of markup now.

36 | P a g e

The Complete Reference HTML & CSS, 5th edition, Thomas A. Powell, TATA McGraw HILL. The Complete Reference HTML & XHTML, 4th edition, Thomas A. Powell, TATA McGraw HILL. Wikipedia. Amarjeet Mohanty Will HTML 5 Re-standardize the Web? By Steven J Nicholas

37 | P a g e