I’ve given Markup Maker a small update today. Nothing too earth-shattering, but with all the talk of HTML5 in recent weeks, I thought I should take a look and see how it copes with this flavour of HTML and decided to add a few more features.
If you’ve not heard of Markup Maker before, it’s a tool that lets you enter a series of structural identifiers for a new page that you want to code up, and it then converts it to a valid XHTML/HTML document. Effectively it creates the necessary scaffolding, with empty div elements and the associated CSS selectors. So,for example, for a basic page layout you might type the following (with each space indent indicating that it is a child of the previous, less indented section), e.g.
header logo search main-content main-article page-navigation footer copyright contact-points
… gets converted to (if HTML4 strict chosen):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page title goes here</title>
<style type="text/css">
/* Edit the styles as you see fit */
#header {}
#logo {}
#search {}
#main-content {}
#main-article {}
#page-navigation {}
#footer {}
#copyright {}
#contact-points {}
</style>
</head>
<body>
<div id="header">
<div id="logo"></div>
<div id="search"></div>
</div>
<div id="main-content">
<div id="main-article"></div>
<div id="page-navigation"></div>
</div>
<div id="footer">
<div id="copyright"></div>
<div id="contact-points"></div>
</body>
</html>
So, I’ve added proper HTML5 support to this now. First, select the HTML5 doctype:
The tool recognises HTML5 elements entered - such as header and footer - and converts those to <header></header> and <footer></footer> rather than <div id="header"></div>. Also, if HTML5 is chosen, the output automatically includes Remy Sharp’s JavaScript fix which enables Internet Explorer to style these elements correctly.
So, using the example above, it would output the following as HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page title goes here</title>
<style type="text/css">
/* Edit the styles as you see fit */
header {}
#logo {}
#search {}
#main-content {}
#main-article {}
#page-navigation {}
footer {}
#copyright {}
#contact-points {}
</style>
<!--[if IE]>
<script type="text/javascript">
// Script by Remy Sharp. More info: http://remysharp.com/2009/01/07/html5-enabling-script/
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas, →
datagrid,datalist,details,dialog,eventsource, →
figure,footer,header,mark,menu,meter,nav, →
output,progress,section,time,video" →
.split(','),i=e.length;while (i--){document.createElement(e[i])}})()
</script>
<![endif]-->
</head>
<body>
<header>
<div id="logo"></div>
<div id="search"></div>
</header>
<div id="main-content">
<div id="main-article"></div>
<div id="page-navigation"></div>
</div>
<footer>
<div id="copyright"></div>
<div id="contact-points"></div>
</footer>
</body>
</html>
Finally, one minor tweak is the option to output closing div comments - which helps identifying and fixing layout/styling problems when you have a lot of content on the page and the opening and closing tags are separated by some distance.
So, please give it a go, and if you find any problems or have a suggestion for this simple tool, please drop an email to toolsandwizardsbugs@accessify.com.
So says Anne van Kesteren
Note that the type attribute on script and style elements is optional and that current browsers function fine if you do not include it.
Added January 25, 2009 at 8:59 pm