HTML5 Meetup Presentation

This presentation is brought to you by:

What is HTML5?

HTML5 is:

• The new recommended version of HTML (not final yet)
• HTML(5) + CSS(3) + JavaScript/jQuery/AJAX + new API's
• All of the above + best practices (e.g., responsive design, separation of content and style, etc.)
• Overall intent is to reduce load on back-end, PhotoShop, Flash, Silverlight, etc.

HTML5 is set to be finalized in 2014. It was going to be 2021. Yes, an HTML5.1 is being worked on. Some suggest we get rid of version numbers. HTML versions work different than software versions because they are "released" to the public before they are actually made. The W3C and the WHATWG make recommendations for a new version and then browser makers do what they can to implement them, then developers hopefully use them. Meanwhile, the W3C and the WHATWG continue to discuss if their recommendations are any good...

HTML5 is more forgiving of "tag soup" than XHTML was. HTML5 goes back to allowing elements to be coded in upper or lowercase, doesn't require attributes to have values and does not require attribute values to be in quotes. The doctype is much simpler, and doesn't even require the inclusion of the HEAD and BODY elements.

New HTML5 Elements

• HEADER
• FOOTER
• NAV
• ASIDE
• ARTICLE
• SECTION
• TIME (was taken out then put back in)
• MARK
• FIGURE(and FIGCAPTION)
• METER
• MAIN
• VIDEO
• AUDIO
• CANVAS
• TEMPLATE

NOTE: Don't overuse. Not every image is a figure. Not every link is to be wrapped in NAV tags.

• HGROUP probably going away

Deprecated Elements

• ACRONYM
• APPLET
• BASEFONT
• BIG
• CENTER
• DIR
• FONT
• FRAME
• FRAMESET
• ISINDEX
• NOFRAMES
• STRIKE
• TT

New HTML5 Form Input Types

• number
• email
• tel
• url
• search
• date
• datetime
• month
• number+pattern
• range
• color
• password
• week

New form element input types unrecognized by older browser default to regular text input fields.

New HTML5 Form Element Attribute Types

• placeholder
• required

HTML5 API's

From Wikipedia: In addition to specifying markup, HTML5 specifies scripting application programming interfaces (APIs) that can be used with JavaScript. Existing document object model (DOM) interfaces are extended and de facto features documented.

• Microdata (make information more machine readable)
• Canvas
• Web Sockets
• Web Workers
• History (keep track of browsing history better, especially when AJAX is involved)
• User Interaction (contenteditable)
• Offline Web Applications/Application Cache
• Drag and Drop
• Media/Text Track
• Vibrate
• autofocus Attribute
• window.postMessage (send messages between windows and IFRAME elements
• Element.dataset (allows developers to get and set data- attribute values)
• ContextMenu
• Element.classList
• Link Prefetching (load assets befor user goes to them)
• Battery
• getUserMedia
• Fullscreen
• Page Visibility
• Geolocation

and more…

Polyfills exist to make older browsers behave like newer browsers. Use judiciously.

Links

• The Internet in 1969
• The First Web Page
• Periodic Table of the Elements
• Can I Use?
• Atari Arcade
• Apple HTML5 Showcase
• Hakim's HTML5 Experiments
• HTML5 Bookmarks
• About the TEMPLATE Tag
• Animate Your HTML5
• Default keyboards for HTML5 input types
• Browser Trends May 2013
• The Almighty HTML5 Logo
• 20 Things I Learned
• HTML5 Boilerplate
• Modernizr
• Web Workers
• HTML5 Event at Yahoo! Santa Monica
• My Own Boilerplate on GitHub