HTML5

HTML5 is a W3C Working Draft soon to be submitted for consideration as an official recommendation for future web development, and is intended to be a vocabulary and associated APIs for HTML and xHTML.

While the HTML5 web standard is estimated to begin receiving widespread acceptance and subsequent use by 2012, however, it will only be finalized as a W3C recommendation in 2022, yet will be in final draft form by 2014. In the meantime, many early adopters and industry leaders are heading initiatives to migrate to HTML5 and ease the pain in converting by providing translation/transformation services, failovers, and scripted (client-side JS, and/or, server-side) functionality replacements for features not yet implemented in certain browsers. For more of these types of tools see HTML5 Tools section.

HTML5 also offers an encouragingly robust Mobile Web application development platform by providing rich features using browser-native implementations of graphics, multimedia, semantics for information retrieval and more. The major mobile devices now come with HTML5 support baked into their browsers allowing for the first time, truly cross-platform video, audio, gaming and other engaging, interactive experiences previously limited to native mobile applications that were very device and Mobile OS-specific (thus not very reusable and certainly not cross-platform).

Specifications

• HTML5 - W3C Working Draft: http://www.w3.org/TR/html5/
• HTML 5 spec (overview): http://dev.w3.org/html5/spec/
• HTML5 -- What Working Group Draft (editable/work-in-progress): http://www.whatwg.org/specs/web-apps/current-work/

Video

• W3C -- HTML5 - video tag: http://www.w3.org/TR/html5/video.html (vocabulary and associated APIs for HTML and XHTML browser-native video playback)
• HTML 5 Video element: http://www.whatwg.org/specs/web-apps/current-work/#video

Media Session

• Media Session Standard: https://w3c.github.io/mediasession/

Media Fragments

• W3C -- Media Fragments URI 1.0 (basic): https://www.w3.org/TR/media-frags/ (used for things like specifying start time of a media file used in HTML5 video/audio to scrub player to, or for sending other metadata)

Picture-In-Picture

• W3C -- Picture-In-Picture API spec: https://w3c.github.io/picture-in-picture/

Audio

• HTML 5 Audio element: http://www.whatwg.org/specs/web-apps/current-work/#audio

Picture

• Picture - source: https://html.spec.whatwg.org/multipage/embedded-content.html#embedded-content (browser-native responsive images approach with polyfill for older browsers)
• Polyfilling picture without the overhead: https://www.w3.org/community/respimg/2012/03/15/polyfilling-picture-without-the-overhead/

IntersectionObserver

• W3C -- IntersectionObserver API: https://www.w3.org/TR/intersection-observer/ (used to lazy load images and time the loading of other page effects/graphics)

Canvas

• HTML 5 Canvas element: http://www.whatwg.org/specs/web-apps/current-work/#canvas

Drag & Drop

• HTML5 - Drag and Drop: http://dev.w3.org/html5/spec/dnd.html#dnd

Microdata

Microdata is expressed in HTML5 using itemprop, itemscope and itemtype attributes; in addition, efforts are underway to reuse previous initiatives on Microformats and RDFa for marking up regular HTML with Semantically meaningful metadata and references.

• Microdata schema: http://schema.org
• HTML5+RDFa module - A mechanism for embedding RDF in HTML: http://dev.w3.org/html5/rdfa/rdfa-module.html

WebComponents

1. Custom Elements: https://www.w3.org/TR/custom-elements/ --> graduated, now part of the HTML5 spec: https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements
2. Shadow DOM: https://www.w3.org/TR/shadow-dom/ --> https://dom.spec.whatwg.org/#shadow-trees
3. HTML Templates: https://www.w3.org/TR/html-templates/ --> graduated, now part of the HTML5 spec: https://www.w3.org/TR/html5/scripting-1.html#the-template-element
4. ProgressiveWebApp (PWA) APIs for ES X support: https://html.spec.whatwg.org/multipage/webappapis.html#integration-with-the-javascript-module-system

1. CSS Scoping Module: https://drafts.csswg.org/css-scoping/ (candidates for inclusion in CSS3/4 specs)
2. CSS Shadow Parts: https://drafts.csswg.org/css-shadow-parts/ (candidates for inclusion in CSS3/4 specs)

WebStorage & Offline AppCache

• WebStorage: http://dev.w3.org/html5/webstorage/ (Offline Data storage and embedded browser SQL instances)
• Offline Application Cache: http://dev.w3.org/html5/spec/offline.html
• HTML 5 Client-side Storage: http://www.webreference.com/authoring/languages/html/HTML5-Client-Side/
• HTML5 localStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
• HTML5 sessionStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
• HTML5 Indexed DB: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

WebWorkers

• wikipedia: Web Workers
• HTML5 - WebWorkers API: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
• HTML5 - WebWorkers in BlackBerry: https://developer.blackberry.com/html5/apis/v2_2/cordova_storage_storage.md.html

ServiceWorkers

• HTML5 - ServiceWorkers API: https://www.w3.org/TR/service-workers/ (W3C spec)
• Google dev docs -- Service Workers - an Introduction: https://developers.google.com/web/fundamentals/primers/service-workers/
• Moz dev -- Using Service Workers: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

WebMessaging

• HTML5 - WebMessaging: https://www.w3.org/TR/webmessaging/

WebSockets

• wikipedia: Web Sockets
• HTML5 - WebSockets API: https://www.w3.org/TR/websockets/
• TCP and UDP Socket API: https://www.w3.org/TR/raw-sockets/

Physical Web

• Physical Web: https://google.github.io/physical-web/ (Walk up and use anything)

Web Bluetooth

• Web Bluetooth API: https://webbluetoothcg.github.io/web-bluetooth/

WebBeacons

• WebBeacons API: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon

Push

• HTML5 - Push API: https://www.w3.org/TR/push-api/
• Mozilla Dev -- HTML5 - Push API: https://developer.mozilla.org/en-US/docs/Web/API/Push_API

SSE

• HTML5 - Server-Sent Events (SSE): https://www.w3.org/TR/eventsource/
• Mozilla Dev -- HTML5 - Server-sent events: https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events

Device Access

