HTML5 is the newest specification of HTML and the evolution of HTML4 and DOM level 2. It provides new features that are necessary for modern web applications and it’s also designed to be a cross-platform, so that you don’t have to be running any particular operating system.
The only thing you need is a modern web-browser. The latest versions of Internet Explorer, Safari, Mozilla Firefox, Google Chrome and Opera support many of HTML5 features. HTML5 has many new features to make creating websites easier and to improve people’s experiences when using websites. HTML5 it’s designed to be backward compatible with previous versions of HTML and existing web browsers and it also introduces new features like new semantic elements and attributes:
Examples of new semantic elements
tag specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document.
tag specifies an introduction, or a group of navigation elements for the document.
tag defines the footer of a section or document. Typically contains the name of the author, the date the document was written and/or contact information.
tag defines some content aside from the content it is placed in. The aside content should be related to the surrounding content.
tag defines a section of navigation links.
HTML5 has also Built- in APIs to assist in building web applications.
· Api for providing support for <audio> and <video>, so the need of plug-ins will be reduced.
· Offline web application api that works after network access is interrupted.
· Drag&Drop api.
· Geolocation, where visitors can choose to share their physical location with the application.
· Improved HTML5 forms that offers improvements to text inputs, search boxes and other fields and provide better control for validating data.
It’s also very important to know what doesn’t belong to HTML5 specification. Features listed below are usually mentioned when talking about HTML5, but these features do not belong to HTML5 specification and they have their own specifications.
· Web Sockets
· CSS3 Transitions
· CSS3 @font-face
Structure of HTML4 & HTML5 webpage
SIMPLE HTML5 LAYOUT
<meta charset=”utf-8″ />
<title>Simple HTML5 layout</title>
<link rel=”stylesheet” href=”style.css”>
<form action=”template_submit” method=”get”>
<input id=”name” name=”name” type=”text” class=”textfield name” placeholder=”some text” >
<input id=”email” name=”email” type=”text” class=”textfield email” placeholder=”Email”>
<textarea id=”message” name=”message” type=”textarea” placeholder=”Some text”></textarea>
<input type=”submit” value=”some text” class=”submit”>
<a href=”#” class=”link-thumbs”><img src=”images/picture-1.png” alt=”some text”></a>
<a href=”#” class=”link-thumbs”><img src=”images/picture-2.png” alt=”some text”></a>
<video controls width=”380″ height=”210″ poster=”images/placeholder.jpg”>
<source src=”video/video-1.mp4″ type=”video/mp4″>
<object type=”application/x-shockwave-flash” width=”380″ height=”268″ data=”player.swf?file=video/video-1.mp4″>
<param name=”movie” value=”player.swf?file=video/video-1.mp4″>
Examples of HTML5 pages
Here are some examples of HTML5. These demos are pure HTML5.
Future of HTML5
HTML5 is reaching candidate status next year in 2012, finish testing in 2020 and full recommendation status in 2022.
While the HTML 5 specification is not finalized, that shouldn’t stop you experimenting with it. You can use it with any browser that supports it or some part of it.
For example IE 9 uses Windows modern graphics API’s and the PC’s hardware to accelerate all the graphics and text that browser draws on a screen.
Microsoft has also announced that IE10 will support a new SVG support, coined GPU-Powered HTML5.
IE10 adds native HTML5 support and IE10 builds on full hardware acceleration and continues Microsofts focus on site-ready Web-standards.
HTML5 as a mobile platform ?
One of the reasons why mobile would favour HTML5 is that smartphones are turning their back on flash, as Apple has done, and the most popular mobile browsers have already adopted and implemented many significant parts of the HTML 5 specification. This will be a major factor when building mobile friendly websites in the future.
The new Windows Phone 7 Mango update will be running a mobile version of IE9 that is HTML5-complient mobile version.
HTML5 is an important step for mobile web application development. Some of the key elements that it provides are:
- Offline Support: The AppCache and Database make it possible for mobile developers to store information locally on the device. Offline Demo
- GeoLocation API: Is a separate specification but it is often bundled together with HTML5 because the mobile phones that are including HTML5 are generally supporting the GeoLocation API.
- Canvas and Video: With these two features it’s easy to add graphics and video to a page without using any plugins. When supported by the phone’s hardware they provide a powerful ways to get media into a page.
HTML5 mobile demos:
There is more interesting stuff in the specification, but it’s not implemented yet.
For example, you can register the browser as a content handler so that clicking a document or video or photo on your desktop opens the browser and goes to a web application that can edit that document, complete with application toolbars, and all built with HTML5. But it’s still awaiting implementation.
HTML5 will be a much bigger deal much sooner than what people might think, so start using HTML5 now and try out it’s new features and experiment with the new markup structures. Add video on to your website and use <canvas> for building games and apps.
Fore more info:
About the Author
Samuli is a student partner from Turku University of Applied Sciences studying information technology. He’s hots for Web development, mobile and user interface design! Samuli is one of the founders of www.SaloTechClub.com