Semantic elements like <form>, <table>, and <img> clearly define their content, while non-semantic elements like <div> and <span> provide no information about meaning. HTML5 introduces new semantic elements like <nav> for navigation links, <article> for independent content items, and <section> for storing content in a database record. New form input types provide constraints for search boxes, numbers, sliders and more. Audio and video can be embedded and controlled with JavaScript events. Local storage, databases, and caching improve application functionality. Modernizr detects native HTML5 support and enables polyfills for missing features.

14. 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.

15. 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>

16. 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>

17. 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>

18. 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."

19. 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>

20. GeoLocation:
• navigator.geolocation.getCurrentPosition() -
obtain the user's current location
• navigator.geolocation.watchPosition() - watches for
changes in a user's location

22. GeoLocation -
Usability:
• FF 3.5
• Opera
• Chrome (via GoogleGears)
• Safari on the IPhone
• IE8

23. Graphics: Canvas
& SVG:
Canvas - is a new HTML element which can be used to
draw graphics using scripting (usually JavaScript).

24. 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)

25. 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

26. Audio / Video:
Usability:
• FF3.5, Chrome, Safari 3/4

27. 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:
,

28. 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

29. Storage:
Usability:
• IE8,FF3.5, Safari 4

33. Web Forms:
• strongly-typed input fields
• new attributes for defining constraints
• new DOM interfaces

34. 1.<input type="search"> for search boxes
2.<input type="number"> for spinboxes
3.<input type="range"> for sliders
4.<input type="color"> for color pickers
5.<input type="tel"> for telephone numbers
6.<input type="url"> for web addresses
7.<input type="email"> for email addresses
8.<input type="date"> for calendar date pickers
9.<input type="month"> for months
10.<input type="week"> for weeks
11.<input type="time"> for timestamps
12.<input type="datetime"> for precise, absolute date+time stamps
13.<input type="datetime-local"> for local dates and times

36. function supports_canvas()
{ return
!!document.createElement('canvas').
getContext; }

37. ↶
check for native date picker
if (!Modernizr.inputtypes.date) { // no
native support for <input type="date"> :( //
maybe build one yourself with Dojo or
jQueryUI }
MODERNIZR, AN HTML5
DETECTION LIBRARY