In this short article I’m going to attempt to explain the differences, advantages and struggles of using HTML5 in its current form. It has a lot to offer but browsers still have a little ways to go for fully fledged public adoption.
A New Doctype
HTML5 brings a doctype we can all remember, its short, simple and doesn’t take up unnecessary HTTP space.
1 |
<!DOCTYPE html> |
That’s it! Set it, forget it and move on.
Semantic Structure
If you have developed any web site in the past few years and care about accessibility, lite markup and structure, your document probably looks something like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<html> <body> <div id="header"> <h1><a href="/">My University</a></h1> </div> <div id="navigation"> <ul> <li>Future Students</li> <li>Current Students</li> ... </ul> </div> <div id="content"> <h1>Welcome</h1> <div class="photo"><img src="..." alt="..." /></div> <p>...</p> </div> <div id="footer"> <p>...</p> </div> </body> </html> |
HTML5 builds on that same very structure but now instead of having a bunch of div’s to contain your content you have these tags to better explain what you’re marking up.
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <footer>
The new structure would look something like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<html> <body> <header> <h1><a href="/">My University</a></h1> </header> <nav> <ul> <li>Future Students</li> <li>Current Students</li> ... </ul> </nav> <section> <h1>Welcome</h1> <aside><img src="..." alt="..." /></aside> <article> <p>...</p> </article> </section> <footer> <p>...</p> </footer> </body> </html> |
Quite a bit cleaner and even reduces the overall size of the HTML document.
But wait, there’s more!
- <time>
- <figure>
- <dialog>
- <mark>
- <canvas>
I’m not going to go too far into these tags except to explain how they’ll allow you to further refine our page content.
Time
Uses a common time format to mark up the human readable time you display on your site.
1 2 |
Published <time datetime="2009-08-22T09:30:00-05:00"> Saturday, August 22, 2009 at 9:30am</time> |
Figure
Finally a way to distinguish between a photo and an image which has data in it.
1 2 3 4 |
<figure> <legend>Fall 2009 Enrollment Data</legend> <img src="/images/enrollment-2009.png" alt="Enrollment Data, Fall"> </figure> |
Dialog
Building on the same structure as the definition list <dl> which is great for FAQ’s, the <dialog> tag is used to mark up conversation. For example a chat transcript or interview.
1 2 3 4 5 6 7 8 9 10 |
<dialog> <dt>Student</dt> <dd>Where can I find information about scholarships?</dd> <dt>Counselor</dt> <dd>That information is available at http://scholarships...edu/</dd> <dt>Student</dt> <dd>Thank you so much.</dd> <dt>Counselor</dt> <dd>If you need anything else just let me know.</dd> </dialog> |
Mark
This is an interesting one, it’s kind of like the <strong> tag but is more about increasing the relevance of the content than the importance. Think of it as a “highlighter”, you probably won’t use it often but it might come in handy.
1 2 |
<p>Despite the drop in applications <mark>the average ACT score for applicants has risen to 32</mark>.</p> |
Canvas
The <canvas> tag is pretty amazing, it has been touted as a flash killer (probably not) but right now I just don’t think the support is there yet. I am not going too deep into the <canvas> element because there are already so many great tutorials out there but I will mention it is going to significantly raise the level of user interaction especially with visualizing data.
Audio and Video Tag
Probably the most exciting addition to HTML5 is the native <audio> and <video> tags. It is about 1000% times cleaner than the current <object> and <embed> tags that you have to use today.
1 2 |
<video controls src="campus-tour.ogg" id="campus-tour"> Video decoder not found.</video> |
It will be amazing one day when we don’t have to rely on flash to serve video or audio. The browsers will do the interpretation automatically. Currently not very many browsers support the <video> tag, but if you want to use it you can follow this example and serve up video for everybody. It is a beast though.
I am not sure about anyone else but I think the next best thing about the <video> and <audio> tags are native javascript manipulation. For example attaching an event to the end of a video, it would be great to give the watcher some next steps like donate now or visit campus.
1 2 3 |
campus-tour.addEventListener('ended', function () { alert('video playback finished'); }); |
Compatibility
This is all great until you look at it in IE and Firefox 2 (bug). There is a solution, but it required javascript. My suggestion is to use this hosted HTML5 enabling script. It basically does this:
1 2 3 4 5 6 7 8 |
<script> document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('footer'); </script> |
It creates the elements so IE knows about them and you can style them. Notice also there is no “type” attribute in the <script> tag above? It is not necessary in HTML5, all scripts are assumed to be type=”text/javascript”.
On another note now that these elements are created its best to define them as “display:block” since they will by default be inline.
Validating HTML5
There are a few validating services out there. Of course the W3C has its validator and it works pretty good. There is also the Validator.nu (X)HTML5 Validator. Both I believe are experimental so use at your own risk.
Should you be using HTML5 now?
Yes, absolutely. Even if you don’t use it on a production site start playing around with it. I have yet to review a site on EDU Checkup with HTML5 markup but I know the day is coming soon, it’s only a matter of time.
HTML5 is not going away so get your coding hat on and get to work!
I would love to get your feedback, thoughts and concerns about using HTML5. Have you started implementing with it at your institution?
Image credit to vincentgallegos
Hold yer horses here.
Play with it, yes. But HTML5 is still not an official standard and in a great deal of flux. The accessibility community is up in arms over a lack of captioning support in audio/video (and the including of canvas, which has zero accessibility support). A number of old tags and attributes are being jettisoned. And the Semantic Web zealots aren’t at all happy.
It looks like Last Call (when the last comments on HTML5) will begin in October, which means sometime in winter/springHTML5 will be a standard. Supporting the final version of HTML5 should follow with the next versions of Firefox and the WebKit descendants (Safari/Chrome) in the second half of 2010. The question then is whether IE 9 will support it when it’s released sometime in 2011.
But that all assumes the issues that are being raised about HTML5 are dealt with in a timely fashion. If they’re not, all bets on when HTML5 goes final are off.
So, yes, play with it. But better still, play with it, see what does and doesn’t work, and be ready to share any feedback you have with the HTML5 working group. It’s not quite ready for prime time, but it will be pretty soon.
I tend to be pretty excited about html5, but aside from its doctype a lot of the new tags don’t seem to accomplish much. The example you give of a html5 versus html, the html5 is two lines longer. The video tag is in limbo. The benefit of the new tags seems to be in providing semantic relationship, but the tag’s definitions are so ambiguous I am afraid that their use is going to be nullified by varied interpretation.
Sorry to be so negative. I am hoping that html5 will finally reunite the html and xhtml people.
Nick, although the HTML5 is considering as the next revision of HTML, but majority of the online users still didn’t know about the existence of it yet. Maybe, a proper and effective promotion is necessary for this HTML5!
Excellent HTML5 tutorial. Thanks for sharing.