Your SlideShare is downloading. ×
HTML 5 Overview
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML 5 Overview

6,839
views

Published on

Overview of HTML5 and technical comparison to HTML4

Overview of HTML5 and technical comparison to HTML4


0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,839
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. HTML 5 Overview and technical comparison March 02, 2009
    • 2. 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
    • 3. Contents
      • What is HTML 5?
      • Differences from HTML 4
      • Supported Web Browsers
      • Appendix: Detailed Comparison of HTML 4 and HTML 5
    • 4. 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
    • 5. 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
    • 6. 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
    • 7. 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
    • 8. 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
    • 9. 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
    • 10. 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
    • 11. 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
    • 12. Appendix HTML 4 vs. HTML 5 Comparison
    • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
    • 26. Thank You!