HTML5 101

<HTML5>What is it?Why is it important?

First off, what is HTML?HTML stands for Hyper Text Markup LanguageIt is a language that allows people to create structured documents by denoting structural elements such as titles, headings and paragraphs using HTML ‘tags’Here are a few HTML tags:<title><body><p><a>In simple terms, think of it as the language that web browsers understand that tells them how to display content on web pages

W3CThe World Wide Web Consortium (W3C) is an organisation that is responsible for defining web standards – including the HTML standardThey maintain the standards which browsers (should) comply with in order that they correctly display web content - should, because no two browsers are the same…which is the cause of so many headaches for web developers!Over a number of years, HTML has developed and new versions of the HTML standard have been publishedThe latest version is version 5

Key features of HTML5There are 4 key features of HTML5 that make it stand outThe canvas elementcan be used for rendering graphs, game graphics or other visual images on the fly.All done without having to rely on plug-ins. The possibilities are endless.Embedding video used to be impossible without third-party plugins such as Apple QuickTime or Adobe Flash.Thanks to the video element, now it’s possible. It is intended by its creators to become the new standard way to show video online.Sniffing a user’s location is not a new thing on the web. In fact, most websites already to this by means of IP address detection. But this is not always reliable, so HTML5’s geolocation is an alternate method of correctly pinpointing a user’s location. The new idea is to get the location information from WiFi towers and GPS.The offline web applications enable users to continue interacting with web applications and documents even when their network connection is unavailable. The user can, for instance, access email locally without having to connect to the internet or install an external client.Infographic from http://www.focus.com/images/view/11905/

HTML5 graphics (canvas)Try a few of these out (in Firefox!) to see the possibilities with HTML5http://mrdoob.com/projects/harmony/http://html5demos.com/canvas-gradhttp://hakim.se/experiments/html5/wave/03/http://www.andrew-hoyer.com/experiments/cloth/http://addyosmani.com/resources/perspective/Although much of the above can be achieved with Flash – the important point is that no browser plugins (of which Flash is one) are required with HTML5This is important when you consider, for example, that Flash isn’t available for some devices like the iPhone

HTML5 graphics (canvas)The band Arcade Fire recently released a very impressive HTML5 / Google Maps mashupfor their single The Wilderness DowntownTry this in Google Chrome (make sure you’ve closed all your other apps first!)http://www.thewildernessdowntown.com/

Does HTML5 replace Flash?Not really…here’s a nice little summary…

HTML5 and SEOHTML5 will change the way search engines index contentIt introduces new tags with semantic meaning, such as <article>, <nav>, <footer>Search engines will be able to use this new semantic markup to treat different parts of the page differently – perhaps <article> content will be deemed more important than <footer> content?So as search engines start to use these semantic tags in their algorithms we may benefit our clients’ sites by integrating them into our sites

HTML5 and SEONot only that, content that might once have been built in Flash and can in future be built in an HTML5 <canvas> will be more easily ‘indexable’ by search enginesSo more keyword-rich content could be found by the search engine and attributed to our sitesSimilarly, with the ability to annotate <video> elements with standard HTML markup, these annotations will also be indexableAs opposed to being embedded within the video and therefore unavailable to search engine spiders

GeolocationCould be used, for example, to tell you where your nearest Tesco store is without you having to enter your addressOr perhaps find people with similar interests who are near youImagine all the Google ads you see are for shops within a 10 minute walk from where you sit! If you so consent, you can provide your location information via your IP address and WiFi access point data

GeolocationTry this http://maxheapsize.com/static/html5geolocationdemo.htmlCan choose to opt-in to share location

VideoAt the moment, there are a number of ways to play video on web pages – most of which require a pluginHTML5 introduces the <video> tag for playing videos without the need for browser pluginsVideos can have styled annotations created with simple HTML elements such as the demo shown here (half way down the page):http://yayquery.github.com/jquery-singalong/Other useful links:http://www.html5video.org/

So can I put videos in email content?Sadly, that is a way off yet. Not all email clients support the new <video> tagSome clients display a ‘fallback’ imageSee http://www.campaignmonitor.com/blog/post/2905/html5-and-video-in-email/ for more info

Offline featuresThe offline features of HTML5 mean that websites and data associated with them can be stored locallyHTML5 gives developers the ability to create and store data in local SQL databasesSo web applications could be created that still work when you’re disconnected from the internet

HTML5 and formsThe HTML5 standard introduces loads of new data entry input typesThis means the browser can do lots of stuff that normally needs to be custom-written, like validate an email address or a dateUsing a combination of HTML5 and CSS, this will mean we’ll be able to highlight invalid form fields without lots of extra codingMore info:http://articles.sitepoint.com/article/html5-formshttp://24ways.org/examples/have-a-field-day-with-html5-forms/24ways-form.html

Browser support for HTML5HTML5 is still in its infancy, but many current browsers support some of its featuresThe chart shows you how much each browser supports all of the HTML5 features

ConclusionIt’s early days for HTML5 at the moment Browser support will continue to improve – Microsoft’s new IE9 browser (currently in public beta) will bring it’s support up to 60% or moreWe could start to build on some of it’s new features, but will (for the moment) have to provide alternative content that is backwardly compatible with non-supporting browsers

Useful / interesting linksWikipedia article on HTML5http://en.wikipedia.org/wiki/HTML5Demos http://creativeproject.wordpress.com/2010/07/27/14-of-the-best-html5-tutorials/Lots of useful HTML5 infohttp://www.franksinton.com/html5-list/Which browsers support what features of HTML5 ?http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/http://html5readiness.com/http://www.focus.com/images/view/11905/

For more informationMatt HardyDigital Director+44 (0)1225 476 066matt.hardy@realadventure.co.uk@mcrilf@realadventure

HTML5 101

More Related Content

What's hot

Similar to HTML5 101

Recently uploaded

HTML5 101