HTML Decor I

One of the advantages of CSS is the capability to provide styling information to many web-pages using one (or several) external stylesheets. Not only does this reduce duplication, cutting down the size of each page, it also means that pages don't need to be regenerated whenever styles are updated.

There is still, however, significant duplication in web-pages - banners, navigation, and footers are usually the same for many pages of a site, if not the whole site. Any changes to the structure or text in these generic sections will require regenerating all pages. (Although, if your pages are dynamically generated this is going to happen anyway).

What if there was a way to specify this page decor in an external file? Unadorned web-pages could be sent to the browser which could then add the decor from a common file. It turns out there are a few options to do this.

XBL

XBL would be ideal. An XBL binding would specify what decor to add to the body element of the page. XBL even keeps the inserted elements in a separate namespace, so you don't have to worry about id and class attributes in the decor clashing with those in the HTML document.

Linking to the XBL document containing the decor binding could be done with a processing-instruction at the top of the page. 

<?xbl href="decor.xml" ?>
<html>
...

XBL isn't implemented natively in any browser yet, but for this simple pre-processing step a Javascript implementation should be sufficient (see the notes).

XML Stylesheets

XML Stylesheets can completely rewrite the structure of the document so this task is well within its scope. They are intended for converting XML to HTML, so a HTML file might have to be served as XML for this to work.

Linking to an XML stylesheet for decor can be done with a processing-instruction at the top of the page. 

<?xml-stylesheet href="decor.xsl">
<html>
...

XML Stylesheets are supported to some extent by all current browsers, and don't require Javascript.

Javascript pre-processing

If you can rely on Javascript being available (or are happy with a less than graceful degradation), then any decor can be added with a script.

The decorations could be coded into the script, and the script modified for every section of the site and updated every time the decor is changed. But it is probably preferable to have one script for all web-pages and give each web-page a link to the decor it should have (following the model of external stylesheets).

If the decor file is a HTML file then it can be viewed directly in the browser.

Adding this to web-pages would look something like: 

<html>
 <head>
  <link rel="decor" href="decor.html">
  <script src="/decor.js"></script>
  ...

This is, more-or-less, what my HTMLDecor library is designed to do. (My site is using it, so you've already seen a demo.) It is also quite similar to HTML Overlays by Daniel Glazman.

More details

In the next few articles on this topic I will provide some sample code for each of these solutions, investigate their limitations, and demonstrate how to use HTMLDecor.

Notes

Page Decor

I'm referring to banner, navigation and footer sections as page decor, not because they aren't important, but because they aren't the main content of the page. Alternate terms that might be as appropriate are frame, wrapper, overlay, skin, chrome and branding.

XBL

XBL is the W3C's XML Binding Language. The current specification is fairly comprehensive although not finalized. There is also a (incomplete) primer, or you could read my earlier blog.

No current browser has implemented XBL natively, but there are a few partial Javascript implementations, including:

The former would be appropriate for providing HTML decor.