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

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

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

Audio / Video:Usability:

• FF3.5, Chrome, Safari 3/4

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

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

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

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

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

↶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