Here's an example of some HTML that uses semantic markup tags.

<div class="product">
  <h1 class="name">Deep Frobulator Widget</h1>
  <h2 class="code">XYZ123</h2>
  <div class="info">
    The XYZ123 Deep Frobulator Widget is the most powerful
    Frobulator available today!
  </div>
<div>

You don't need to be an expert in HTML to at least have a guess at what some of the the above means. The <div>...</div> blocks indicate where the content is sub-divided into component parts. Here we have a product division (div) containing two headings (h1 and h2) and a further division. The class="..." attributes that appear in the tags tell us that we're looking at a product with a name, code and an informative description.

When a web browser goes to display the page, it uses the CSS stylesheet declarations to figure out how to display each item. It is through CSS that we provide the mapping from semantic terms like "product name" to particular presentation styles.

Here's a simple example of a style sheet that defines how the basic HTML from our previous example should be displayed.

div.product {
    margin: 4px;
    border: 1px solid #ddd;
}

div.product h1.name {
    font: bold 16px Arial, Verdana, Helvetica, sans-serif;
    margin: 4px 2;
}

div.product h2.code {
    font: bold 14px Arial, Verdana, Helvetica, sans-serif;
}

div.product div.info {
    font: bold 12px Arial, Verdana, Helvetica, sans-serif;
    margin: 0 10px;
}

There are plenty of tutorials and references on the web for learning more about CSS if you're interested in doing so. For now, all you really need to know is that the above stylesheet defines a series of rules that conform to the following format:

what-to-display {
    how-to-display-it
}

The what-to-display is typically something like div.product h1.name which selects any <h1 class="name">...</h1> tags inside a <div class="product">...</div> tag.

The how-to-display-it breaks down into a series of property: value; declarations such as font: bold 16px Arial, Verdana, Helvetica, sans-serif; to set the font weight, size and typeface, or margin: 4px 2px; to set a 4 pixel vertical margin above and below the item and a 2 pixel horizontal margin on either side.

The good news is that support for CSS in web browsers in now very good. The bad news is that the CSS functionality in the most widely used browser, Microsoft's Internet Explorer, is badly broken. However we do know how to work around most of the problems using various special "fixes" to cope with the fact that IE disregards the standards that the rest of us follow and instead does its own thing.

But the best news of all is that you can download Firefox, a far superior and entirely free web browser and start using it right away. It's available for a wide range of platforms (Windows, Mac, Linux, etc) and is fully standards compliant, as well as having a number of cool features that IE lacks.

Here's an example of what a template looks like.

<div class="product">
  <h1 class="name">[% name %]</h1>
  <h2 class="code">[% code %]</h2>
  <div class="info">
    [% info %]
  </div>
<div>

Does it look familiar? It should - it's the same HTML fragment we used in the earlier example. The only different is that we've replaced the specific values for the product name, code and description with generic tags that we can later define to be anything we like.

We can use this template component (which we'll assume is called product_info) to insert the details of a particular product into a web page. Like so:

[% INCLUDE product_info
     name = "Deep Frobulator Widget"
     code = "XYZ123"
     info = "The XYZ123 Deep Frobulator Widget 
             is the most powerful Frobulator 
             available today!"
%]

The great thing is that you can use it over and over again for different products. If you ever want to change the way a product is displayed, say by adding the price to the displayed details, then you just need to change that one template.

The same principle can be applied to almost every part of your web site. Wherever you have something that is used in more than one place, move it into a separate template component and INCLUDE it into the different places where it is required.

For example, instead of repeating the site menu on every page, put it in a separate menu template and INCLUDE it into every page that uses it.

[% INCLUDE menu %]

<p>
  Your content here...
</p>

Now if you need to add a new item to the menu, you only need to do it in one place - in the menu template component file.

The Don't Repeat Yourself principle doesn't only apply to large chunks of markup that you can move into separate reusuable template components. The use of variables (those generic tags like [% name %] that we mentioned earlier) inside the template allow you to "soft-code" anything that you might want to change at a later date.

Here's another example where we replace the font declarations in the CSS file with Template Toolkit variables.

[% size = 14
   face = 'Arial, Verdana, Helvetica, sans-serif'
%]

div.product {
    margin: 4px;
    border: 1px solid #ddd;
}

div.product h1.name {
    font: bold [% size + 4 %]px [% face %];
}

div.product h2.code {
    font: bold [% size + 2 %]px [% face %];
}

div.product div.info {
    font: bold [% size %]px [% face %];
}

Where this approach really comes into its own is when you want to customise the way the content is presented to account for branding, localisation, user preferences, and so on. You can take the same basic content and turn it into a dozen different versions of the same web site. All you need to do is set the appropriate variable or tweak the relevant template to change that part of the jigsaw puzzle.

In our earlier example we created a menu component which we can reuse by loading it into any web page with an INCLUDE directive.

The chances are that you'll want more than just a menu at the top of each page so you'll probably want to create a header and footer template to use like so:

[% INCLUDE header %]

<p>
  Your content here...
</p>

[% INCLUDE footer %]

Within the header template you can add whatever markup you like, and insert the approriate INCLUDE directive to load the menu into place. Templates can call on other templates which can call on other templates and so on. This allows you to build your web site in an entirely modular fashion.

An alternative to having separate header and footer files is to combine the two into a wrapper template and use the content variable to indicate where you want to core content to go. For example:

<html>
  <head>
    <title>[% title %]</title>
  </head>
  <body>
    <div id="header">
      [% INCLUDE header %]
    </div>

    <div id="content">
      [% content %]
    </div>

    <div id="footer">
      [% INCLUDE footer %]
    </div>
  </body>
</html>

Note how we're combining this with the use of semantic div elements so that we can style the header, content and footer element accordingly using CSS.

The Template Toolkit allows you to specify a standard set of headers, footers or wrappers that get added to every page. If we tell it to automatically wrap each page with our wrapper template then we can reduce our source pages to containing the core content only.

<p>
  Your content here...
</p>

This kind of approach allows you to keep your core web site content files blissfully free of any additional markup required to add the various user interface components to the pages. Simply point TT at your content directory and tell it to build your web site with all the shiny bits added on. If you change the content or one of the shiny bits then simply have TT do it again while you site back and take a slurp of coffee. The ttree tool (part of the TT distribution) is your friend here:

$  ttree --src=/path/to/content --lib=/path/to/components --dest=/output/path --wrapper=template --verbose