I wanted to write some articles about the new features of HTML 5 and figured I had better start off with what HTML 5 is and give an overview of those new features and enhancements.
I know there are probably hundreds of other HTML 5 articles on the internet and books explaining everything you could ever want to know but I’m hoping to keep the subject simple and present it in layman’s terms for those that are not into geek speak.
So if you want a technical article, then you’d probably be better off looking elsewhere. If you want a flavour of what HTML 5 is all about in simple plain language then read on.
What is HTML and why the 5?
Let’s start with, HTML 5. HTML stands for hypertext mark-up language and the 5 stands for version 5. A mark-up language tells the content how to display on the page. This is what printers have used for many years and the hypertext part just means it a special language for the internet. Content is displayed in an internet browser such as Internet Explorer, Chrome, Safari, Firefox, Opera or many others and if those browsers didn’t have a mark-up language to tell them how to display the content then you would only ever see plain text with no images and no formatting. Over the years HTML has improved and when this latest one is the 5th such version.
HTML standard structure
HTML 4
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
HTML 5
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
HTML 5 is much neater than its predecessor (see “HTML standard structure” sidebar for some code that shows how much neater the HTML5 version is). As you can see the declarations have been abbreviated and all HTML 5 syntax follows the XHTML lower case convention. Within the HTML 5 code the meta tag for the character set is not actually required but the most popular character set is now utf-8 as it is an international standard and provides the most consistency and availability across browsers. If you don’t specify a character set then the user’s browser will decide and your web page may not appear as you intended.
New or enhanced features
Audio and Video
The new audio and video tags make using audio and video in your web pages easy. It used to be quite tricky and you would end up with complex JavaScript libraries that never seemed to work consistently across browsers or some sort of browser add-in like Adobe Flash. Now all modern browsers support HTML 5 and you can always fall back to Flash for older browsers.
Canvas
The canvas in HTML 5 is used for drawing directly on the web page. Traditionally, images had to be drawn beforehand and possibly manipulated on the fly using JavaScript, which wasn’t easy. Or people used Silverlight or Flash or they drew something in code on the server side and rendered it as an image. Now with the canvas element you can use simple JavaScript to draw directly on the web page dynamically so like Flash or Silverlight, you can have a very interactive user experience.
History API
Web developers have had little control of session history and its manipulation. The HTML 5 History API provides a means to perform tasks such as moving forward and backwards through the session history and synchronising page content when the user navigates within the history. The History API is a standard way to manipulate the browser history via JavaScript and is especially useful in the world of Ajax where you perform content changes on screen but don’t actually navigate to another page so the history is not updated and you can’t get back to a specific point in time.
Web storage
Quite often web developers use cookies to store a piece of information that they can then reuse either immediately on another page or on future visits. However, browsers usually limit the amount you can store in a cookie to 4K. HTML 5 web storage allows you to store more data on the client side using JavaScript. There are two types; local storage that is persisted on the client machine across browser sessions and session storage which is valid only for the duration of the session. A session is the time you spend within a website until you close your browser.
| New or enhanced tags | |
| Elements | Description |
| <article> <header> <hgroup> <footer> <section> <address> <aside> <nav> |
Previously developers used <div>, <span> or <p> tags to layout their pages (or even earlier they did everything in tables). These new tags make the mark-up easier to read and the new tags can help you get organised on that page. You can design styles specifically for them through stylesheet and use these in a combination so a section can have its own header, etc… The old syntax still exists if you want to still use divs. The h1 to h6 tags are normally the textual headings for a section or article and these can be grouped together in the hgroup tag so a style can be applied to all the headings. There is also an address tag that should only include the contact information for the article that precedes it (or the body if there are no articles). Quite often a page will include a side bar and there is a tag for this also called aside. Nav is for any navigational elements. |
| <figure> <figcaption> |
These go hand in hand with the <img> tag for including pictures in your web page. The <figure> and <figcaption> are used to make images that serve as illustrations in an article. |
| <input> | This is not new but has been enhanced with new input types for colour, email, telephone or URL which help to validate the entry in those fields before it gets to the server. |
| <audio> <video> |
These tags provide a native way to play audio or video within a web page. |
| <canvas> | This tag provides an area on a page that you can dynamically draw on using JavaScript. |
Offline web applications
Normally, web applications require a live connection with a server in order to function but if the server goes down or the connection is lost or interrupted then you can experience strange behaviour or complete loss. The HTML 5 application caching API feature addresses these scenarios. Offline applications use a cache manifest file that stores a list of files to be cached locally including things like images, style sheets and JavaScript. You can also use it to deal with updated versions of pages as you will know what the browser has cached.
File API
Traditionally, client-side code never had access to the local file system but HTML 5 allows you to read and find information about local files. This means you can perform custom processing before a file is sent to the server. HTML 5 drag and drop features could be used to show the local files and the server files and can take actions when a drag and drop takes place.
Web workers
The web workers API brings multithreading to browser-based applications. You can load and execute JavaScript code in a separate thread without affecting the interface. The end user can continue to work whilst processing is going on in the background and get notified or get the page refreshed when that processing is complete. It is basically, built in Ajax (Ajax allows a website to continue to perform actions in the background whilst you take some other action, so it’s not holding you up).
Web sockets
Sockets are programmable interfaces that communicate with each other over a network. With Windows applications, that communication can be two way as a connection is held open but that is much trickier on a web application that is request-response driven. The server doesn’t hold open a connection to a client so could not push anything new to a client unless they make a new request using say JavaScript or refreshing the page. Web sockets provide two way communication between a server and a client browser.
Geolocation
This has the potential to become very popular as it brings location awareness to the web application so you can deliver relevant information depending on the user’s location. This of course assumes that the device that is browsing the web application can report its position.
CSS3
This is not really a HTML 5 feature but it is evolving alongside it. I’ll write more on CSS3 in the future.
Useful links
Examples of some of the features described here can be found at HTML5 Introduction.
Another useful site is the HTML validator at W3 Validator where you can just point it at your HTML file and get feedback on its validity.
Related articles
This is part of a series of articles covering the new features of HTML5. You can find an up-to-date list of those from the Development – HTML5 category.