It’s been over a decade since HTML4 came out and the web has made significant changes since then. There are many more online users, the development of open source browsers and applications have increased, as well as their capabilities. If the phrase “HTML5” leaves you slightly puzzled, Wikipedia explains it this way:
HTML5 is the next major revision of the HTML standard…for structuring and presenting content on the World Wide Web.
A few HTML5 features:
- Structure. HTML5 has undergone a restructuring of the way its language organizes content. Using this new language will enable developers and designers to be more efficient in organizing content and code. With this efficiency, expect reduced time and increased stability.
- Embedded media. A new video element was introduced to allow a universal embedding of multiple video and audio formats. Flash, Windows Media, and QuickTime are all used in various amounts in different browsers and sites, but now are able to be used in your site. This means there will be no additional hosting costs for videos, no linking people away from your site, and no dependency on hosts to allow your videos to be online 24/7.
- SVG (scalable vector graphics) and Canvas. Can you imagine having dynamic graphs on your website that don’t depend on third-party software like Flash? Simple Javascript powers clear and sharp graphs and images that interact with the user’s mouse. (See homepage of Grace Meridian Hill for an example of Canvas openbox9 did).
- APIs (application programming interfaces). It seems there are new standard interfaces for applications that come with HTML5. Along with the new drag & drop and geolocation elements introduced, these APIs will make creating and launching new and exciting applications much easier… much more affordable too.
Who’s using it:†
- Empire State Recordings features an HTML5 music player, which works beautifully on iphone, ipad, and desktop browsers.
- Nakshart uses canvas, geo-location, and local storage to render an interactive browser-based sky map.
- This Shell uses both video and Canvas, as well as some of the other new semantic tags (header, footer, section, aside) to create an interactive puzzle for the user (with a pretty cool free song if you can complete the puzzle in time).
- Anchor Modeling is a powerful web application that uses structural elements, such as Canvas and localStorage, and is heavily JavaScript oriented. Once a model is created it can be animated, or converted to any number of formats, including SVG.
What does it all mean?
These HTML5 enhancements and capabilities mean a lot to the budgeted nonprofit who is not short of ideas that were once too costly to build. HTML5* may allow for greater user interactivity with your online presence with less hassle of worrying about third-party plug-ins or download time. And that’s all great news!
Just for Fun:
- Have fun using and moving around with these symbols for web, mobile, apps, and wireframes.
*Note on HTML5: It is still under development, but will soon become fully supported after two test suites have been implemented and approved.
† This sampling of examples come from various forums and posts across the beautiful web.
