HTML5• The latest version of HTML today forthe Modern Web.• First published by WHATWG (WebHypertext Application TechnologyWorking Group) in 2007.
a living standard• HTML5 is considered to be a livingstandard.• This is because WHATWG is acommunity driven body, and theprocess of deﬁning that standard isopen.• Some features, such as the <canvas>tag, were introduced by vendors, thanadopted as part of the standard.
the semantic layoutcustom data attributesnew UI tagsintelligent form inputsCSS3canvas graphicsaudio and videodrag and drop eventsoffline storagegeolocation
the semantic layout• A new group of HTML tags allows youto build your Web page using asemantic layout.• This means that logically groupedsections have equally logical tags.• e.g. Headers and footers are wrappedin <header> and <footer> tags.Sections and contents can be enclosedin <section> and <article> tags.
custom data attributes• Custom data attributes allow you tostore custom, arbitrary data inside yourHTML elements.• This is incredibly useful if you need datato be stored statefully within yourelements.
<img data-flickr-photo-id="7953435190" alt="Tacoma Hipsters"src="http://farm4.staticflickr.com/3173/2768042395_5208451c4e_o.jpg" />• alt : Alternate, placeholder text of theimage.• src : The URL of the image.• data-flickr-photo-id : The dataattribute of the element, indicating theFlickr ID of the image.
new UI tags• HTML5 also introduces a few new userinterface (UI) tags.• e.g., the <mark> tag for highlightingtext, <figure> and <figcaption>for providing new details to images,<meter> and <progress> to displaystatic meters and progress bars.
smarter forms• Form inputs allow your users to‘submit’ data to your site and post itback to the server.• HTML5 allows much more intelligentform ﬁelds that restrict date entry tospeciﬁc input formats.• For example, you can enforce numbers,number ranges, dates, e-mailaddresses and URLs within form ﬁelds.
CSS3• New styles such as gradients, boxshadows etc. without the use of images.• Also a much more powerful way ofselecting individual attributes.• You can also create transformations,transitions and animations.
canvas graphics• The <canvas> element, and theCanvas API, can be used todynamically create graphics within thebrowser.• Originally designed to compete directlywith Adobe Flash.• HTML5 also has an experimentalspeciﬁcation called WebGL, that allowsfor 3D graphics within the Web browser.
audio and videosupport• Via the use of the <audio> and<video> tags, allowing for mediaplayback within the browser without theuse of Flash.
offline storage• For many years, cookies have beenused as a way to store informationwithin a user’s Web Browser.• The Web Storage API is the HTML5version of this, being simpler and morepowerful.• WebSQL and IndexedDB allow fordatabase-style storage within thebrowser.
offline detection /synchronisation• HTML5 allows for your website / WebApp to work ofﬂine.• It does this by creating an ofﬂine copyof your site and syncing it with theonline copy there’s an Internetconnection.• Creates the illusion that your Web Appis always available.
geolocation• You can use the browser’s geolocationAPI to provide information andguidance about a user’s physicallocation.• These can be tied into other services,such as Google Maps, to providelocation-based Web content to you.
photos near youusing geo-location, and the Flickr and Google Maps APIs
“HTML5 or native app?”an examination of semantic elements
responsive webdesignResponsive Web Design, uses liquid layouts andCSS3 media queries to adapt the layout to theviewing environment.
This stylesheet gets ‘activated’ when the screen size is belowa certain width<head><meta charset="utf-8"><title>HTML5 or Native App?</title><link rel="stylesheet" media="all" href="styles.css" type="text/css" /><link rel="stylesheet" media="screen and (max-width: 500px)" href="mobile.css"type="text/css" /><meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=no"><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head>Add a new stylesheet, mobile.css