You may not have noticed any visible changes at LGF recently, but behind the scenes major infrastructure work has been under way, and the site is now powered by totally valid HTML5 code.

This was a bit trickier than I thought it would be when I started; some of the LGF code has been there for a long time, and it took a lot of reengineering, not always in obvious places.

For one example, when I first started testing with some of the new HTML5 tags like <audio> and <video>, I was surprised to see the tags just disappearing from the code when I loaded the page. This weird behavior was puzzling until I realized it was being caused by PHP’s HTML Tidy library, which I’ve been using for years to clean up the code before outputting it.

The version of Tidy installed on our web server was not hip to these new HTML5 tags, and it was doing what it was supposed to do with unknown tags — stripping them out. After a bit of research into the Tidy docs, I came up with the following option settings to let Tidy know about all the new tags:

<?php
$tidyOptions = array(
	'show-body-only' => TRUE,
	'hide-comments' => TRUE,
	'new-blocklevel-tags' => 'article,aside,details,summary,figure,figcaption,dialog,header,footer,hgroup,section,nav,menu,datagrid',
	'new-inline-tags' => 'video,audio,canvas,ruby,rt,rp,command,mark,time,meter,progress',
	'new-empty-tags' => 'source',
	'output-html' => TRUE,
	'wrap' => 0,
);
$htmlText = tidy_repair_string($htmlText, $tidyOptions);
?>

I may have missed one or two HTML5 tags, but I think that gets most of the important ones.

This HTML5 makeover is a big first step toward the eventual redesign I have planned, using adaptive techniques to make LGF much more compatible with smartphones, tablets, and other mobile devices.