Home >
Over the last decade HTML has been trying to be a better RIA solution. First came CSS, then came AJAX and Web 2.0; but, it is not until now with the rapid adoption of HTML5 that the lines are blurring between Adobe Flash, Microsoft SilverLight, and HTML. In this article you will learn about what is being included inside the new HTML5 standard such as Canvas, Video, and dramatically improved CSS. More importantly, you will find out which Web browser you should be using to take advantage of the latest HTML5 technologies.
HTML5: a coming of age story
The year was 1997 and the World Wide Web Consortium group (W3C) released HTML 4.0. This was the last major release to impact Web designers and developers. Yes, XHTML came a couple of years later, but it did not bring much visually to the party. For more than a decade, the HTML standard has stagnated.
Ajax and Web 2.0 technologies became commonplace in that last decade. It has become increasingly clear that to present engaging, new experiences you have to leverage a plugin, such as Adobe’s Flash. The Hypertext Application Technology Working Group (WHATWG) started to develop a project called Web Applications 1.0 in 2004. The Web Applications project has changed name to HTML5 and is now being endorsed by the W3C.
HTML5 is arguably the most ambitious and complex upgrade to the HTML standard. The reason for this is clear: HTML needs to compete feature for feature against technologies such as Adobe’s Flash, Microsoft’s SilverLight or Sun’s/Oracle’s JavaFX. If HTML does not compete with these technologies then it is threatened to becoming a byproduct technology. Interactivity and rich presentation will be handled exclusively by third party plugins.
The members working on HTML5 are taking the deliberate stance that the next release of HTML will be in use for the next decade. For instance, there are technologies included within HTML5, such as the Canvas element, that are difficult to develop to today, but there is an assumption that development and design software will be built in the future to make it easier to create Canvas solutions.
The HTML5 standard is still in development and will take two years to move to draft status. There is a lot included in the standard. Some of the main technologies include:
- New HTML elements and attributes
- Native Video and Audio support
- Canvas and SVG for programmatic graphic presentation
- CSS3
- JavaScript 2.0
As the technology evolves you will see additional parts being added. For a rundown of the full specification you can check out http://www.w3.org/TR/html5/
Foundation elements
Many of the changes you will see in HTML5 to core elements are designed to enable you to more effectively control data on the screen. Unlike earlier versions of HTML that supported formatting elements such as the PRE, FONT and BLINK many of the new elements in HTML5 are crafted to allow you to more effectively organize your content in your HTML code.
With any Web page, the first line of code you should write declares which version of HTML you are using. With HTML 4.0 you have three complex DOCTYPES with associated DTD definitions. For HTML5 all you need at the top of your Web page before your starting HTML element is:
<!DOCTYPE HTML>
Now, you can’t tell me that you will not be able to remember that itty-bitty element? Adding this to the start of your Web page declares that the content uses HTML5. The main new elements include:
- Header
- Footer
- Section
- Article
- Aside
As you design a page you will visually place content in different sections on the screen. The following illustration demonstrates a mock-up Web page:
To place your content in the correct place requires using the DIV element to position content correctly but the DIV element does not describe what the content. Using new HTML5 elements such as the HEADER and FOOTER element you can now accurately describe what the content. For instance, the following is valid HTML5 code:
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<header>Add Search Engine and main links </header>
<section>
<article>The first article goes here</article>
<article>The second article goes here</article>
<article>The third article goes here</article>
<aside>A side bar definition goes here</aside>
</section>
<footer>Copyright Matthew David 2010</footer>
</body>
</html>
You will see that you can add multiple instances of an element on a page in the same way you can add multiple IMG or P elements to a page today. Using the new elements gives you two clear advantages over the older DIV element format. The first is that it is now easier to read your HTML code. The new elements clearly define what is what. The second advantage is that Search engines can now understand the value of content on a page. For instance, content within an ARTICLE element can be indexed with a higher priority than content wrapped by the FOOTER element.
HTML5 does, however, support several elements and features that make a big impact on what you see. New elements such as the VIDEO, AUDIO and CANVAS allow you to add complex rich media that rivals RIA technologies such as Flash and SilverLight.
Exploring Video and Audio as a first class element citizens
Unless you have not noticed, there is a lot of video on the Internet these days. From sites such as Hulu to Vimeo to the massive YouTube, video is centerpiece to our digital world. To address this demand, HTML5 includes support for two new elements: Video and Audio.
Using the VIDEO element is as easy as follows:
<video src="myMovie.ogg"></video>
That’s it. There is no need to add complex OBJECT elements and parameters. If you want to get crazy you can use the following different attributes for the VIDEO element:
- Autoplay - the video will play immediately if already downloaded in your cache
- Controls - a simple play back head will be added with VCR-like play, pause controls
- Height and Width
- Loop - you can loop the video
You can see an example of HTML5 video support at YouTube: http://www.youtube.com/html5
Audio is as easy to add to your Web page as the VIDEO element. The following HTML code plays back an audio file.
<audio src="sampleSong.ogg" controls="controls">
Previously to HTML5 you would have to use a combination of OBJECT and EMBED elements to add video to your Web page. Video requires support of a plugin, such as Adobe’s Flash. HTML5 attempts to side step support for Windows Media Player, Flash or DIVX plugins by adding video CODECs directly to the browser. A CODEC, (Compression/Decompression), is the technology that allows large video files to be converted into smaller, streamed files. Currently two CODECs are gaining support for HTML5. They are the H.264 video standard and the Open Source Ogg package for Theora video and Vorbis audio.
Simply put, the H.264 support, also known as MPEG4, is the video and audio format supported on your iPhone but it is widely used by many companies. The problem is that MPEG4 has patents that protect the technology.
In contrast is the Open Source technology Ogg for Theora video and Vorbis audio. These formats are free from patents. The audio and video quality difference between H.264 and Ogg Theora/Vorbis is very minimal. Technically, H.264 is cleaner at higher resolutions. Ultimately, consumers of video/audio content will determine which CODEC become the format of choice.
The bottom line is that it has become very easy to insert video and audio into your Web pages with the guarantee that your Web browser will accurately play back your content. Google’s Chrome, Apple’s Safari and FireFox 3.6 support the VIDEO and AUDIO element.
Painting with Canvas
If you want to develop RIA solutions then the Web standards has forced you to use plugin technologies such as JAVA. HTML5 is supporting a new rich media element called CANVAS that now gives you RIA without the plugin. Originally developed to help create Widgets for Apple’s OS X desktop, the CANVAS element allows you to programmatically draw 2D images.
The CANVAS element relies heavily on JavaScript to draw your images. The basic CANVAS element consists of an opening and closing element with width, height and ID attributes as follows:
<canvas id="myCanvas" width="500" height="500"></canvas>
You use JavaScript to describe the CANVAS content.
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('myCanvas');
if (canvas.getContext){
var defineContext = canvas.getContext('2d');
}
}
</script>
Check out https://developer.mozilla.org/en/Canvas_tutorial on Mozilla’s Developer site to get you started with the fundamentals of CANVAS illustration.
Google has set up ChromeExperiments.com as a place to show case visual tricks in modern Web browsers. Many of the examples use CANVAS to display their content.
A great example of CANVAS is the Canopy tree animation. The 2D tree builds a continuously growing and branching tree. The animation is smooth and elegant and is completed using open HMLT5 standards.
The CANVAS element continues to expand. Earlier in 2009, Mozilla proposed CANVAS 3D, the ability to render true 3D models in a Web page without a plugin. Recently this standard has been rolled up into the WebGL standard managed by the Khronos Group (www.webgl.org). It will be a while before complex, rich 3D worlds that rival game systems arrive on the Web but it is important, however, is that the foundation for building these complex worlds is now being put into place.
Using CSS3 with HTML5
Elements are used in HTML5 to place and organize content at a level that is descriptive. This does not mean that the page will look good. Presentation of content on the page is controlled using Cascading Style Sheets Level 3, or CSS3, in HTML5. Using CSS3 to describe how your page should look, however, is not new. The CSS technology was first introduced in 1997 and is now, in HTML5, in its third major release, named CSS3. The good news is that all CSS1 and CSS2 standards are fully supported in CSS3.
CSS3 introduces a slew of new design tools you can use on your Web pages. This includes but is not limited to the following:
- Embedding Fonts
- Drop Shadow Effect
- Animation
Embedding Fonts with CSS3
As you might expect, HTML5 has driven new technologies to enable true font embedding. Three standards are now recommended to embed fonts. They are:
- TrueType
- OpenType
- Scalable Vector Graphic Fonts
It is quite likely that you already have TrueType and OpenType fonts installed on your computer. They are, by default, the standard Windows font format. To embed a font into a Web page you need only two things: the font file and definition in CSS linking to the font. The following example uses the font BlackJar.ttf as an embedded font. You need to create a new font-family in your CSS document that links to the TrueType font. The following CSS code shows, in line 2, that you care creating a new font-family called “BlackJar” and, in line 3, you are linking to the font and identifying the type of font.
@font-face{
font-family: 'BlackJar';
src: url('BLACKJAR.ttf') format('truetype');
}
You now have a new font-family that you can reference in your normal CSS. Here, a P element is being formatted using the new font-family:
p {
text-align: center;
font-family: 'BlackJar';
font-size:3cm;
}
You can now use the font within your page design. If you want to also use the font with Internet Explorer you can add the Embedded Open Type, used by Internet Explorer 4-8, with your new font family. You only need to modify the @font-face description as follows:
@font-face{
font-family: 'BlackJar';
src: url('BLACKJAR.ttf') format('truetype');
src: url('BLACKJAR.eot');
}
The fourth line links to an EOT version of the BlackJar font. You will notice that you do not need to add a format value for EOT fonts. Now your Web pages will display correctly no matter what Web browser is viewing your design. Font freedom has finally come to the Web!
Adding a Drop Shadow
Drop shadows have long been a part of the visual designers tool chest. Finally, you can now easily add drop shadows to text and objects using CSS3. The following CSS definition is an example of the use of the drop shadow.
.dropShadow {
font-family: "Segoe UI", Tahoma, Geneva, Verdana;
font-size: medium;
color: #CC3300;
text-shadow: 0.25em 0.25em 2px #999;
}
The effect draws a light gray drop shadow with a slight blur as shown in the following figure.
Applying Animation using CSS3
Web users are smart, savvy customers. A plain web page will no longer work. The ability to add visual, interactive elements is necessary. To address this issue, CSS3 includes support for animation. The following HTML and CSS3 style allows you to add a bouncing text block to the screen:
<html>
<head>
<title>Bouncing Box example</title>
<style type="text/css" media="screen">
@-webkit-keyframes bounce {
from {
left: 0px;
}
to {
left: 400px;
}
}
.animation {
-webkit-animation-name: bounce;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 4;
-webkit-animation-direction: alternate;
position: relative;
left: 0px;
}
</style>
</head>
<body>
<p class="animation">
The text bounces back and forth
</p>
</body>
</html>
The animation is controlled through the use of the style sheet. There are two parts you need to control. The first sets up the type of animation you want to use. Here the setting is for an animation sequence named “bounce”. The animation and the movement will be from 0 px to the left 400 px:
@-webkit-keyframes bounce {
from {
left: 0px;
}
to {
left: 400px;
}
}
The next step is to define what gets animated. In this example you have a CSS class associated with the “bounce” animation described above. There are a couple of additional settings. The “duration” setting controls how long each animation sequence takes to play in seconds and the “count” setting specifies how many times the animation plays. Together, it looks like this:
.animation {
-webkit-animation-name: bounce;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 4;
-webkit-animation-direction: alternate;
position: relative;
left: 0px;
}
Currently the examples above will only work in the latest versions of Safari and Google’s Chrome.
Browser Support for HTML5
There are two different Web browsers being used today. They are:
- Modern Web Browsers - this group includes Mozilla’s FireFox, Apple’s Safari, Google’s Chrome and the Opera Web Browser
- Microsoft’s Internet Explorer
FireFox is built on the Open Source Ghecko browser engine. Likewise, Safari and Chrome are built using the Open Source WebKit browser engine. Both browsers use a third Open Source project, Cairo, to render the visual elements such as CANVAS, CSS and HTML5. A solid reason why these three Web browsers are able to adopt new standards quickly is directly linked to the massive companies supporting the Open Source projects and the small army of engineers they can throw at projects such as WebKit. Amazingly, Opera, a small, private company, is able to keep compete head to head with the likes of Google and Apple for standards support in the Opera Web browser.
Outside of this elite group is Microsoft. Since the late nineties, Microsoft has dominated the Web. Even though their usage numbers continue to shrink, more than 65% of all Web users still choose Internet Explorer over any other Web browser. Amazingly, about 26% of all Web users still use Internet Explorer 6 - a browser that is 8 years old!. The problem is that Microsoft’s latest browser, IE 8, does not support any HTML5 features. You will not find support for CANVAS, VIDEO or CSS3. You will find great support for CSS2 - arguably, IE8 supports CSS2 better than any other Web browser. While the news is not great, recently Microsoft appears to be changing its stance towards HTML5. At the end of the summer of 2009, Microsoft joined discussion on the HTML5 standard. At the 2009 PDC a very early version of IE9 was presented showcasing HTML5 features. Microsoft, however, is coy about discussing what parts of HTML5 will be supported in IE9.
While it is important to have HTML5 support in your desktop PC, there is already a place where HTML5 support is standard: Mobile devices. The explosion of smart mobile devices is being lead by Apple’s iPhone and Google’s Android. The Web browsers on both phones fully support HTML5 for the simple reason that they are built using recent branches from the WebKit project. iPhone users have, for nearly 3 years, enjoyed viewing sites that support the CANVAS element for iPhone Web games.
It is clear that HTML5 is here for the long haul. You will see it being used more and more in mobile phones, tablets and even Netbooks. PC’s will continue to be dominated by Internet Explorer users, but, hopefully, the next release of IE will also adopt HTML5. Of course, if you want to stay ahead of the curve then start using the latest releases of FireFox, Chrome or Safari. The solutions you can develop for these new browsers remove the line that separates desktop with Web applications.
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
Good article, but while you bring up video codecs, you don't mention which browsers support which codecs. That Firefox 3.5 supports OGG, Chrome supports H.264 and Ogg and Safari 4 supports H.264.
Also it's incorrect that Android and iPhone fully support HTML5. They have better support than some desktop browsers, but they are still missing some HTML5 features. Also
Here's a chart showing HTML/CSS/Javascript support in different webkit browsers including iPhone and Android:
http://www.quirksmode.org/webkit.html
Also as seen in that chart, it's good for developers to be aware that both iPhone and Android have updated their browsers with new versions of their OS' came out. So just because a site works on properly on Android 1.6 doesn't mean it will work properly on Android 1.0, which has a different browser.
Matt,
Great points. Since writing the article, I have read that Safari is considering supporting Ogg. On one hand this makes sense as WebKit supports Vorbis and Theora video and audio. On the other hand, it brings into question why Apple would support Ogg over H.264 when they have so strongly pushed H.264?
What will be very interesting is to see which version of WebKit will appear in the fabled iTable/iSlate when it makes an appearance later in the year. Will Apple provide a consistent browser release between iPhone/iPod Touch and Tablet? Or will we have a fragmented release as seen with the different Android phones?
What are your thoughts on HTML5 as a standard? Are there elements you feel are misplaced (such as Transformations in CSS) or do you think there are glaring elements missing?
"The problem is that Microsoft’s latest browser, IE 8, does not support any HTML5 features."
That's not entirely true. While IE8 doesn't currently support VIDEO, AUDIO or CANVAS tags, it does support other HTML5 features, including DOM storage, AJAX navigation and network connectivity awareness.
OK, things may get interesting this year if (and it's a big if) Microsoft releases IE9. Today, Microsoft announced that it is joining the SVG working group. This is huge as many pundits see SVG competing with technologies such as Adobe's Flash and, more importantly, Microsoft's own SilverLight. Is Microsoft planning on completely supporting HTML5? Next, you will be telling me that IE supports the WOFF embedded font format.
Yeh, that’s just crazy talk!
We will see how this transpires.
"HTML needs to compete feature for feature against technologies such as Adobe’s Flash, Microsoft’s SilverLight or Sun’s/Oracle’s JavaFX. If HTML does not compete with these technologies then it is threatened to becoming a byproduct technology."
Hi, I don't think this is so. Hypertext Markup is essential. It is used in WWW browsing, as well as a host of non-Web uses (help systems, documentation, embedded displays). Over the past fifteen years cross-browser plugins have not made browsers irrelevant, and there's no reason to see a sudden change.
The WhatWG's proposals may more logically be seen as a way to "bless" the runtime direction Apple wishes to pursue in order to maintain their closed system. (This is also why the codecs don't matter as much to the spec as the high-level VIDEO tag does.) But the flip side is that mandates to construct a self-contained multimedia runtime raise the barrier to non-browser uses of HTML.
jd/adobe
Things will get interesting if (and ONLY if) MS releases a IE9 that is compatible with previous versions of their operating system! They tried in the past to "force" people to upgrade operating systems with the ubiquitous "this new version of IE is not compatible with your current operation system" messages when IE8 came out. If they put their attention on an IE that was backwards compatible they would dominate the browser war. All they would need to do is have an "automatic upgrade" once it was finished. That would drive a massive nail in the coffin of the competition.
Focus on the OS or the internet, but Sorry, MS, you cannot have your cake and eat it to.
Thanks for this beautiful article.
'Browsers' part of it is very informative.
HTML is apsolutely the biggest enemy of the web. It tries to kill technologies that are allready proven to be "good enough". And it its definitelly been proven that they allways works against someone on the web, instead of bringing the web to a new level. So many years we were fighting to block access to the hardware, bought antiviruses to block the scripts, now we are comming to a stage when HTML should do exactly that. The vs Flash issue is the same thing. The most funny thing in the history of the W3C are the embedded fonts. They were invented by Microsoft back in 1996, and refused in 1997 from the W3C. Now after 14 years, the same thing seems to be a invention in the web standards, blah blah blah. And IE8 does not supports them, alltough they were supported by IE4 or IE5. So I really have doubts about the entire work of the peoples in the W3C Organization. Espacialy when they call themself as "the peoples who make the web standards".
It is clear that HTML5 is here for the long haul. You will see it being used more and more in mobile phones, tablets and even Netbooks. PC’s will continue to be dominated by Internet Explorer users, but, hopefully, the next release of IE will also adopt HTML5. Of course, if you want to stay ahead of the curve then start using the latest releases of FireFox, Chrome or Safari. The solutions you can develop for these new browsers remove the line that separates desktop with Web applications.
indir
Yeah, I also think that it quite clear that html5 will probably last for a long time, yet Iike many other people I am also a bit scared of a change. Thank you for giving us the well written and interesting posts and delivering such a good job. Of course, I hope that in the next version of internet explorer its user would be able to view html5. There are also some nice tricks that I want to try on my electric grills blog that's also called george foreman grill and although I am really not sure that any of this would work, I can't wait to try.
This imaginary form is constructed with 100% HTML5 standard. No hacks or tweaks. The form works on all major browsers even in IE6. What's really amazing is that the form can have dateinputs and ranges even when JavaScript is disabled! All this with 5.63 kB!
Here are all the input fields and scripting for the demo. You have a sane subset of the HTML5 and Web Forms 2.0 standards available.exam dump Now these complex but useful standards can be used by humans.
This form uses CSS3 features such as attribute selectors, rounded borders, RGBA coloring and box shadows. These make web developers' life much, much easier. 70-291 dumpsTogether with FORM Tools and HTML5 we can finally make well behaving and good looking forms with ease.
At the time of writing Opera has the best native support for HTML5. Here is Opera with exam 70-432JavaScript disabled! The browser displays it's native date and range input controls. Browsers that does not natively support these special inputs will show show a normal text field so that the form is editable in all situations.
Now listen.braindumps 70-503 Internet Explorer has fairly good JavaScript support so it's possible to make cross-browser libraries like jQuery Tools; however, IE has many issues with CSS and HTML. If you want somewhat similar look for IE
1. you need quite precisely 300% more development time and money for dirty hacks and redundant images
2. your application becomes harder to maintain so you also need 300% more time and money in the future
3. all this 300% for what? your site will feel like IE6 on all browsers!
Let me put this another way. There is absolutely no good reason to develop an identical look for IE6. Period. Respect the standards and let unstandard browsers do what they can. Luckily you don't have to compromise with the funtionality. It's the looks that IE doesn't care about. I hope IE9 is better.
The danger here is that the end users web browser / pc will not keep up with this technolgy. I am the webmaster for a Car Insurance website and I try and keep things as simple as possible, most users never upgrade their browser.