html5 exploring -- by udayakumar mathivanan
TRANSCRIPT
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.
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>
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>
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>
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."
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>
GeoLocation:
• navigator.geolocation.getCurrentPosition() -
obtain the user's current location• navigator.geolocation.watchPosition() - watches for
changes in a user's location
Graphics: Canvas & SVG:Canvas - is a new HTML element which can be used to draw graphics using scripting (usually JavaScript).
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." (http://www.svgbasics.com/index.html)
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
Video Formats and Browser SupportCurrently, 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:
,
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
Web Forms:• strongly-typed input fields• new attributes for defining constraints• new DOM interfaces