HTML include – object orientated development in HTML

Hyper Text Mark-up Language (HTML) is the backbone of the internet and has evolved since its early days in the 1990’s as a mark-up language for text. Currently, we are in a state of HTML5 which has brought with it many new features to make our webpages more interesting and interactive, such as the canvas element. Originally, HTML worked alone but eventually it was possible to link style sheets (CSS) or Javascript and PHP (scripting) files to enhance the mark-up. CSS allowed web developers to separate style from mark-up and command the look and feel of entire websites without needing to change hundreds of files. Javascript allowed them to make websites feel interactive and responsive, with Javascript containing the ability to change the CSS and add or remove elements from the mark-up. PHP, on the server-side, allowed web developers to produce database links and is the backbone of most e-commerce websites. However, until HTML5 it wasn’t possible to include other mark-up into your web page.

You could break the Javascript away into a separate file and link it into your HTML, or you could break your CSS and PHP away in a similar manner, but breaking away repeated HTML wasn’t possible. You had to copy and paste it into all your files and if you needed to make a change? Well grab a drink and start opening files because that was one of the only ways to do it. One way around this was to use PHP to include your HTML file, but this didn’t give your new HTML file access to the elements within. It simply displayed the HTML in the file in the place you had placed the PHP include command.

A previous method of including HTML in other HTML files.

In HTML5 however, the ability to link to other HTML documents in the same manner as Javascript or CSS has been provided, allowing web developers to move towards a more object orientated web development set up. A key advantage of this is the ability to link to several Javascript, CSS or other HTML documents without having the same long list of links in every document. Imagine, for argument’s sake, that you’re website had twelve Javascript files, a common CSS file and maybe some other common HTML (now that this is possible). The links in your header would consist of 13+ statements, adding 13+ lines of mark-up to your document for you to try to wade through every time you come to edit the document. Now say you need to remove, or add, a Javascript link. If you have 500 web pages, you have to modify 500 files to remove the now dead link (or risk trying to include a file that may no longer exist, or not including your new file at all). This can be extremely time-consuming, even if you use a text editor which allows you to find and replace in all opened documents (such as Sublime or Notepad++).

Now however, you can place all your link includes into one HTML file and link to that file from your 500 webpages instead. This means you only have to change one file if you want to add or remove a link file and it will automatically be populated across your entire website. Of course, if you change this file name you still have to change 500 pages to populate that, but if you’re going to do silly things like that you’ve earned the consequences that comes with it (and if you’re using a text editor which can do find and replace all, even that won’t be such a difficult task).

How to do it

If you’re anything like me, this is perhaps the paragraph you’ve been skimming for in the first place. The example code that you can adapt for your project. Well, here it is. When linking to Javascript files the notation is, as it always has been:

And linking to CSS is:

Well linking to other HTML documents uses the same notation as the CSS, using the link tag:

The important difference to note with this is the use of the import keyword (as opposed to the stylesheet keyword used in linking CSS). Hopefully this will move web development towards a more object orientated approach and separating concerns appropriately that, for the likes of me who jump between software and web development (although software is my preferred area), anyone can jump between the common concepts and languages and achieve the same powerful results.