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
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
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
|New or enhanced tags|
|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.|
|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.|
|These tags provide a native way to play audio or video within a web page.|
Offline web applications
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.
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.
This is not really a HTML 5 feature but it is evolving alongside it. I’ll write more on CSS3 in the future.
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.
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.