HTML5 Rocks

HTML5 Rocks

HTML5 Features

Semantics

Semantics is one of the most distinctive features of the Web Platform versus other application platforms. Developers usually ignore or de-prioritize such feature but the mastery of it can bring many benefits to our projects.

The Web is text and text has a meaning. Ultimately the content that our browsers read is pure text. Web sites and web applications have been created in an ecosystem where text based content is linkable, searchable and mashable. In the open web scenario our content can be shown, fed and remixed by third parties, search engines and accessibility tools. All these benefits don't come for free. Automated tools can only do half of the job at recognizing the nature of the content. The better job the developer does at marking the right semantics of the content the easier will be for the rest of the agents to deal with it. HTML5 provides a series of tools to make developers life easier too:

  • New media elements.
  • New structural elements.
  • New semantics for internationalization.
  • New link relation types.
  • New attributes.
  • New form types.
  • New microdata syntax for additional semantics.

What’s New

Demos

Google Rich Snippets Testing Tool
Input form types for mobile
New form types demo
HTML5 <progress> and <meter> tags

In the Wild

Check any wordpress blog source code to see how their templates use new link relations like: next, prev, tag, bookmark, search, etc
Check how the reviews in The Telegraph are using validated schema.org microdata in their source code.
Apple is one of the few big brands using new HTML5 elements (nav, article, footer, etc) on their main site.

Resources