What is this HTML5 you talk about?

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

<article>

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.

<section>

tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document.

<header> 

tag specifies an introduction, or a group of navigation elements for the document.

<footer>

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.

<aside>

tag defines some content aside from the content it is placed in. The aside content should be related to the surrounding content.

<nav>

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.

· Canvas api is a two-dimensional drawing surface that you can program with Javascript.

· 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

· SVG

· Geolocation

· CSS3 @font-face

Structure of HTML4 & HTML5 webpage

clip_image002

clip_image004

SIMPLE HTML5 LAYOUT

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8″ />

<title>Simple HTML5 layout</title>

<link rel=”stylesheet” href=”style.css”>

<script src=”file.js”></script

</head>

<body>

<header id=”main-header”></header>

<div id=”main-content”>

<section id=”content”>

<aside id=”form”>

<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”>

</form>

</aside>

</section>

<figure>

<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>

</figure>

<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″>

</object>

</video>

</section>

</div>

<footer></footer>

</body>

</html>

Examples of HTML5 pages

Here are some examples of HTML5. These demos are pure HTML5.

http://demos.w3avenue.com/

And another sample of HTML5 demos, but these ones use combinations of HTML5, CSS3 and JavaScript.

IE10 TESTDRIVE

Safaridemos

html5gallery.com
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.

http://ie.microsoft.com/testdrive/Default.html

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.

Geolocation Demo

  • 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.

Canvas and Geolocation demo

  • Forms: Improvements made for the HTML5 forms makes Field validating by the browser easier. The more that can be handled by the browser means less time downloading javascript code and less round trips to the server if validation can be found before the form is posted.

HTML5 mobile demos:

microsoft mobile demo

Conclusion

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:

http://dev.w3.org/html5/spec/Overview.html

http://www.whatwg.org/specs/web-apps/current-work/multipage/

http://diveintohtml5.org/

http://ishtml5readyyet.com/
SamuliSulkkoAbout the Author

Samuli Sulkko
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

Advertisements

About arcticmsp

The Finnish Microsoft Student Partners are a group of enthusiastic students, who are interested in technology and all things new, techy and cool!
This entry was posted in Development, HTML5. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s