HTML 5 Overview

8,127 views

Published on

Overview of HTML5 and technical comparison to HTML4

1 Comment
12 Likes
Statistics
Notes
  • More than 5000 IT Certified ( SAP,Oracle,Mainframe,Microsoft and IBM Technologies etc...)Consultants registered. Register for IT courses at http://www.todaycourses.com Most of our companies will help you in processing H1B Visa, Work Permit and Job Placements
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
8,127
On SlideShare
0
From Embeds
0
Number of Embeds
114
Actions
Shares
0
Downloads
0
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide
  • The Document Object Model ( DOM ) is a platform- and language -independent standard object model for representing HTML or XML documents as well as an Application Programming Interface (API) for querying, traversing and manipulating such documents.
  • Ordered Alphabetically 4 : indicates if the element is defined in HTML 4.01 5 : indicates if the element is defined in HTML 5
  • Ordered Alphabetically 4 : indicates if the element is defined in HTML 4.01 5 : indicates if the element is defined in HTML 5
  • Ordered Alphabetically 4 : indicates if the element is defined in HTML 4.01 5 : indicates if the element is defined in HTML 5
  • Ordered Alphabetically 4 : indicates if the element is defined in HTML 4.01 5 : indicates if the element is defined in HTML 5
  • Ordered Alphabetically 4 : indicates if the element is defined in HTML 4.01 5 : indicates if the element is defined in HTML 5
  • Ordered Alphabetically 4 : indicates if the element is defined in HTML 4.01 5 : indicates if the element is defined in HTML 5
  • Ordered Alphabetically 4 : indicates if the element is defined in HTML 4.01 5 : indicates if the element is defined in HTML 5
  • Ordered Alphabetically 4 : indicates if the element is defined in HTML 4.01 5 : indicates if the element is defined in HTML 5
  • Ordered Alphabetically 4 : indicates if the element is defined in HTML 4.01 5 : indicates if the element is defined in HTML 5
  • Ordered Alphabetically 4 : indicates if the element is defined in HTML 4.01 5 : indicates if the element is defined in HTML 5
  • Ordered Alphabetically 4 : indicates if the element is defined in HTML 4.01 5 : indicates if the element is defined in HTML 5
  • Ordered Alphabetically 4 : indicates if the element is defined in HTML 4.01 5 : indicates if the element is defined in HTML 5
  • Ordered Alphabetically 4 : indicates if the element is defined in HTML 4.01 5 : indicates if the element is defined in HTML 5
  • HTML 5 Overview

    1. 1. HTML 5 Overview and technical comparison March 02, 2009
    2. 2. Executive Summary <ul><li>HTML 5 is an ongoing cross-industry endeavor and is already starting to reach the market </li></ul><ul><li>Much of it is involved in standardizing browser behavior and presentation across platforms and media </li></ul><ul><li>It also introduces the following significant new capabilities: </li></ul><ul><ul><li>Offline database storage: Faster interactivity and stronger offline applications </li></ul></ul><ul><ul><li>Canvas support for 2D graphics animations without the need to use Adobe Flash or Microsoft Silverlight </li></ul></ul><ul><ul><li>Embedding and controlling audio and video content </li></ul></ul>
    3. 3. Contents <ul><li>What is HTML 5? </li></ul><ul><li>Differences from HTML 4 </li></ul><ul><li>Supported Web Browsers </li></ul><ul><li>Appendix: Detailed Comparison of HTML 4 and HTML 5 </li></ul>
    4. 4. What is HTML 5? (1/3) <ul><li>HTML 5 (originally referred to as Web Applications 1.0) is a new version of HTML 4.01 and XHTML 1.0 </li></ul><ul><li>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 (&quot;DOM Level 0“) </li></ul><ul><li>Enhancing (X)HTML to better support Web applications </li></ul>
    5. 5. What is HTML 5? (2/3) <ul><li>HTML 5 was pioneered in 2004 by the Web Hypertext Application Technology Working Group (WHATWG) </li></ul><ul><li>The working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and many others </li></ul><ul><li>Published the First Public Working Draft of the specification on January 22, 2008: http://www.whatwg.org/specs/web-apps/current-work/ </li></ul><ul><li>The specification is ongoing work, and expected to remain so for many years </li></ul>
    6. 6. What is HTML 5? (3/3) <ul><li>Some of the new features in HTML 5 are functions for embedding audio, video, graphics, client-side (including offline) data storage, and interactive documents </li></ul><ul><li>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 </li></ul>
    7. 7. Differences from HTML 4 <ul><li>Among the significant changes in the HTML 5 draft spec: </li></ul><ul><ul><li>Localized databases – SQL database websites can read & write to: </li></ul></ul><ul><ul><ul><li>Speeds up interactive searching, caching and indexing functions </li></ul></ul></ul><ul><ul><ul><li>Offline use of web apps that rely on data requests </li></ul></ul></ul><ul><ul><li>New tags for embedding media like audio and video files </li></ul></ul><ul><ul><li>The <canvas> tag, which is used to render moving 2D graphics </li></ul></ul><ul><ul><ul><li>This means configurable, automatic graphs and illustrations in the browser without Adobe Flash or Microsoft Silverlight </li></ul></ul></ul><ul><ul><li>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 </li></ul></ul><ul><ul><li>APIs for in-browser applications , allows editing, drag and drop, back button “waypoints,” and other graphical user interface abilities </li></ul></ul><ul><ul><li>Support for RSS feeds within the page markup </li></ul></ul>
    8. 8. Differences from HTML 4 <ul><li>HTML 5 contains new elements, attributes and events: </li></ul><ul><ul><li>New elements : <nav>, <header>, <footer>, and <figure> </li></ul></ul><ul><ul><li>New attributes : contenteditable, contextmenu, draggable, irrelevant, ref, registrationmark, and template </li></ul></ul><ul><ul><li>New event attributes : onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, and onunload </li></ul></ul><ul><li>For detailed comparison between HTML 4 and HTML 5, please refer to the slides at the end of the presentation </li></ul>
    9. 9. Supported Web Browsers <ul><li>The specifications for HTML 5 are still in draft phase, but browsers are starting to add limited HTML 5 support </li></ul><ul><ul><li>Opera (version 9.5) </li></ul></ul><ul><ul><ul><li>Opera is the leader in supporting HTML5, implementing: </li></ul></ul></ul><ul><ul><ul><ul><li>Cross-document messaging </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Server-sent events </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Web Forms 2.0 </li></ul></ul></ul></ul><ul><ul><ul><ul><li>The canvas and video elements </li></ul></ul></ul></ul><ul><ul><li>Safari (version 3.1 and 4) </li></ul></ul><ul><ul><ul><li>Supports the <video> and <audio> tags </li></ul></ul></ul><ul><ul><ul><li>Supports offline data storage API </li></ul></ul></ul><ul><ul><ul><li>WebKit, which powers Safari, can also be found in iPhone browser, Google Chrome, Google Android, Nokia S60 and Palm's webOS </li></ul></ul></ul>
    10. 10. Supported Web Browsers <ul><li>(Cont.) </li></ul><ul><ul><li>Internet Explorer (version 8 Beta) </li></ul></ul><ul><ul><ul><li>Supports the embed element and the contentEditable attribute </li></ul></ul></ul><ul><ul><ul><li>Support the cross-document messaging framework, allowing documents from different domains to communicate with each other in a safe manner </li></ul></ul></ul><ul><ul><ul><li>Microsoft also plans to support offline storage capabilities; inserting back button “waypoints” and offline event features to detect network outages </li></ul></ul></ul><ul><ul><li>FireFox (version 3.1) </li></ul></ul><ul><ul><ul><li>Support include offline storage mechanisms and partial support for the canvas element </li></ul></ul></ul><ul><ul><ul><li>Next version of Gecko, the engine that powers Firefox, is slated to add more support for the HTML5 APIs and the contentEditable attribute </li></ul></ul></ul>
    11. 11. Conclusions <ul><li>HTML 5 seeks to revamp the language behind the web and better support browser-based web applications </li></ul><ul><li>The significant aspects of HTML 5 are: </li></ul><ul><ul><li>Standardizing browser behavior and presentation across platforms and media </li></ul></ul><ul><ul><li>Offline database storage for faster interactivity and stronger offline applications </li></ul></ul><ul><ul><li>Canvas support for 2D graphics animations without the need to use Adobe Flash or Microsoft Silverlight </li></ul></ul><ul><ul><li>Embedding and controlling audio and video content </li></ul></ul><ul><li>Although HTML 5 is still under development as a specification, it already started to surface in all leading browsers </li></ul>
    12. 12. Appendix HTML 4 vs. HTML 5 Comparison
    13. 13. 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
    14. 14. 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
    15. 15. 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
    16. 16. 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
    17. 17. 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
    18. 18. 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
    19. 19. 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
    20. 20. 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
    21. 21. 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
    22. 22. 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
    23. 23. 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
    24. 24. 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
    25. 25. HTML 5 Event Attributes (13/13) Source: http://www.w3schools.com/tags/html5.asp <ul><li>Full documentation on HTML 5 differences from HTML 4 can be found here: </li></ul><ul><li>http://www.w3.org/TR/html5-diff/ </li></ul>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
    26. 26. Thank You!

    ×