• HTML5 - Device Access:

Notifications

• HTML5 - Web Notifications API: https://www.w3.org/TR/notifications/
• IETF -- Generic Event Delivery Using HTTP Push: https://tools.ietf.org/html/draft-ietf-webpush-protocol-12
• IETF -- Voluntary Application Server Identification for Web Push (VAPID): https://tools.ietf.org/html/draft-ietf-webpush-vapid-01

Permissions

• HTML5 - Permissions API: https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API

Payments

• Payment Request API: https://www.w3.org/TR/payment-request/

Other

• Generic Device Sensor API: https://www.w3.org/TR/generic-sensor/
• Web Speech API: https://wicg.github.io/speech-api/
• WebShare API: https://wicg.github.io/web-share/
• WebShare Target API: https://github.com/mgiuca/web-share-target
• Media Session API spec: https://wicg.github.io/mediasession/

EXAMPLES

• The Web Hypertext Application Technology: http://www.whatwg.org/demos/
• HTML5 Demos: http://html5demos.com/

• Safari "HTML5" Showcase: http://www.apple.com/html5/
• Mozilla Hacks: http://hacks.mozilla.org/
• Chrome Experiments: http://www.chromeexperiments.com/
• IE9 -- HTML5 Labs: http://html5labs.interoperabilitybridges.com/
• Opera Dev center for Open Web/HTML5: http://dev.opera.com/articles/tags/open%20web/

Video examples

• HTML 5 Video on the Web: http://diveintohtml5.info/video.html
• DailyMotion: http://www.dailymotion.com/openvideodemo
• vimeo -- new HTML5 player!: http://vimeo.com/blog:268
• YouTube -- HTML5 Beta: http://www.youtube.com/html5

MediaSession examples

• Customize media notifications and playback controls with the Media Session API: https://web.dev/media-session/

Media Fragments examples

• MediaFragments demo: https://www.broken-links.com/tests/video/fragment.php

Picture-In-Picture examples

• Chrome samples -- Picture-In-Picture: https://googlechrome.github.io/samples/picture-in-picture/

Audio examples

• HTML5 - Audio Data API: https://wiki.mozilla.org/Audio_Data_API
• The HTML 5 Audio Element (demo): http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-the-html-5-audio-element/
• HTML5 <audio> and Audio() Support Tester: http://hpr.dogphilosophy.net/test/
• Mozilla demos - Audio player: http://moztw.org/demo/audioplayer/
• Getting Started with the HTML5 Audio Element: http://msdn.microsoft.com/en-us/library/ie/gg589529%28v=vs.85%29.aspx
• HTML5 – Audio tag cross domain: http://rongchaua.net/blog/html5-audio-tag-cross-domain/
• Native Audio in the browser: http://html5doctor.com/native-audio-in-the-browser/
• HTML5 Canvas + Audio = impressive Twitter visualization experiment: http://9elements.com/io/projects/html5/canvas/
• Introduction to the HTML5 audio tag javascript manipulation: http://www.position-absolute.com/articles/introduction-to-the-html5-audio-tag-javascript-manipulation/
• WheelsOfSteel - Virtual Turntables (HTML5 audio): http://wheelsofsteel.net/
• HTML5 Guitar Chord Finder (Beta) Released: http://acidmartin.wordpress.com/2011/09/26/html5-guitar-chord-finder-beta-released/
• Shiny Knob Control with jQuery and CSS3 http://tutorialzine.com/2011/11/pretty-switches-css3-jquery/
• Zynga's HTML5 Mobile Jukebox: https://github.com/zynga/jukebox

Picture examples

• Picturefill: https://scottjehl.github.io/picturefill/ | DEMO | DOWNLOAD | SRC | DOCS

• Responsive Images working group: https://responsiveimages.org/ (includes demos)
• IMG src-set attribute: https://webkit.org/demos/srcset/

IntersectionObserver examples

• IntersectionObserver polyfill: https://github.com/w3c/IntersectionObserver
• MozDev -- Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Canvas examples

• Canvas Demos: http://www.canvasdemos.com/
• SketchPad: http://mugtug.com/sketchpad/
• CanvasPaint (Web-based Microsoft Paint): http://canvaspaint.org/
• canvas-text -- An implementation of the HTML5 canvas text drawing methods for older browser: http://code.google.com/p/canvas-text/
• explorercanvas -- HTML5 Canvas for Internet Explorer : http://code.google.com/p/explorercanvas/

Drag & Drop examples

• Accessible HTML5 Drag n' Drop (WAI-ARIA): http://dev.opera.com/articles/view/accessible-drag-and-drop/
• HTML5 drag and drop in Firefox 3.5: http://decafbad.com/blog/2009/07/15/html5-drag-and-drop
• HTML 5 Drag and Drop + Microformats = a whole world of possibilities : http://zope.cetis.ac.uk/members/scott/blogview?entry=20090624222327

Microdata examples

See also: Rich Snippets

• Getting started with Microdata using existing Schema: http://schema.org/docs/gs.html
• RDFa and HTML5's Microdata: http://realtech.burningbird.net/semantic-web/rdf-and-rdfa/rdfa-and-html5s-maxwells-silver-hammer
• The HTML5 DOM and RDFa: http://www.jenitennison.com/blog/node/129
• What You Can't Do with HTML5 Microdata: http://www.jenitennison.com/blog/node/103

WebComponents examples

• Web Components in 2018: https://www.sitepen.com/blog/2018/07/06/web-components-in-2018/
• CustomElements everywhere: https://custom-elements-everywhere.com/ (scores all the JS Frameworks' adhered to HTML5 WebComponents' specs)
• MozDev -- Using templates and slots: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots
• W3C -- Introduction to Web Components: http://w3c.github.io/webcomponents/publish/explainer/
• MozDev -- WebComponents: https://developer.mozilla.org/en-US/docs/Web/Web_Components

WebStorage & Offline AppCache examples

