demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

XHTML to HTML5 Workflow

html / basics

Estimated reading time: 2 minutes

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:

  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

    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.

  4. 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

  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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.