HTML 5 Overview

HTML 5 Overview and technical comparison March 02, 2009

Executive Summary HTML 5 is an ongoing cross-industry endeavor and is already starting to reach the market Much of it is involved in standardizing browser behavior and presentation across platforms and media It also introduces the following significant new capabilities: Offline database storage: Faster interactivity and stronger offline applications Canvas support for 2D graphics animations without the need to use Adobe Flash or Microsoft Silverlight Embedding and controlling audio and video content

Contents What is HTML 5? Differences from HTML 4 Supported Web Browsers Appendix: Detailed Comparison of HTML 4 and HTML 5

What is HTML 5? (1/3) HTML 5 (originally referred to as Web Applications 1.0) is a new version of HTML 4.01 and XHTML 1.0 It defines a markup language that can be written in both HTML (HTML5) and XML (XHTML5) and many APIs that form the basis of the Web architecture ("DOM Level 0“) Enhancing (X)HTML to better support Web applications

What is HTML 5? (2/3) HTML 5 was pioneered in 2004 by the Web Hypertext Application Technology Working Group (WHATWG) The working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and many others Published the First Public Working Draft of the specification on January 22, 2008: http://www.whatwg.org/specs/web-apps/current-work/ The specification is ongoing work, and expected to remain so for many years

What is HTML 5? (3/3) Some of the new features in HTML 5 are functions for embedding audio, video, graphics, client-side (including offline) data storage, and interactive documents HTML 5 also improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors

Differences from HTML 4 Among the significant changes in the HTML 5 draft spec: Localized databases – SQL database websites can read & write to: Speeds up interactive searching, caching and indexing functions Offline use of web apps that rely on data requests New tags for embedding media like audio and video files The <canvas> tag, which is used to render moving 2D graphics This means configurable, automatic graphs and illustrations in the browser without Adobe Flash or Microsoft Silverlight Tags like <article> or <dialog> , which can be used to markup items like the main body of a blog post or the transcript of a conversation APIs for in-browser applications , allows editing, drag and drop, back button “waypoints,” and other graphical user interface abilities Support for RSS feeds within the page markup

Differences from HTML 4 HTML 5 contains new elements, attributes and events: New elements : <nav>, <header>, <footer>, and <figure> New attributes : contenteditable, contextmenu, draggable, irrelevant, ref, registrationmark, and template New event attributes : onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, and onunload For detailed comparison between HTML 4 and HTML 5, please refer to the slides at the end of the presentation

Supported Web Browsers The specifications for HTML 5 are still in draft phase, but browsers are starting to add limited HTML 5 support Opera (version 9.5) Opera is the leader in supporting HTML5, implementing: Cross-document messaging Server-sent events Web Forms 2.0 The canvas and video elements Safari (version 3.1 and 4) Supports the <video> and <audio> tags Supports offline data storage API WebKit, which powers Safari, can also be found in iPhone browser, Google Chrome, Google Android, Nokia S60 and Palm's webOS

Supported Web Browsers (Cont.) Internet Explorer (version 8 Beta) Supports the embed element and the contentEditable attribute Support the cross-document messaging framework, allowing documents from different domains to communicate with each other in a safe manner Microsoft also plans to support offline storage capabilities; inserting back button “waypoints” and offline event features to detect network outages FireFox (version 3.1) Support include offline storage mechanisms and partial support for the canvas element Next version of Gecko, the engine that powers Firefox, is slated to add more support for the HTML5 APIs and the contentEditable attribute

Conclusions HTML 5 seeks to revamp the language behind the web and better support browser-based web applications The significant aspects of HTML 5 are: Standardizing browser behavior and presentation across platforms and media Offline database storage for faster interactivity and stronger offline applications Canvas support for 2D graphics animations without the need to use Adobe Flash or Microsoft Silverlight Embedding and controlling audio and video content Although HTML 5 is still under development as a specification, it already started to surface in all leading browsers

Appendix HTML 4 vs. HTML 5 Comparison

HTML 5 Reference (1/13) Source: http://www.w3schools.com/tags/html5.asp 5 4 Defines the direction of text display < bdo > 4 Not supported. Use CSS instead < basefont > 5 4 Defines a base URL for all the links in a page <base> 5 4 Defines bold text <b> 5 Defines sound content <audio> 5 Defines content aside from the page content <aside> 5 Defines an article <article> 5 4 Defines an area inside an image map <area> 4 Not supported. Defines an applet <applet> 5 4 Defines an address element <address> 4 Not supported. Defines an acronym <acronym> 5 4 Defines an abbreviation < abbr > 5 4 Defines a hyperlink <a> 5 4 Defines the document type <!DOCTYPE> 5 4 Defines a comment  5 4 Description Tag

HTML 5 Reference (2/13) Source: http://www.w3schools.com/tags/html5.asp 5 Defines a dropdown list < datalist > 5 Defines data in a tree-list < datagrid > 5 Defines a command button <command> 5 4 Defines groups of table columns < colgroup > 5 4 Defines attributes for table columns < col > 5 4 Defines computer code text <code> 5 4 Defines a citation <cite> 4 Not supported. Defines centered text <center> 5 4 Defines a table caption <caption> 5 Define graphics <canvas> 5 4 Defines a push button <button> 5 4 Inserts a single line break < br > 5 4 Defines the body element <body> 5 4 Defines a long quotation < blockquote > 4 Not supported. Defines big text <big> 5 4 Description Tag

HTML 5 Reference (3/13) Source: http://www.w3schools.com/tags/html5.asp 5 Defines a group of media content, and their caption <figure> 5 4 Defines a fieldset < fieldset > 5 Defines a target for events sent by a server <event-source> 5 Defines external interactive content or plugin <embed> 5 4 Defines emphasized text < em > 5 4 Defines a definition term < dt > 5 4 Defines a definition list <dl> 5 4 Defines a definition term < dfn > 5 4 Defines a section in a document <div> 4 Not supported. Defines a directory list <dir> 5 Defines a dialog (conversation) <dialog> 5 Defines details of an element <details> 5 4 Defines deleted text <del> 5 4 Defines a definition description < dd > 5 Defines a data template < datatemplate > 5 4 Description Tag

HTML 5 Reference (4/13) Source: http://www.w3schools.com/tags/html5.asp 5 4 Defines inserted text <ins> 5 4 Defines an input field <input> 5 4 Defines an image < img > 5 4 Defines an inline sub window (frame) < iframe > 5 4 Defines italic text <i> 5 4 Defines an html document <html> 5 4 Defines a horizontal rule <hr> 5 Defines a header for a section or page <header> 5 4 Defines information about the document <head> 5 4 Defines header 1 to header 6 <h1> to <h6> 4 Not supported. Defines a set of frames <frameset> 4 Not supported. Defines a sub window (a frame) <frame> 5 4 Defines a form <form> 5 Defines a footer for a section or page <footer> 4 Deprecated. Defines text font, size, and color <font> 5 4 Description Tag

HTML 5 Reference (5/13) Source: http://www.w3schools.com/tags/html5.asp 5 4 Defines a noscript section < noscript > 4 Not supported. Defines a noframe section < noframes > 5 Defines a nestingpoint in a datatemplate <nest> 5 Defines navigation links < nav > 5 Defines measurement within a predefined range <meter> 5 4 Defines meta information <meta> 5 4 Defines a menu list <menu> 5 4 Defines an image map <map> 5 Defines marked text <mark> 5 4 Defines a resource reference <link> 5 4 Defines a list item < li > 5 4 Defines a title in a fieldset <legend> 5 4 Defines a label for a form control <label> 5 4 Defines keyboard text < kbd > 4 Not supported. Defines a single-line input field <isindex> 5 4 Description Tag

HTML 5 Reference (6/13) Source: http://www.w3schools.com/tags/html5.asp 5 Defines a section <section> 5 4 Defines a script <script> 5 4 Defines sample computer code < samp > 4 Not supported. Defines strikethrough text <s> 5 Defines the rules for updating a template <rule> 5 4 Defines a short quotation <q> 5 Defines progress of a task of any kind <progress> 5 4 Defines preformatted text <pre> 5 4 Defines a parameter for an object < param > 5 4 Defines a paragraph <p> 5 Defines some types of output <output> 5 4 Defines an option in a drop-down list <option> 5 4 Defines an option group < optgroup > 5 4 Defines an ordered list < ol > 5 4 Defines an embedded object <object> 5 4 Description Tag

HTML 5 Reference (7/13) Source: http://www.w3schools.com/tags/html5.asp 5 4 Defines a table header < th > 5 4 Defines a table footer < tfoot > 5 4 Defines a text area < textarea > 5 4 Defines a table cell <td> 5 4 Defines a table body < tbody > 5 4 Defines a table <table> 5 4 Defines superscripted text <sup> 5 4 Defines subscripted text <sub> 5 4 Defines a style definition <style> 5 4 Defines strong text <strong> 4 Not supported. Defines strikethrough text <strike> 5 4 Defines a section in a document <span> 5 Defines media resources <source> 5 4 Defines small text <small> 5 4 Defines a selectable list <select> 5 4 Description Tag

HTML 5 Reference (8/13) Source: http://www.w3schools.com/tags/html5.asp 4 Not supported. Defines preformatted text <xmp> 5 Defines a video <video> 5 4 Defines a variable < var > 5 4 Defines an unordered list < ul > 4 Not supported. Defines underlined text <u> 4 Not supported. Defines teletype text < tt > 5 4 Defines a table row < tr > 5 4 Defines the document title <title> 5 Defines a date/time <time> 5 4 Defines a table header < thead > 5 4 Description Tag

HTML 5 Standard Attributes (9/13) Source: http://www.w3schools.com/tags/html5.asp 5 Sets if the element is irrelevant or not. Irrelevant elements is not displayed true false irrelevant 5 4 A unique id for the element. Used with CSS or JavaScript id_name id 5 Sets if the user is allowed to drag the element or not true false auto draggable 5 4 Sets the text direction ltr rtl dir 5 Sets a context menu for an element id of a menu element contentextmenu 5 Sets if the user is allowed to edit the content in the element or not true false contenteditable 5 4 The class of the element. Used to specify a class in the stylesheet class_rule or style_rule class 4 Sets a keyboard shortcut to access an element. Not supported. a character acceskey 5 4 Description Value Attribute

HTML 5 Standard Attributes (10/13) Source: http://www.w3schools.com/tags/html5.asp 5 4 A text to display in a tool tip tooltip_text title 5 Refers to another document / another part of the document that should be applied to this element url or elementID template 5 4 Sets the tab order of an element number tabindex 5 4 An inline style definition style_definition style 5 Sets a registration mark to an element. Use only on child elements of <rule> (except for the <nest> element) registration mark registrationmark 5 Refers to another document / another part of the document. Use only if the template attribute is set url or elementID ref 5 4 Sets the language code for the enclosed element language_code lang 5 4 Description Value Attribute

HTML 5 Event Attributes (11/13) Source: http://www.w3schools.com/tags/html5.asp 5 Script to be run at the start of a drag operation ondragstart 5 Script to be run when an element is being dragged over a valid drop target ondragover 5 Script to be run when an element leaves a valid drop target ondragleave 5 Script to be run when an element has been dragged to a valid drop target ondragenter 5 Script to be run at the end of a drag operation ondragend 5 Script to be run when an element is dragged ondrag 5 4 Script to be run on a mouse double-click ondblclick 5 Script to be run when a context menu is triggered oncontextmenu 5 4 Script to be run on a mouse click onclick 5 4 Script to be run when the element changes onchange 5 4 Script to be run when the element loses focus onblur 5 Script to be run before an element is loaded onbeforeonload 5 Script to be run on an abort event onabort 5 4 Description Attribute

HTML 5 Event Attributes (12/13) Source: http://www.w3schools.com/tags/html5.asp 5 4 Script to be run when the mouse pointer moves out of an element onmouseout 5 4 Script to be run when the mouse pointer moves over an element onmouseover 5 4 Script to be run when the mouse pointer moves onmousemove 5 4 Script to be run when a mouse button is pressed onmousedown 5 Script to be run when the message event is being triggered onmessage 5 4 Script to be run when a document loads onload 5 4 Script to be run when key is released onkeyup 5 4 Script to be run when key is pressed and released onkeypress 5 4 Script to be run when key is pressed onkeydown 5 4 Script to be run when the element gets focus onfocus 5 Script to be run when an error occur during the loading of an element onerror 5 Script to be run when dragged element is being dropped ondrop 5 4 Description Attribute

HTML 5 Event Attributes (13/13) Source: http://www.w3schools.com/tags/html5.asp Full documentation on HTML 5 differences from HTML 4 can be found here: http://www.w3.org/TR/html5-diff/ 5 Script to be run when a document unloads onunload 5 4 Script to be run when the form is submitted onsubmit 5 4 Script to be run when the element is selected onselect 5 Script to be run when the element's scrollbar is scrolled onscroll 5 Script to be run when the element is being resized onresize 4 Script to be run when the form is reset. Not supported onreset 5 Script to be run when the mouse wheel is being rotated onmousewheel 5 4 Script to be run when a mouse button is released onmouseup 5 4 Description Attribute

HTML 5 Overview

More Related Content

Viewers also liked (20)

Similar to HTML 5 Overview (20)

HTML 5 Overview

Editor's Notes