• HTML5 Database; Better than Sliced Bread?: http://www.linux-mag.com/cache/7592/1.html
• HTML 5 Local Storage: http://openbit.co.uk/?p=105
• HTML5 in-browser SQL database storage: http://rickosborne.org/blog/index.php/2010/03/31/html5-in-browser-sql-database-storage/
• Searching in Your "Indexed DB" Database (HTML5/JS/ServiceWorkers): https://itnext.io/searching-in-your-indexeddb-database-d7cbf202a17
• Sharing sessionStorage between tabs for secure multi-tab authentication: https://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/

WebMessaging examples

• wikipedia: Web Messaging
• MDN -- Window.postMessage(): https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
• HTML5 - Web messaging: https://www.tutorialspoint.com/html5/html5_web_messaging.htm
• HTML5 HTML5 Messaging: http://tutorials.jenkov.com/html5/messaging.html (with example on sending JSON cross-domain much more safely than was typically done via JSONp)

WebWorker examples

• HTML5 WebWorkers tutorials: https://www.html5rocks.com/en/tutorials/websockets/basics/

ServiceWorker examples

• HTML5 ServiceWorker tutorial: https://googlechrome.github.io/samples/service-worker/basic/ (Google's official PoC guide)

WebSocket examples

• Websockets -- Using HTML5 client and PHP server for real-time server push: http://www.abrandao.com/2013/06/websockets-html5-php/
• HTML5 Server-push Technologies: http://today.java.net/article/2010/04/26/html5-server-push-technologies-part-2
• How HTML5 Web Sockets Interact With Proxy Servers: http://www.infoq.com/articles/Web-Sockets-Proxy-Servers
• Start Using HTML5 WebSockets Today: http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/
• phpwebsocket (PHP): http://code.google.com/p/phpwebsocket/
• Java WebSocket: http://java-websocket.org/

• pywebsocket(Python): http://code.google.com/p/pywebsocket/
• Aync WebSocket (Perl): http://search.cpan.org/~pevans/Net-Async-WebSocket-0.03/lib/Net/Async/WebSocket.pm
• Diving into HTML5 with WebSockets and Perl: http://showmetheco.de/articles/2011/2/diving-into-html5-with-websockets-and-perl.html
• SuperWebSocket (.NET): http://superwebsocket.codeplex.com/ | Nugget - websocket server (C#): http://nugget.codeplex.com/

WebBeacons examples

• Logging Activity With The Web Beacon API: https://www.smashingmagazine.com/2018/07/logging-activity-web-beacon-api/

Push examples

• A guide to getting the most out of the Push API: https://medium.freecodecamp.org/a-guide-to-getting-the-most-out-of-the-push-api-72a139bfeb44

SSE examples

• Stream Updates with Server-Sent Events: https://www.html5rocks.com/en/tutorials/eventsource/basics/

DeviceAccess examples

• Beyond HTML5 - Implementing <device> and stream management in WebKit: https://labs.ericsson.com/developer-community/blog/beyond-html5-implementing-device-and-stream-management-webkit

Permissions examples

• Permissions API for the Web: http://updates.html5rocks.com/2015/04/permissions-api-for-the-web

Notifications examples

• HTML5 Notifications example: https://www.html5rocks.com/en/tutorials/notifications/quick/
• HTML5 Desktop Notifications: https://www.sitepoint.com/html5-desktop-notifications/ | DEMO

Other examples

• Generic Sensor API playground: https://intel.github.io/generic-sensor-demos/ | SRC
• Engaging with the Real World -- Web Bluetooth & Physical Web (Chrome Dev Summit 2015): https://www.youtube.com/watch?v=_BUwOBdLjzQ
• BLE Peripheral Simulator: https://play.google.com/store/apps/details?id=io.github.webbluetoothcg.bletestperipheral | SRC

Tools

• Modernizr - start using HTML5 in your webapps now: http://modernizr.com/
• Initializr - Start an HTML5 project in 15 seconds: http://initializr.com/

• HTML5 Video Converter: http://www.html5-converter.com/
• HTML5 Interactive Code Editor: http://playground.html5rocks.com/
• HTML5 Live DOM Viewer: http://livedom.validator.nu/
• HTML5 readiness (of browsers/versions): http://html5readiness.com/
• CanIUse HTML5+CSS3: http://caniuse.com/
• The HTML5 test – how well does your browser support HTML5?: http://html5test.com/

Validator

• (X)HTML5 Validator: http://html5.validator.nu/
• W3C Markup Validation Service -- Tests: http://validator.w3.org/dev/tests/

Parsers

• The Validator.nu (JAVA) HTML5 Parser: http://about.validator.nu/htmlparser/
• html5-now -- A JavaScript library to support HTML5 in non-compliant browsers: http://code.google.com/p/html5-now/
• html5lib -- Ruby/Python Library for working with HTML documents : http://code.google.com/p/html5lib

Modernizr

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

• Modernizr: http://www.modernizr.com/
• Modernizr - all 290 tests: https://browserleaks.com/features (handy tool to test your own browser)

WebSocket Server

• Kaazing: http://www.kaazing.org/

Media Players

• JW Player for HTML5: http://www.longtailvideo.com/support/jw-player/jw-player-for-html5
• Five HTML5 video Libraries, Toolkits and Players: http://www.ajaxfreak.com/2010/05/02/five-html5-video-libraries-toolkits-and-players/

ChromeFrame

• Google Chrome Frame: http://code.google.com/chrome/chromeframe/ (deprecated and no longer actively maintained/supported, was a plug-in that seamlessly brought Google Chrome's open web technologies and speedy JavaScript engine to Internet Explorer)

Animation

• 11 Essential HTML5 Animation Tools for Designers: http://devzum.com/2015/02/21/best-html5-animation-tools-for-designers/

Resources

