How to simplify your websites with HTML includes

Required skills: HTML

Use this when you have pieces of HTML that appear on multiple pages of your website.

Simply including one HTML file from another HTML file feels like a missing feature. Fortunely, we added that feature to Wunderbucket. It's actually really simple.

<div data-merge-include="footer.html">
<!-- Whatever is inside footer.html will appear here -->

How does it work?

The value you that you use inside data-merge-include works just like a URL. You can use a relative url like data-merge-include="../footer.html" or an absolute url like data-merge-include="/footer.html".

A few basic rules:

  • The file you include has to exist.
  • It has to be a valid path.
  • You can use full URLs but they are subject to CORS loading restrictions. I.E. data-merge-include="" will result in an error if does not have the correct CORS headers.

We use the open-source Merge.js engine to power HTML includes. If you want to really see how this works, the source code is here:


  • My site loads in stages when I'm on localhost. Will it do that when I publish it?
  • Can I include my meta tags with data-merge-include?
  • Why am I getting an error when I publish my site?