This article has been updated to reflect the current state of HTML5, which is fully implemented. The examples listed herein are still valid, but you may wish to visit our web development tutorial categories for HTML and HTML5 for more recent information on HTML web development best practices and code examples.
There are several articles that list some important upcoming features of HTML5, which can work on certain browsers. This tutorial for the web developer will show you how you can use certain features of HTML 5 NOW!
HTML5 Features
HTML 5 features which are useful right now include:
- Web Workers: Certain web applications use heavy scripts to perform functions. Web Workers use separate background threads for processing and it does not effect the performance of a web page.
- Video: You can embed video without third-party proprietary plug-ins or codec. Video becomes as easy as embedding an image.
- Canvas: This feature allows a web developer to render graphics on the fly. As with video, there is no need for a plug in.
- Application caches: Web pages will start storing more and more information locally on the visitor’s computer. It works like cookies, but where cookies are small, the new feature allows for much larger files. Google Gears is an excellent example of this in action.
- Geolocation: Best known for use on mobile devices, geolocation is coming with HTML5.
If you want to know if any of the above features works on a given browser, you can test for it through Modernizer. This small JavaScript library is good for detecting CSS3 as well. From the Modernizer web site, “Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.”
The Modernizer syntax is intuitive:
.multiplebgs div p {
/* properties for browsers that
support multiple backgrounds */
}
.no-multiplebgs div p {
/* optional fallback properties
for browsers that don't */
}
Simply insert the modernizr-1.1.js JavaScript file in your page and add a class of “no-js” in the <html> element. You can then use the Modernizr JavaScript object and the various CSS classes it attaches to the html element. Here’s an example of how to do that:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Learning HTML5</title> <script src="modernizr.min.js"></script> </head> <body> Your web page here. </body> </html>
For those of you with a keen eye, you might have noticed the simplified <!DOCTYPE html>
If you’re still using,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
as your doctype, you can simplify and shorten it right now. This works in all browsers. You can also shorten,
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
To
<meta charset="utf-8">
In addition, you can shorten the reference to your CSS from:
<style type="text/css">
To <style> Of course, that only works for embedded or inline style sheets. It does not work for external style sheets.
If you use JavaScript in your web page, you can short the syntax there as well. Here’s the original code from part of a Google search box:
<script type="text/javascript" src="https://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
You can shorten this by deleting “text/javascript” I have tested all of the above in my personal site and everything still works in Internet Explorer, Firefox and Chrome. I’ve said it before and I’ll say it again, for me, the best part of HTML5 is the cleaner, simpler and shorter code. In the long run, web pages will run faster and smoother than ever before with less chances of coding mistakes.
Visit our HTML section for more up-to-date web development tutorials with HTML and HTML5.
