Maximizing HTML code reuse

When you want to theme your website well you will most likely end up in a situation where you start repeating a lot of your html. That was the problem that I faced when making this site.

So let me explain my situation. I wanted my site to have a certain theme and because of this I need to reuse my header and footer elements (and maybe a few more elements in the future) for consistency. Although I can definitely just copy this code and paste it everywhere I needed it, the problem is that if at any point I wanted to change my header or footer then I would have to find every location where I pasted my old code and change it. A task that is both tedious and error prone (what if you forgot to change it on a certain page?). So what’s the solution?

Well after a bit of searching there doesn’t seem to be a nice solution that is good for all cases but, I did find a decent solution which was acceptable for my needs. However, I will cover the few solutions available:

  1. Put the html you want to reuse in it’s own html file and load them into iframes.
    Alright this solution is pretty bad as the iframe is pretty heavy and dealing with iframes is no easy feat as there are so many behavioral problems using them. In 99.99% of cases, this solution won’t be used, in fact the only reason I listed this is because… it works…kind of.
  2. Put the html you want to reuse in it’s own html file and load them using jQuery’s .load() function.
    This solution is OK. It definitely works, all you need to do is call .load() on the element that you want to load the html into. e.i.  $('#some-elem').load('some_site.html');.
  3. Put the html you want to reuse in a string and load them using pure javascript.
    This solution is great if the code you want to reuse it short and doesn’t have other dependencies. An example of this: 

    Then load it in your html via  <script src="myjsfile.js"></script> .
  4. Use HTML imports
    This solution is good but this feature is not supported very well at this time of writing. Example: 
  5. Use server sided technology
    You can choose to use Ruby, php, ssi or other server sided technology to do the includes on the server.

Ok now that I have listed a good number of solutions, it’s time to discuss these solutions, their advantages and drawbacks and decide on a winner (if there is one).

So first of all, we should just cross #1 off the list. This solution is not ideal and can easily be done with at least one of the other solutions. The only thing solution #1 offers is simplicity of implementation.

#2 will work for most if not all situations. The main drawback is that .load() is an AJAX call and is also a jQuery function. This means that your site has to include jQuery (something to consider if you are not already using it) and AJAX is done asynchronously which is excellent if the page you are trying to include takes a while to load (so it won’t drag down your site load time), but not so great if you are including something small and simple as it will cause the website to have to relayout once your site is done loading which can bring down user experience.

#3 on the other hand is great for smaller includes where the html you are trying to reuse is simple and small and has no dependencies. Since it uses document.write, you are not bound to use other libraries and the function is well supported and fast so it will not hinder your site performance nor compatibility. An interesting thing to note is how #3 contrasts with #2, thus by using #2 and #3 alternatively, you almost have a complete solution.

#4 is an interesting solution. It uses cutting edge technology which means too things: it’s robust but it is also not well supported (yet). You can use Polymer’s polyfill which mimics html imports using javascript to increase your compatibility but it sort of ruins the point of using this solution (which is simplicity and robustness). You can also check if the browser supports this feature and fall back on another solution.

#5 is a decent solution depending on your needs. If you are also using a lot of server sided technology this might be the solution for you; however, if you are not already using server sided technology, you might have to consider if it would be worth it for you. Another thing to note is that depending on how you go about doing this, it might impact your site load time, so be cautious.

In the end, although I did like #4, it just wasn’t supported widely enough (if at all) for me to use it realistically so I stuck with #2 and #3. I haven’t really found a need to use .load() for re-usability purposes yet but it is a good to have tool in my toolbox if I ever needed it, so for now both my header and footer is loaded and reused using document.write().

Leave a Reply

Your email address will not be published. Required fields are marked *