Html5 Exploring -- by Udayakumar Mathivanan


Published on

The presentation contains the slides which provides a complete insight about HTML5.

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html5 Exploring -- by Udayakumar Mathivanan

  1. 1. A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: <div> and <span> - Tells nothing about its content. Examples of semantic elements: <form>, <table>, and <img> - Clearly defines its content.
  2. 2. Tags - <nav>: "Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element." <nav role="navigation"> <ul> <li> <a href="#" title="link">link</a> </li> </ul> </nav>
  3. 3. Tags - <article>: "a composition that forms an independent part of a document, page, application, or site. This could be a forum post, a magazine or newspaper article, a Web log entry ..." <article> <h2>Item</h2> <p>Some content here.</p> </article>
  4. 4. Tags - <section>: "section is a blob of content that you could store as an individual record in a database." <section id="foo"> <h2>Foo</h2> <p> Content here </p> </section>
  5. 5. Tags - <footer>: "The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like."
  6. 6. Tags - <footer>: <footer role="contentinfo"> <p> Footer </p> <nav> <h5>Quick Links</h5> <ul role="navigation"> <li> <a href="#">link</a> </li> </ul> </nav> </footer>
  7. 7. GeoLocation: • navigator.geolocation.getCurrentPosition() - obtain the user's current location • navigator.geolocation.watchPosition() - watches for changes in a user's location
  8. 8. GeoLocation - Usability: • FF 3.5 • Opera • Chrome (via GoogleGears) • Safari on the IPhone • IE8
  9. 9. Graphics: Canvas & SVG: Canvas - is a new HTML element which can be used to draw graphics using scripting (usually JavaScript).
  10. 10. Graphics: Canvas & SVG: "SVG - Scalable Vector Graphics (SVG) is a standard from the W3C which is built on top of XML. The SVG standard describes ways that graphics can be drawn for use on the web." (
  11. 11. Audio / Video: • Offers the ability to easily embed media into HTML documents • Media playback can be controlled via JS and media events • A flash fallback could be provided for browsers that don't support HTML5 media
  12. 12. Audio / Video: Usability: • FF3.5, Chrome, Safari 3/4
  13. 13. Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg: •MP4 = MPEG 4 files with H264 video codec and AAC audio codec •WebM = WebM files with VP8 video codec and Vorbis audio codec •Ogg = Ogg files with Theora video codec and Vorbis audio codec Audio / Video: ,
  14. 14. Storage: • Session and Local Storage—provides a js interface to key-value storage. • Web Databases—RDBMS support for storing structured data inside the browser. • Application Cache—Local Cache
  15. 15. Storage: Usability: • IE8,FF3.5, Safari 4
  16. 16. Web Forms: • strongly-typed input fields • new attributes for defining constraints • new DOM interfaces