Part of the HTML Markup Reading List

A great deal of money will be spent over the next several years to rewrite and update existing websites to HTML5. Essentially this is a pre-Y2K period for web developers: a lucrative, once-in-a-generation opportunity to be part of an epochal change.

Technically, merely changing the first line of the HTML code on a page to <!DOCTYPE html> is enough to make it HTML5; even loosely coded pages should validate, given HTML5's lowering of standards.

Doing so, however, is a merely superficial nod to HTML5. Taking complete advantage of the spec – making a true HTML5 page – means rewriting and re-contextualizing code everywhere in the page.

This article will outline the workflow process for converting a complete, valid, XHTML 1.0 Strict document to HTML5. It consists of several steps:

  1. Make a copy of your entire website, and work your changes on the copy

    You do not want to be caught halfway through the process and forget what you have changed, or lose your references before rewriting your CSS.

  2. Change the DOCTYPE and <head> section to HTML5 markup
  3. Remove Dublin Core metadata
  4. Add microformats and microdata as appropriate.

    Traditional metadata is supplemented (and, to a degree, supplanted) by microformats and microdata in HTML5. The appropriate markup to add, and its associated data, will depend on the content of your page and how it is used.

  5. Update tags for external stylesheets and JavaScript files

    The links themselves will not change, but you should remove unneeded attributes such as type.

  6. Replace generic <div> containers with their appropriate HTML5 tags

    <div id="header">, <div id="footer">, <div id=sidebar> and <ul id=nav> or their equivalents, should be replaced with <header>, <footer>, <aside> and <nav> respectively.

  7. Divide remaining content, if self-explanatory, with <section> tags

This is the minimum number of steps you should take to transform an existing web page into HTML5; I'd also suggest that the update process also allows the opportunity for a thorough review of a site's design and features.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.