HTML5

1. What’s on the horizon? HTML5 Technology Research created by Katrina Washington on May 23,2010

2. Introduction to HTML5 In a joint effort between the W3C HTML WG and the WHATWG ( The Web Hypertext Application Technology Working Group) work on HTML5 commenced in 2004. WHATWG is a community of people interested in evolving HTML and was founded by individuals from Apple, the Mozilla Foundation and Opera Software. HTML5 introduces and enhances a wide range of features including form controls, multimedia, API’s, structure and semantics to give authors more flexibility and interoperability. This will enable more interactive websites and applications. Technology Research created by Katrina Washington on May 23,2010

3. Introduction to HTML5 cont… This new version of HTML often called HTML5 or Web Applications 1.0 closely resembles the current version. There are no namespaces, elements don’t have to be closed, browsers are forgiving of errors, a table is still a table and a p is still a p. HTML5 has been explicitly designed to degrade gracefully in browsers that don’t support it due to the wide variety of browsers and versions being used today. It offers real benefits to page authors while promising even more to page readers as browsers are slowly upgraded. Technology Research created by Katrina Washington on May 23,2010

4. What’s New in HTML5 Structure HTML5 adds new elements to specifically identify each of the common constructs: Section- anything that has its own heading such as a part or chapter in a book or a section in a chapter. Header- not the same as the “head” element but the page header shown on the page Footer- the page footer where the fine print goes; ( the signature in a e-mail message) Nav- a collection of links to other pages Article- an independent entry in a blog, magazine, compendium, and so forth Divs are no longer needed. The meaning of different sections can be inferred from standard names. This is especially important for audio, cell phone, and other non-standard browsers. Technology Research created by Katrina Washington on May 23,2010

5. What’s New in HTML5 cont…. Block Semantic Elements Along with the structural elements HTML5 adds some purely semantic block-level elements. Aside- represents a note, tip, sidebar, pullquote, a parenthetical remark or something that is just outside the main flow of the narrative. Figure- represents a block-level image, along with a caption, but is not limited to pictures. The figure element may be used to caption audio, video, iframe, object, and “embed” elements. Dialog- represents a conversation between several people Technology Research created by Katrina Washington on May 23,2010

6. What’s New in HTML5 cont.. Inline Semantic Elements HTML4 currently has five different inline elements to represent subtle different variations of code: var, code, kbd, tt and samp. However, it doesn’t have any way to indicate such basic qualities as time or numbers. HTML5 aims to rectify this with several new inline elements. Mark or m element- represents text that is “marked” somehow but not necessarily emphasized. An example would be highlighted text in a book. Time- represents a specific moment in history. The time element helps browsers and others recognize times in HTML pages. Meter- represents a numeric value in a specified range. Each meter element can have up to six attributes offering information about the amount in a more machine-recognizable form: Value Min Low High Max Optimum Each should contain a decimal indicating the relevant range. Technology Research created by Katrina Washington on May 23,2010

7. What’s New in HTML5 cont… Progress- represents the state of an ongoing process. Ex.(this progress control says that a download is 33% complete) <p>Downloaded: <progress value=“1534602” max=“4603807”>33%</progress> </p> Value- represents the current state of the operation Max- represents the total amount toward which the progress is moving In the example above the element indicates that 1,534,602 bytes out of a total 4,603,807 bytes have been downloaded. You can display indefinite progress bars by omitting the “max” attribute. Technology Research created by Katrina Washington on May 23,2010

8. What’s New in HTML5 cont… Embedded media Video on the web is booming, but it’s almost all proprietary. Markup that works for embedding video content in one browser doesn’t work in the next browser. A new “video” element has been proposed which allows the embedding of arbitrary video formats. A complementary “audio” element is also proposed. <audio src=“spacemusic.mp3” Autoplay=“autoplay” loop=“20000” /> Ex. (you might attach background music to a web page like this) The “autoplay” attribute tells the browser to begin playing as soon as the page is loaded without waiting for an explicit user request. It will loop 20,000 times before shutting off. (Or until the user either goes to another page or closes the window.) These elements aren’t supported by legacy browsers and can be inaccessible to blind and deaf users. The audio and video elements may contain additional markup describing the content of the audio and video. Technology Research created by Katrina Washington on May 23,2010

9. What’s New in HTML5 cont… Interactivity HTML5 introduces several new elements focused on more interactive experiences for web pages. Details- represents further information that may not be shown by default. “Details” element can have an “open” attribute. When this occurs the details will be initially shown to the reader. Datagrid- serves the role of a grid control. It is intended for use with trees, lists, and tables that can be updated by both users and scripts. A datagrid gets its initial data from its contents: a table, select, or other group of HTML elements. Menu and command- the menu element has actually been present since version 2. It was deprecated in HTML4 but is being brought back in HTML5. A “menu” containing “command” elements, each of which causes an immediate action. Commands can be turned in to check boxes with a checked=”checked” attribute. You can also turn checkboxes into radiobuttons using the “radiogroup” attribute. Label- gives a title for the menu Technology Research created by Katrina Washington on May 23,2010

10. Conclusion HTML 5 is part of the future of the web. HTML 5 will improve interoperability and reduce development costs by making precise rules on how to handle HTML elements. The web is constantly evolving with new and innovative websites being created every day. The boundaries of HTML are being pushed in every direction. HTML5 is still in development which will likely continue for several years, but it’s great to know what’s on the horizon. Technology Research created by Katrina Washington on May 23,2010

11. Sources and Resources Sources Wikipedia- http://en.wikipedia.org/wiki/HTML5 New Elements in HTML5- http://www.ibm.com/developerworks/library/xhtml5 Alist Apart: Articles: A Preview of HTML5- http://www.alistapart.com/articles/previewof html5 Resources Wikipedia- http://en.wikipedia.org/wiki/HTML5 WHATWG (The Web Hypertext Application Technology Working Group) - http://www.whatwg.org/ W3C- http://dev.w3.org/html5/html-author/ W3schools.com- http://www.w3schools.com/html5/html5_reference.asp Technology Research created by Katrina Washington on May 23,2010