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 2009"> </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
The content of this post is licensed: ©2009 All Rights Reserved
About the author
Nick is the Associate Director of Web Communications at Wayne State University by day. By night he hosts the video blog EDU Checkup where he reviews higher education web sites live. Nick is an active member of the higher education web community and is an officer of Refresh Detroit, a group of web professionals whose goal is to promote web standards, usability, and accessibility.
This post was written by Nick DeNardis - who has written 31 posts on .eduGuru
Pingback: EDU Checkup » Blog Archive » Indian Hills Community College – Epsiode #109
Pingback: html5-web-design | blog