HTML5ify your existing code base

Do you love HTML5’s simplified syntax for markup?

Is your old code base littered with long doctypes and verbose tag attributes?

Are there too many files to edit by hand?

Well, don’t rage about it! Use these handy-dandy shell scripts to convert your old files in a jiffy:

# doctype find . -regex ".*\.\(html\|py\)$" -type f -exec sed -i "s/<\!DOCTYPE\s\+html[^>]*>/<\!DOCTYPE html>/gi" {} \; # meta charset find . -regex ".*\.\(html\|py\)$" -type f -exec sed -i "s/<meta[^>]*content=[\"'][^\"']*utf-8[\"'][^>]*>/<meta charset=\"utf-8\">/gi" {} \; # script text/javascript find . -regex ".*\.\(html\|py\)$" -type f -exec sed -i "s/\(<script[^>]*\)\(\stype=[\"']text\/javascript[\"']\)\(\s\?[^>]*>\)/\1\3/gi" {} \; # style text/css find . -regex ".*\.\(html\|py\)$" -type f -exec sed -i "s/\(<style[^>]*\)\(\stype=[\"']text\/css[\"']\)\(\s\?[^>]*>\)/\1\3/gi" {} \; # html xmlns find . -regex ".*\.\(html\|py\)$" -type f -exec sed -i "s/\(<html[^>]*\)\(\sxmlns=[\"'][^\"']*[\"']\)\(\s\?[^>]*>\)/\1\3/gi" {} \; # html xml:lang find . -regex ".*\.\(html\|py\)$" -type f -exec sed -i "s/\(<html[^>]*\)\(\sxml:lang=[\"'][^\"']*[\"']\)\(\s\?[^>]*>\)/\1\3/gi" {} \;

What to expect

Here are examples of HTML5 simplifications that the above scripts will make:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<html lang="en">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta charset="utf-8">

<script type="text/javascript">...</script>

<script>...</script>

<script type="text/javascript" src="foo.js">...</script>

<script src="foo.js">...</script>

<style type="text/css">...</style>

<style>...</style>

While HTML5 is new, these syntax changes are supported by virtually all browsers, even ornery, old IE6 will accept them. Also, they will not strip out any other attributes from your tags, e.g., a class or id on the html tag, and they’re idempotent (you can safely run them as many times as you want on the same files).

Notes & Disclaimers

I’m aware that these scripts don’t catch tags that span multiple lines (the most common case for this is a doctype with a line-break in it)—I’m leaving this case as an exercise to the reader.

I only work with html and python files—if you find it necessary, you should update the (html\|py\) parts to include the extensions of any additional file types in your project that may contain HTML.

This was written for GNU find and sed . They ship with most linux systems, but not mac osx (it has the BSD variants). So, if you’re on a mac, you can install them using homebrew (recommended) or whatever other packaging system you’re running.

Finally, make sure to review changes that are made with these scripts. I can’t guarantee they will work perfectly on your personal setup, but I did safely run them a few months ago on both mrcoles.com and hunch.com. Let me know if you find any issues or want to offer some improvements.

Update: thanks Brent for finding an issue with extra quotes within template logic in the html tag attributes.

That’s it, this post doesn’t cover using the new markup tags (section, header, footer, etc.) or any of the other more advanced features of HTML5, this is just a quick way to cleanup your old code with some snazzy HTML5ification! Enjoy!