Web 2.0, Part IV: HTML 5

If you’ve been reading this series, chances are you’re familiar with HTML. You may also be familiar with XHTML. For a while, it looked as if XHTML might replace HTML, but XHTML2 has been killed and HTML5, along with XHTML5, has arrived. Had enough acronyms yet?

Last October, the last call went out for comments on the HTML5 working draft, which means that the standard is essentially done. The major browsers at least partially support it, which means you should be taking advantage of the new capabilities offered. So what’s new in HTML5?

First off, we continue the separation of content from style; tags such as <font> and <center> have been dropped in favor of cascading style sheets.  We’ll be talking about CSS in the near future, but what it does is allow you to write your content without worrying about how it will look, then create a file that defines the look of all the pages that include that file. Aside from promoting better design practices, this makes updating pages a lot easier as the look and feel of the entire website can be altered by changing one file! The following elements are not in HTML5 as they represent functionality better handled by CSS; that is, they are presentational only. Browsers will still support the tags to be backwards compatible with previous versions of HTML, but HTML5 documents should not use them: <basefont>, <big>, <center>, <font>, <s>, <strike>, <tt>, <u>. Additionally, any attributes related to presentation (such as align, bgcolor, etc) should not be used in HTML5 as their functionality is better handled by CSS.

Other tags that have been removed include <frame>,<frameset>, <noframes>, <acronym>, <applet>, <dir>, and <isindex>.

HTML5 supports the following new tags: (notice that many of these replace the generic <div> tags to allow cleaner markup)

  • <article> represents content that is independent from the rest of the page; for example, this could be a single article on a blog
  • <aside> tells you something that’s only slightly related to the rest of the page
  • <audio> adds an audio file
  • <canvas> is for rendering dynamic bitmap graphics
  • <command> is for a command the user can invoke
  • <datalist> specifies options for an input field and can be used for autocompletion
  • <details> allows the user to request additional information
  • <embed> is used for plugin content
  • <figure> combines the various elements of some piece of content, such as a graphic and its associated
  • <figcaption>
  • <footer> is exactly what you would expect
  • <header> is a group of navigational aids
  • <hgroup> is a section header
  • <mark> is used around a section of text that is highlighted for reference purposes
  • <meter> represents a measurement
  • <nav>, of course, is your navigation tool
  • <progress> represents completion of a task
  • <section> is a generic section marker, which can be combined with h1-h6 to indicate structure.
  • <summary> is what you’d expect, and can be combined with the details tag
  • <time> gives a date and/or time
  • <video> adds a video file

After we finish the overview and start our HTML5 series, we’ll cover some of these tags in detail. Here are a few other changes to be aware of:

  • The <a> tag can now be used without an href attribute, as a placeholder link
  • The <b> tag now represents text that should be distinct from the surrounding text without implying any additional importance.
  • <cite> is now used only for titles
  • <i> now represents text in a different mood or voice from the surrounding text
  • <strong> now represents important test

Ready to get started? Start your new documents with <!doctyle html>and you’re good to go!

According to my statistics, a fair number of people are reading these posts, but I haven’t gotten much feedback aside from spam. If you have anything in particular you’d like me to write about, please comment on this post and let me know; I’ll certainly take it into consideration!