Voici un extrait du contenu d'une page XHTML :

<div id="navBar"/>
<div id="main">
   <p>Facts about our company:
      blah blah blah</p>
</div>

Vous remarquerez que navBar n'est pas définie, seulement déclarée. Voici maintenant un overlay (myoverlay.xml), qui définit le contenu d'une div ayant pour id navBar, ainsi que d'une div ayant pour id main :

<div id="navBar">
 <a href="index.html">Home</a>
 <a href="products.html">Products</a>
 <a href="news.html">News</a>
 <a href="company.html">About us</a>
</div>
<div id="main">
 <hr/>
 <h6>Copyright (c) OurCompany 2004.</h6>
</div>

Le XHTML resultant dans le navigateur sera alors :

 <div id="navBar">
   <a href="index.html">Home</a>
   <a href="products.html">Products</a>
   <a href="news.html">News</a>
   <a href="company.html">About us</a>
 </div>
 <div id="main">
   <p>Facts about our company:
      blah blah blah</p>
   <hr/>
   <h6>Copyright (c) OurCompany 2004.</h6>
 </div>

Vous remarquerez donc que le contenu définit dans l'overlay est rajouté dans les éléments correspondants de la page XHTML originale, et ceci, en rajoutant simplement ces deux balises dans cette page :

<link rel="overlay" href="myoverlay.xml"> 
<script type="text/javascript" src="HTMLoverlay.js" />

On peut, comme en XUL, ajouter des indications pour spécifier si le contenu de l'overlay est ajouté à la suite, avant ou à tel position parmis le contenu existant de la balise conçernée.

Bref, avec ce système, vous pouvez mettre dans un unique fichier overlay vos menus, bandeaux, pieds de pages de votre site, et n'y avoir dans les pages HTML que le contenu principal de la page. Par rapport aux "Service Side Includes", cela à l'avantage d'économiser de la bande passante puisque le fichier overlay est mis en cache par le navigateur. Ça a l'avantage aussi de ne pas avoir à disposition un moteur de script coté serveur comme PHP, Perl... Les pages sont donc lisibles même en local.

Petit inconvénient : cela diminue l'accessibilité puisque le processus est en javascript (donc si par exemple les menus de navigations sont dans un overlay, on ne les a pas quand l'interpretation du javascript n'est pas disponible dans le navigateur) . Mais cela ne devrait pas être un gros problème pour les intranets ou applications web. On pourrait imaginer que ce mécanisme d'overlay soit implémenté directement dans les navigateurs (donc plus de javascript), surtout que le code est vraiment simple.

Autre petit inconvenient, <link rel="overlay" /> ce n'est pas conforme au standard HTML. Oui, bon, là, on s'en fout hein ;-). [Edit] En fait si, ça l'est.