Elements of HTML5

Introduction to HTML5

Since 2004, the future of web development known as HTML 5 (or sometimes Web Applications 1.0) has been envisioned, discussed and re-envisioned over and over again. Here we will take a look at some of the current highlights and help you envision how they may one day affect your web development.

The Foundation

There are several aspects of HTML that HTML 5 is designed to improve on. First and foremost, it is intended to have a much more defined and explicit structure. It was decided early on that a basic page structure was needed. What that will eventually mean for the average web developer is that you will have to spend less time worrying about how a HTML element is going to render in IE versus Firefox versus Safari versus Opera versus … you get the idea. Of course, you will never completely eliminate variances between browsers but I, for one, am looking forward to a significant reduction. Another goal is to make HTML much more web application friendly by including web application APIs. Lastly, because of the increasing demand for media, tags like the <audio> tag will allow developers to be able to quickly embed an audio file with a definition that looks as simple as <audio src="SomeAudioFile.ogg" controls="controls">Your browser does not support the audio element.</audio>. The text between the tags will cause browsers that don’t understand the <audio> tag to present the text while browsers that do understand the tag will ignore the text between the open and close tags. The controls attribute tells the browser how to handle buttons like play and rewind.

In with the New

There are several new elements coming with HTML 5. I’ll list each one below and give a brief explanation. Hopefully this will give you a good feel for how the web development landscape is changing and how HTML will become much more structured. Please note that some links to working examples can be found below. However, because of the inconsistent implementation of HTML 5 you may have to try different browsers to find one that supports a given element.

• <article> - Pulls and displays content from an external source like a blog or a forum.
• <aside> -Defines some content aside from the content in which it is placed, like a tip or sidebar within and article.
• <audio> -As discussed above this tag allows inclusion of audio.
• <canvas> -Provides a container for the creation of graphics. It requires script that references the tag to actually create the graphic. You can see a simple example here.
• <command> -This allows you to define a command button, radio button or checkbox within a <menu> element.
• <datalist> -This defines a list of options for an for an <input> element. It doesn’t display them but merely defines a list of valid options.
• <details> -Provides a place for details about your document or section of your document like its creation date or purpose.
• <dialog> -Intended to define a conversation. It is a container for the content of the conversation which uses <dd> and <dt> elements to define the structure. Here is an example.
• <embed> -Used to easily embed plug-ins like Flash.
• <figure> -This defines a group of elements. Its intent is to make the content “portable”.
• <footer> -Defines the footer for the document which is usually things like copyright and author.
• <header> -Defines the header for the document.
• <hgroup> -Defines the headings of your document or a section of your document. This includes headings and sub-headings.
• <keygen> -Defines a generated key like a RSA key. The key type is defined with the keytype attribute.
• <mark> -Defines marked text which is simply a new method for highlighting text.
• <meter> -Defines a measurement within a given range like 95 within the numeric range of 1 to 100.
• <nav> -Used to define a navigation section like a block of paging links with previous and next buttons.
• <output> -Defines different types of output like would be generated by a script.
• <progress> -Defines the progress of some function on the page like a JavaScript function that tracks download progress.
• <rp> -Defines what to show in browsers that do not support ruby annotations. This element is used in cooperation with the <rt> element below.
• <rt> -Defines an explanation or pronunciation for ruby annotation characters. Used in cooperation with the <rp> element mentioned above and the <ruby> element mentioned below.
• <ruby> -Defines a ruby annotation (Chinese characters or notes). See this example using <ruby>, <rp> and <rt> elements.
• <section> -Defines sections of a document that are not already predefined like <header> and <footer>.
• <source> -Defines media sources for media elements like <audio> and <video>.
• <time> -Defines a time, date or both.
• <video> -Defines a video using the same base media attributes as other media elements like <audio> as seen in this example

As you can see there are quite a few new elements in HTML 5, some more useful than others. I am especially excited about the media related tags like <audio>, <embed> and <video>. There are also some that I am having trouble envisioning how they will come into play, but I am trying to keep an open mind.

Out with the Old

There is a growing list of elements that will not be supported in HTML 5. I won’t waste space discussing them but here is the list as it stands now:

<acronym> 
<applet> 
<basefont> 
<big> 
<center> 
<font> 
<frame> 
<frameset> 
<noframes> 
<s> 
<strike> 
<tt> 
<u> 
<xmp>

Coming to a Browser near You

With input from gigantic corporations like Apple, Google, IBM, Microsoft, Mozilla, Opera and many more, you might expect that the HTML 5 project could take a while for all parties to come to a consensus on anything. Well, you’d be right. This project is continually evolving and is expected to for the foreseeable future. This is evidenced by the question marks on the HTML 5 specs for all referenced future releases. However, there is some good news. All of the major browsers, i.e. Firefox, Internet Explorer, Opera and Safari, have all started implementing at least some HTML 5. Currently, the leader of the pack is Opera with Safari trailing close behind. As you would expect, though, they are each adopting what they deem appropriate so there is currently little consistency across the browsers.

Conclusion

There is obviously much more to HTML 5 than I have covered here. I just wanted to give you a quick overview of the new elements coming down the pipe. Of course, there are also significant “upgrades” to many HTML 4 elements that I did not discuss here. The most current project specs are housed on the w3c.org website if you are inclined to sift through them yourself.

Regards
Raheel