• HTML 5 cheat sheet: http://www.onblastblog.com/html5-cheat-sheet/ (by type)
• Periodic table of HTML5 elements: https://www.madebymike.com.au/demos/html5-periodic-table/
• HTML5 -- All tags and attributes: http://websitesetup.org/html5-cheat-sheet/ (alphabetic order) | List of new HTML5 elements (only)
• RiverTrail - Parallel Computation for Webapps via HTML5: https://github.com/RiverTrail/RiverTrail/wiki (Intel project)
• Periodic Table of the HTML5 Elements: http://joshduck.com/periodic-table.html
• HTML5 Glossary: http://html5doctor.com/glossary/
• HTML Media Capture: http://dev.w3.org/2009/dap/camera/
• HTML5 rocks: http://www.html5rocks.com/
• A List Apart - Get Ready for HTML 5: http://alistapart.com/article/get-ready-for-html-5
• HTML5 Skeleton: http://snipplr.com/view/17122/html5-skeleton/
• HTML5 & CSS3 Fundamentals - Development for Absolute Beginners: http://channel9.msdn.com/Series/HTML5-CSS3-Fundamentals-Development-for-Absolute-Beginners (video series)
• HTML Abstraction Markup Language (HAML): https://haml.info/

• The Current State of HTML5 Forms: http://www.wufoo.com/html5/
• HTML5 Media Support: http://webkit.org/blog/2007/11/12/html5-media-support/
• W3Schools: HTML 5 <video> tag: http://www.w3schools.com/tags/html5_video.asp
• The State of HTML5 Video (January 2012): http://www.longtailvideo.com/html5/
• New <video> Policies for iOS: https://webkit.org/blog/6784/new-video-policies-for-ios/
• How We’ll all be Building Websites in 5 years -- HTML5 and CSS3 layout (Feb 27, 2010): http://webtint.net/tutorials/how-well-be-building-websites-in-5-years-html5-and-css3-layout/
• That’s IT - Start working with the HTML5 (Dec 9, 2009): http://blog.eyoosuf.com/develop/tutorials/work-with-the-html5/
• HTML5 CSS3 starting PHP template: http://www.kamikazemusic.com/quick-tips/html5-css3-starting-template/
• Philip's HTML5 and RDFa examples: http://philip.html5.org/
• html5 -- Official Demos, tests, and code from the Working Group that supports the HTML5 specification's development: http://code.google.com/p/html5/
• HTML5-now: http://html5-now.appspot.com/
• HTML5 enabling script: http://remysharp.com/2009/01/07/html5-enabling-script/
• HTML5 Real-time Chroma Key (green screen replacement in video editing) from FF developer team: https://developer.mozilla.org/samples/video/chroma-key/index.xhtml
• Blowing up HTML5 video and mapping it into 3D space: http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space/
• HTML5/css3 .vs. Flash Ads: http://dev.sencha.com/deploy/css3-ads/
• Video For Everybody test page: http://camendesign.com/code/video_for_everybody/test.html
• HTML5 Player Comparison: http://html5video.org/wiki/HTML5_Player_Comparison
• HTML5 Audio — The State of Play: http://html5doctor.com/html5-audio-the-state-of-play/

Tutorials

• HTML5 New elements: http://csshook.com/cssexamples/html5-new-elements/
• Do HTML5 Script tag need type=“javascript”?: https://stackoverflow.com/questions/14323376/do-html5-script-tag-need-type-javascript
• Is type=“text/css” necessary in a <link> tag?: https://stackoverflow.com/questions/5409114/is-type-text-css-necessary-in-a-link-tag
• HTML5 - Browser and Feature Detection: http://msdn.microsoft.com/en-us/magazine/hh475813.aspx
• HTML 5 and CSS 3 -- The Techniques You’ll Soon Be Using: http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/
• The Power of HTML 5 and CSS 3: http://perishablepress.com/press/2009/07/19/power-of-html5-css3/
• HTML5-based web apps: http://www.developer.nokia.com/Resources/Library/Web/web-apps/html5-based-web-apps.html
• How to configure CloudFront for the HTML5 history API: https://advancedweb.hu/how-to-configure-cloudfront-for-the-html5-history-api/
• "Hello Mobile" HTML5 Boilerplate: http://www.youtube.com/watch?v=IyPXqqWzd_U
• Mastering HTML5 Prefetching: http://www.catswhocode.com/blog/mastering-html5-prefetching

• Using HTML5 audio and video: http://https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
• Make your HTML5 video play (from IIS) on mobile devices: http://html5center.sourceforge.net/make-your-html5-video-play-on-mobile-devices
• Making an iPad HTML5 App & making it work REALLY fast: http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/

• Start working with the HTML5: http://blog.eyoosuf.com/develop/tutorials/work-with-the-html5/
• Learn HTML5: http://csshook.com/cssexamples/learn-html5/
• HTML5 Primer for the Overwhelmed: http://www.sencha.com/blog/2010/05/23/html5-now-with-20-percent-more-internet/
• How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/
• Create offline Web applications on mobile devices with HTML5: http://www.ibm.com/developerworks/web/library/wa-offlineweb/index.html
• Creating mobile Web applications with HTML 5, Part 1 - Combine HTML 5, geolocation APIs, and Web services to create mobile mashups: http://www.ibm.com/developerworks/library/x-html5mobile1/index.html
• Regressive Enhancement with Modernizr and Yepnope: http://blogs.sitepoint.com/regressive-enhancement-with-modernizr-and-yepnope/
• How to Use the HTML5 Full-Screen API -- Fullscreen Image example: https://www.sitepoint.com/html5-full-screen-api/
• Fullscreen HTML5 video using CSS selectors: http://www.thecssninja.com/javascript/fullscreen

• Cross-Domain Messages with postMessage: http://somethingcliche.com/2010/05/12/cross-domain-messages-with-postmessage/ (example for IE6/7 too)
• HTML5 WebMessaging Experiment: http://www.codeproject.com/Articles/248264/HTML5-WebMessaging-Experiment
• HTML5 Web Socket in Essence: http://www.codeproject.com/Articles/209041/HTML5-Web-Socket-in-Essence

• Getting started with HTML5 geolocation: www.netmagazine.com/tutorials/getting-started-html5-geolocation
• Using the HTML5 Geolocation API: http://www.sitepoint.com/using-the-html5-geolocation-api/

• HMTL5 Canvas -- Text Animations: http://www.authorcode.com/text-animation-in-html5/ (i.e. see Scrolling Text Left to Right and reverse for a news ticker)
• What the Heck is Shadow DOM?: https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

