Converting an XHTML Page to HTML5

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. (A number of my full-time second year students, given the final assignment of making an HTML5 website, did exactly that).

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.

Apps that promise automatic XHTML to HTML5 conversion will be promoted, sell, and fall far short of expectations, in part because the goal of HTML5 is to add more intelligence to web pages, and find-replace scripts fall far short of achieving that.

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

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.
Change the DOCTYPE and <head> section to HTML5 markup
Remove Dublin Core metadata
HTML5 does not allow schema as an attribute value. Solutions are still being worked on; for right now, remove most traditional metatags from your code.
Add micro formats as appropriate.
Traditional metadata is supplemented (and, to a degree, supplanted) by micro formats in HTML5. The appropriate format to add, and its associated data, will depend on the content of your page; I'll address microformats in a article shortly.
Step 5: Update tags for external stylesheets and JavaScript files
The links themselves will not change, but you should remove unneeded attributes such as type.
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.
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.