• small JavaScript library to create knobs using SVG: http://eskimoblood.github.com/jim-knopf/ | SRC | DEMO
• JogDial.js -- JavaScript plugin for jog dial controls: | SRC | [ DEMO]
• Apple Watch Dials recreated in CSS: https://cssanimation.rocks/watch/ | DEMO | SRC

External Links

• wikipedia: HTML 5
• wikipedia: HTML5 video
• HTML5 - platform guide to all new APIs: https://platform.html5.org/
• HTML5 - Encrypted Media: http://w3c.github.io/encrypted-media/ (another DRM proposal)
• HTML5 Techniques for an Optimal Mobile Web Experience: https://dzone.com/articles/ingenious-html5-techniques-for-an-optimal-mob
• Is the Native Mobile App Ecosystem Worth Saving?: http://dzone.com/articles/is-the-native-mobile-app-ecosystem-worth-saving-1
• HTML 5 for a better Web: http://www.phpclasses.org/blog/post/98-HTML-5-for-a-better-Web.html
• HTML5 - proposed updates to HTTP Requests (AJAX): http://www.whatwg.org/specs/web-apps/current-work/#scripted-http
• 13 Incredibly Fresh New HTML5 Canvas Demos: http://addyosmani.com/blog/13-incredibly-fresh-new-canvas-demos/
• On HTML 5 Drag and Drop: http://www.alertdebugging.com/2009/08/16/on-html-5-drag-and-drop/
• The HTML5 drag and drop disaster: http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html
• How HTML5 will change the web: http://infoworld.com/d/developer-world/how-html5-will-change-the-web-080
• Introducing YouTube HTML5 Supported Videos: http://youtube-global.blogspot.com/2010/01/introducing-youtube-html5-supported.html
• First YouTube, Now Vimeo—HTML5 momentum?: http://openvideoalliance.org/2010/01/first-youtube-now-vimeo%E2%80%94html5-momentum/
• Google Bets Big on HTML 5 -- News from Google I/O: http://radar.oreilly.com/2009/05/google-bets-big-on-html-5.html
• Does HTML5 Really Beat Flash? The Surprising Results of New Tests: http://www.readwriteweb.com/archives/does_html5_really_beat_flash_surprising_results_of_new_tests.php
• Will HTML5 kill Flash?: http://www.yeahbutisitflash.com/?p=497
• Death to Flash - 3 Great HTML 5 Demos: http://www.readwriteweb.com/start/2010/01/death-to-flash-3-great-html-5.php
• Speed Test -- Flash vs. HTML5 On The Nexus One: http://phandroid.com/2010/04/01/speed-test-flash-vs-html5-on-the-nexus-one/
• The Present and Future of HTML5 Video Experiences: http://blog.brightcove.com/en/2010/03/present-and-future-html5-video-experiences
• HTML5 video and H.264 – what history tells us and why we’re standing with the web: http://www.0xdeadbeef.com/weblog/2010/01/html5-video-and-h-264-what-history-tells-us-and-why-were-standing-with-the-web/
• Flash Video vs. HTML5 video: http://www.asianews.com.pk/2010/04/aanarav-sareen-flash-video-vs-html5-2/
• HTML5 Video - Not Quite There Yet: http://www.longtailvideo.com/support/blog/11887/html5-video-not-quite-there-yet
• Quick Tip - HTML5 Video with a Fallback to Flash: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-html-5-video-with-a-fallback-to-flash/
• Video type parameters: http://wiki.whatwg.org/wiki/Video_type_parameters

• X/HTML 5 Versus XHTML 2: http://xhtml.com/en/future/x-html-5-versus-xhtml-2/
• HTML 5 won over XHTML 2: http://www.xml.lt/Blog/2009/07/06/HTML+5+won+over+XHTML+2
• An Unofficial Q&A about the Discontinuation of the XHTML2 WG: http://hsivonen.iki.fi/xhtml2-html5-q-and-a/
• HTML 5 and XHTML 5 - one vocabulary, two serializations: http://www.la-grange.net/2009/07/05/html5-xhtml5/
• XHTML versus HTML: http://webdevhobo.blogspot.com/2009/05/xhtml-versus-html.html
• Don’t Misuse REL as a Custom Attribute: http://www.sitepoint.com/blogs/2009/08/28/rel-not-a-custom-attribute/

• The Next-Gen Web: HTML5 - Will We Ever See A Real Standard?: http://www.techcrunch.com/2008/06/05/the-next-gen-web-html5-will-we-ever-see-a-real-standard/
• Could HTML 5 Kill Flash on the iPhone?: http://www.theiphoneblog.com/2009/06/16/html-5-kill-flash-iphone/
• Will HTML 5 kill Flash?: http://www.infoq.com/news/2009/06/will-html-5-kill-flash
• HTML5's Flash and Silverlight 'killer' potential chopped: http://www.theregister.co.uk/2009/07/08/html_5_media_spec/
• HTML 5 for a better Web - PHP Classes blog: http://www.phpclasses.org/blog/post/98-HTML-5-for-a-better-Web.html
• HTML 5 -- Could it kill Flash and Silverlight?: http://www.infoworld.com/d/developer-world/html-5-could-it-kill-flash-and-silverlight-291

• Semantics in HTML 5: http://www.alistapart.com/articles/semanticsinhtml5
• HTML5 and Semantics: http://blog.value-it.isoco.net/?p=341
• HTML5 & RDFa – Unlocking the Semantic Web: http://www.joergweishaupt.com/seo/design-and-usability/html5-rdfa-unlocking-the-semantic-web.html
• HTML5 JavaScript APIs: http://www.techiegyan.com/?p=1285

• Microsoft fires back at critics of its HTML5 strategy: http://blogs.zdnet.com/Bott/?p=2095
• Why we don't *need* HTML5 WebSocket (but still helps): http://blog.caplin.com/2010/03/02/why-we-dont-need-html5-websocket/
• jQuery 1.4 + HTML 5 Presentations: http://ihumanable.com/jquery/presentation.html
• A New Way Forward for HTML5: http://html5.digitalbazaar.com/a-new-way-forward/
• HTML 5 Editor Ian Hickson discusses the spec's current status: http://blogs.techrepublic.com.com/programming-and-development/?p=2524
• The All-In-OneAlmost-Alphabetica -- No-Bullshit Guide toDetecting Everything: http://diveintohtml5.info/everything.html
• Google I/O: Show kicks off with push for HTML5, browser computing: http://www.zdnet.com/blog/btl/google-io-show-kicks-off-with-push-for-html5-browser-computing/34709
• HTML5 Is Here Now (It’s Just Not For Your Desktop Yet): http://www.sencha.com/blog/2010/06/11/html5-is-here-now-its-just-not-for-your-desktop-yet/
• HTML 5 & WebSockets Are The Future Of The Web: http://www.indicthreads.com/4229/the-future-of-the-web-html-5-websocket-java-and-comet/
• Apple Developer resources - Using HTML5 Video & Audio: http://developer.apple.com/safari/library/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Using_HTML5_Audio_Video.pdf
• 4-way HTML5 speed test - Firefox 3.7 faster than Internet Explorer 9 (video): http://www.downloadsquad.com/2010/06/24/4-way-html5-speed-test-firefox-3-7-faster-than-internet-explorer-opera-chrome/
• HTML5 Cheatsheet - Just the Facts: http://www.crainbandy.com/html5/html5-cheatsheetfacts
• Coding A HTML 5 Layout From Scratch: http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
• Build a HTML5/CSS3 Website Layout Without Images – Part 2: http://www.crazyegg.net/miscellaneous/build-a-html5css3-website-layout-without-images-–-part-2/
• 70 CSS3 & HTML5 Tutorials: http://css3gallery.net/uncategorized/70-css3-html5-tutorials/
• 15 Free HTML5-CSS3 Templates to Start the Future of Web Design: http://blogfreakz.com/web-design/html5-css3-the-future-of-web-design/
• Flash 10 versus JS/HTML5: The Tour Guide: http://www.ludamix.com/archives/2010/02/entry_5.html
• MrDoob (impressive HTML5 demos): http://mrdoob.com/
• HTML5 sites: http://html5gallery.com/
• HTML 5 Slider Bar Tutorial: http://webhole.net/2010/04/24/html-5-slider-input-tutorial/
• HTML5 JS APIs: http://www.slideshare.net/remy.sharp/html5-js-apis
• High demand for HTML5, PHP, Mobile app projects: http://blogs.techrepublic.com.com/programming-and-development/?p=2874
• Native Audio in the browser: http://html5doctor.com/native-audio-in-the-browser/
• An HTML5 <audio> radio player: http://dev.opera.com/articles/view/html5-audio-radio-player/
• MooTools HTML5 Audio Player: http://simulacre.org/mootools-html5-audio-player/
• HTML 5 audio element and streaming: http://www.trygve-lie.com/blog/entry/html_5_audio_element_and
• HTML5 Websocket vs Flex Messaging: http://www.theserverlabs.com/blog/2010/06/09/html5-websocket-vs-flex-messaging/
• Playing with (and checking support for) HTML5 audio: http://www.html5laboratory.com/playing-with-audio-files.php
• HTML5 inputs and attribute support: http://www.miketaylr.com/code/input-type-attr.html
• HTML5 Video: Part 3 – Building a Custom Controller (check if video isPlaying): http://www.kratedesign.com/blog/2010/07/01/html5-video-part-3-building-a-custom-controller/
• Using document.createElement() to test for browser support for an element: http://www.javascriptkit.com/javatutors/createelementcheck.shtml
• Creating Pseudo 3D games with HTML5: http://dev.opera.com/articles/view/creating-pseudo-3d-games-with-html-5-can-1/
• 10 HTML5 Demo Sites to Drool Over: http://churchit.com/10-html5-demo-sites-to-drool-over/
• Canvas Demos: http://www.canvasdemos.com/
• Canvas Textures - shooter demo: http://www.benjoffe.com/code/demos/canvascape/textures
• Start using HTML5 Web Sockets today!: http://blancer.com/tutorials/69066/start-using-html5-websockets-today/
• 22 Handy HTML5 & CSS3 Tools, Resources And Guides: http://www.1stwebdesigner.com/resources/22-handy-html5-css3-tools-resources-and-guides/
• What is the best HTML5 demo you know of on the internet?: http://peerpong.com/q/1JNy6-what-is-the-best-html5-demo-you-know-of-on-the-internet
• FlasHTML5 Video - The JavaScript Library and WordPress Plugin: http://labs.byhook.com/2010/07/30/flashtml5-the-javascript-library-and-wordpress-plugin/
• HTML5 – New Old Semantics: http://blog.templatemonster.com/2010/03/10/html5-new-old-semantics/
• What to expect from HTML5: http://www.infoworld.com/d/developer-world/what-expect-html5-611?page=0,0
• Rebooting HTML for the Semantic Web: http://www.infoworld.com/t/platforms/rebooting-html-semantic-web-749?page=0,1
• I can't believe it's not Flash! Can you tell which ads are in HTML5?: http://www.guardian.co.uk/technology/blog/2010/jul/23/html5-flash-ads-quiz
• The Web Is Dead. Long Live the Internet: http://www.wired.com/magazine/2010/08/ff_webrip/all/1
• CBS Testing HTML5 Video Tag For IPad Support: http://www.reelseo.com/cbs-testing-html5-video-ipad-support/
• Dive Into HTML5 Video With The Masters (Philip Jagenstedt of Opera's HTML5 team; Jeroen Wijering of LongtailVideo and creator of JW media player) webinar replay: http://www.reelseo.com/html5-video-webinar-replay/
• 25 Essential HTML5 Tutorials and TechniquesRead more about 25 Essential HTML5 Tutorials and Techniques | Template Monster Blog by blog.templatemonster.com: http://blog.templatemonster.com/2010/06/16/25-html5-tutorials-techniques/
• Building a live news blogging system in php. Spiced with HTML5, CSS3 and jQuery [part I]: http://www.webia.info/articles/tutorials/building-a-live-news-blogging-system-in-php-spiced-with-html5-css3-and-jquery-part-i/
• Music Portfolio Template with HTML5 and jQuery: http://tympanus.net/codrops/2010/07/26/music-portfolio-template/
• HTML5 Canvas Image Effects -- Black & White: http://spyrestudios.com/html5-canvas-image-effects-black-white/
• Dynamic image collage with HTML5 and Canvas: http://radikalfx.com/2009/10/16/canvas-collage/
• An HTML5 offline image editor and uploader application: http://hacks.mozilla.org/2010/02/an-html5-offline-image-editor-and-uploader-application/
• Spinner-Panoramas: http://www.spinner-scripts.com/docs/spinner-pano.html
• ‘3D on 2D Canvas’ showcase: http://gyu.que.jp/jscloth/touch.html
• Spherical Panorama Virtual Tour Viewer for iPhone: http://janvrsinsky.com/spherical-panorama-virtual-tour-viewer-for-iphone/
• My 5 years old Quiksee competitor: http://www.visual-experiments.com/2010/09/27/my-5-years-old-quiksee-competitor/
• HTML5 Image Enhancer: http://www.dmxzone.com/go?17805
• HTML5 Showcase -- 48 Potential Flash-Killing Demos: http://www.hongkiat.com/blog/48-excellent-html5-demos/
• HTML5 Showcase – Flash Killing Demos?: http://www.610design.com/technology/html5-showcase-flash-killing-demos/
• HTML5, GeoLocation and Google: http://studiowhiz.com/2009/07/17/html5-geolocation-and-google/
• video + canvas = magic : http://html5doctor.com/video-canvas-magic/
• Microsoft's IE9 - HTML5, CSS3 new age browser standards tests vs. reality: http://my.opera.com/haavard/blog/2010/03/17/microsoft-svg-table
• HTML5 Input Type Keyboards on iPhone & Android Devices: http://www.petefreitag.com/item/768.cfm
• HTML5 Canvas Demos and Applications To Make You Say WOW: http://slodive.com/web-development/html5-canvas-demos-and-applications/
• I’ll have the FileSystem with a side of API read/write access please: http://www.thecssninja.com/javascript/filesystem
• Use the HTML5 File API to Work with Files Locally in the Browser: https://scotch.io/tutorials/use-the-html5-file-api-to-work-with-files-locally-in-the-browser
• W3C -- Hold off on deploying HTML5 in websites: http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041
• HTML5 Video Support and More!: http://blog.encoding.com/?p=517
• HTML5, Video, Canvas, and Ext JS: http://www.sencha.com/blog/2010/01/14/html5-video-canvas-extjs/
• Our Top Ten HTML5 Wishes for 2011: http://www.sencha.com/blog/2010/12/30/our-top-ten-html5-wishes-for-2011/
• All There Is To Know About HTML5 and CSS3: http://www.designyourway.net/blog/resources/all-there-is-to-know-about-html5-and-css3/
• Coding for IE6 = Progressive Enhancement: http://www.impressivewebs.com/ie6-progressive-enhancement/
• HTML editor dumps 'HTML5' even as W3C touts it: http://news.cnet.com/8301-30685_3-20029043-264.html
• The backlash over Google's HTML5 video bet: http://news.cnet.com/8301-30684_3-20028361-265.html
• Netflix Working on HTML5 Standard for Streaming Video: http://www.pcmag.com/article2/0,2817,2374694,00.asp
• HTML5 Canvas Demos and Applications To Make You Say WOW: http://slodive.com/web-development/html5-canvas-demos-and-applications/
• New device API for Firefox 3.6 -- orientation: http://hacks.mozilla.org/2009/10/orientation-for-firefox/
• 5 JavaScript APIs to Empower Your Mobile Web Pages: https://www.sitepoint.com/5-javascript-apis-empower-mobile-web-pages/ (sparse support only mostly by FireFox Mobile)
• 10 HTML5 APIs Worth Looking Into: https://www.sitepoint.com/10-html5-apis-worth-looking/
• How JavaScript & HTML5 Are Remaking the Web: http://mashable.com/2011/03/17/javascript-html5/
• The Story of the HTML5 Shiv: http://paulirish.com/2011/the-history-of-the-html5-shiv/
• Problems with HTML5 video codec detection: http://rakaz.nl/2010/06/problems-with-html5-video-codec-detection.html
• An introduction to the Canvas 2D API: http://html5doctor.com/an-introduction-to-the-canvas-2d-api/
• Semantic HTML5?: http://www.i-programmer.info/professional-programmer/i-programmer/3031-semantic-html-is-a-mistake.html
• SlideShare dumps Flash goes HTML5 - Developer resources vs. multiple apps: http://www.zdnet.com/blog/btl/slideshare-dumps-flash-goes-html5-developer-resources-vs-multiple-apps/59006
• JavaScript Face Detection + Canvas + Video = HTML5 Glasses!: http://wesbos.com/html5-video-face-detection-canvas-javascript/
• The Definitive Guide To HTML5 so far - 14 Predictions For 2012: http://techcrunch.com/2011/12/21/guide-to-html5-14-predictions-2012/
• Using HTML5 Audio and Video: https://developer.mozilla.org/en/Using_HTML5_audio_and_video
• Working with HTML5 multimedia components – Part 3: Custom controls : http://www.adobe.com/devnet/html5/articles/html5-multimedia-pt3.html#articlecontentAdobe_numberedheader_1
• Styling html5's range control: http://stackoverflow.com/questions/3802177/styling-html5s-range-control
• How can I load an image onto the HTML5 Canvas using Phonegap: http://stackoverflow.com/questions/5124892/how-can-i-load-an-image-onto-the-html5-canvas-using-phonegap
• Facebook's Mark Zuckerberg knocks HTML5 in favor of native apps: http://www.zdnet.com/facebooks-mark-zuckerberg-knocks-html5-in-favor-of-native-apps-7000004082/
• Mozilla on HTML5: Here's what Zuckerberg really meant to say: http://www.zdnet.com/mozilla-on-html5-heres-what-zuckerberg-really-meant-to-say-7000004146/
• Intel SVP -- Yes, HTML5 is over-hyped but it will move mobile forward: http://www.zdnet.com/intel-svp-yes-html5-is-over-hyped-but-it-will-move-mobile-forward-7000004150/
• EFF's Formal Objection to the HTML WG Draft Charter: http://www.eff.org/pages/drm/w3c-formal-objection-html-wg
• W3C Finalizes HTML5 Standard: http://java.dzone.com/articles/w3c-finalizes-html5-standard
• A Look Into HTML6 – What Is It and What It Has to Offer?: http://www.script-tutorials.com/a-look-into-html6-what-is-it-and-what-it-has-to-offer/
• Data URLs: http://dataurl.net/#about
• CSS Tricks - Data URIs: http://css-tricks.com/data-uris/
• wikipedia: Data URI scheme
• Mozilla Developer Network - Data URIs: https://developer.mozilla.org/en/docs/data_URIs
• Data URIs explained: http://www.nczonline.net/blog/2009/10/27/data-uris-explained/
• Data URIs make CSS sprites obsolete: http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/
• CSS Data URIs – Use Them In All Browsers Now!: http://jonraasch.com/blog/css-data-uris-in-all-browsers
• Why The data - URI Scheme Could Help Save Your Slow Site: http://www.sitepoint.com/why-the-data-uri-scheme-could-help-save-your-slow-site/ (applies to Desktop, not Mobile speed/optimization)
• Detecting Support for data: URIs: http://weston.ruter.net/2009/05/07/detecting-support-for-data-uris/
• Using Data URIs in CSS: http://nimbupani.com/using-data-uris-in-css.html
• Inline Images: http://www.websiteoptimization.com/speed/tweak/inline-images/
• Audio Sprites (and fixes for iOS): https://remysharp.com/2010/12/23/audio-sprites/ | GIST
• Mozilla dev team -- HTML5 - Video & Audio content: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
• Mozilla dev team -- HTML5 - Cross-browser audio basics: https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics
• Mozilla dev team -- Media formats supported by the HTML audio and video elements: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
• Mozilla dev team -- Media buffering, seeking, and time ranges: https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/buffering_seeking_time_ranges
• Mozilla dev team -- HTML5 audio player with style: https://hacks.mozilla.org/2009/06/audio-player-html5/
• Mozilla dev team -- HTML5 Audio Soundboard: https://blog.mozilla.org/webdev/2009/08/06/html5-audio-soundboard/
• Mozilla dev team -- Using the Web Audio API: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API
• Mozilla dev team -- Web Audio Editor: https://developer.mozilla.org/en-US/docs/Tools/Web_Audio_Editor
• IE dev team -- Getting Started with the HTML5 Audio Element: https://msdn.microsoft.com/en-us/library/gg589529(v=vs.85).aspx
• IE dev team -- HTML5 Audio Player + XML Playlist example: https://testdrive-archive.azurewebsites.net/HTML5/HTML5AudioXMLPlaylist/
• IE dev team -- Using JavaScript to Control the Audio Object: https://msdn.microsoft.com/en-us/library/gg589489(v=vs.85).aspx
• IE dev team -- Using Media Events to Add a Progress Bar: https://msdn.microsoft.com/en-us/library/gg589528(v=vs.85).aspx
• IE dev team -- Supporting More than one Audio File Format: https://msdn.microsoft.com/en-us/library/gg589524(v=vs.85).aspx
• IE dev team -- TURN THAT DOWN! Pausing or changing the volume of media when you leave the page: https://blogs.msdn.microsoft.com/mediastuff/2014/03/28/turn-that-down-pausing-or-changing-the-volume-of-media-when-you-leave-the-page/
• IE dev team -- Unlocking the power of HTML5 <audio>: https://blogs.msdn.microsoft.com/ie/2011/05/13/unlocking-the-power-of-html5-audio/
• Custom progress bar for <audio> and <progress> HTML5 elements: http://stackoverflow.com/questions/12314345/custom-progress-bar-for-audio-and-progress-html5-elements (ANSWER: use currentTime and duration together to figure out % played at any point in time)
• How to Create an Audio Player in jQuery, HTML5 & CSS3: https://designmodo.com/audio-player/ | DEMO
• Create a Customized HTML5 Audio Player: https://webdesign.tutsplus.com/tutorials/create-a-customized-html5-audio-player--webdesign-7081
• Creating a Custom Audio Player: http://r.osey.me/code/audio/
• Creating a Custom HTML5 Audio Element UI: https://designshack.net/articles/css/custom-html5-audio-element-ui/ | DEMO | SRC
• Is it possible to change the size of audio player in html5: http://stackoverflow.com/questions/13535235/is-it-possible-to-change-the-size-of-audio-player-in-html5
• Is it possible to style html5 audio tag?: http://stackoverflow.com/questions/4126708/is-it-possible-to-style-html5-audio-tag
• Building a Custom HTML5 Audio Player With Javascript: http://alexkatz.me/posts/building-a-custom-html5-audio-player-with-javascript/
• Building a Custom HTML5 Audio Player with jQuery: https://www.theparticlelab.com/building-a-custom-html5-audio-player-with-jquery/
• HTML5 audio clicking the progress bar to move to a different time: http://stackoverflow.com/questions/11706177/html5-audio-clicking-the-progress-bar-to-move-to-a-different-time
• Basic <progress> bar with label overlay: http://jsfiddle.net/qfwTy/
• Multiple progress bars in HTML5 with <progress> tag: https://jsfiddle.net/96z0gwv7/1/
• Cross Browser HTML5 Progress Bars In Depth: http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/ (custom styling and behaviors, including "Speedometer" effect)
• Are (non-void) self-closing tags valid in HTML5?: https://stackoverflow.com/questions/3558119/are-non-void-self-closing-tags-valid-in-html5
• In Protest of the (HTML5) Web{*} API Bulldozer https://bjt2n3904.medium.com/in-protest-of-the-web-bulldozer-e0fce4567d26
• XHTML Is Dead, Long Live "XML-Valid HTML5" instead: http://tantek.com/2010/302/b1/xhtml-dead-long-live-xml-valid-html5 (i.e. please self-close HTML5 where possible for easier XML parsing)

See Also

HTML | XHTML | CSS3 | RDFa | SEO | Multimedia | Video | Audio | Ogg | H.264