How to Reuse HTML Code 19th Nov 2020

In this blog we will see how to reuse HTML code so that we comply with DRY coding standard. BTW if you are wondering what DRY is then it means - Don't Repeat Yourself.

Reusing HTML code

Like mentioned above, if we reuse HTML code, we will comply with DRY naturally. In the process of complying with DRY, we are also making sure that our HTML code becomes more manageable and readable.Over a period of time, you might have noticed that your HTML code becomes big enough and tough to manage.That is why you should consider reusing HTML code when and wherever possible.

What better than an eg scenario. For starters,consider you are working on a Web Application with a single html page (eg Index.html). It has a standard Header, Body and a Footer. Now, say your Boss comes and tells you that everything looks good but the background-color of the header needs to be changed. Or maybe your boss no longer likes the navigation hover color and wants you to change it to some other color. If your web app is small enough,like in this case, then you need to change only in Index.html(the only html file in your web application).Easyy..isn't it...? However,imagine if there were 10 HTML files in your web app.Now you will find yourself having to makes the changes in every single file. So the simple task of changing background color and navigation hover color in the header section, becomes time consuming and even error prone.And it's not just the color but also may be text,new header tab etc etc. Hope you get the point That is when it is handy to move header code into it's own html file and inject the header on each of the 10 html file's load.

Now there are many ways to accomplish this but I’m going to take you through a way that seems the most easy and has decent browsers’ support. The magic happens with jQuery. Here is a step by step example of how to reuse header code in your html pages.

First, let's have a look how our header looks on index.html

Below is the Index.html and the one in red circle forms the header. We want to move the header in it's own file so that it can be reused across multiple pages

Step 1:

Identify the code which can be extracted out into it's own html file. Here, we have the header of index.html which is nothing but nav bar.Code for navbar is below. This is the section of code which forms the header of index.thml and should reside in a separate html file

              <div id="menu" class="container">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" 
                data-toggle="collapse" data-target="#navbar">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">My Dummy Project</a>
              </div>
              <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#">About</a></li>
                  <li><a href="#">Contact</a></li>
               </ul>            
              </div><!--/.nav-collapse -->
      

Step3:

On the load of the index html(or in that matter any other page that has an header), inject the generic header into the id where we want.For eg, in the below snapshot code we are saying load "CommonStaticHeader's" element which has an id of "menu" into "myHeader" id. Id "myHeader" exists on Index.html

              $(document).ready(function () {
                $("#myHeader").load(
                  "common/CommonStaticHeader.html 
                  #menu",
                  function () {}
                );
              });
            

Step4:

Below, notice we have a nav element with an id of "myHeader", which is the placeholder on Index.html for our header code

               <nav id="myHeader" 
               class="navbar navbar-default 
               navbar-fixed-top"> </nav>
               <div class="container">
                   <h2>Page specific content here </h2>
               </div>
            

Expected:

After HTML loads,if you go to dev tools and inspect source (F12 or rt click and view source) you will have something like below "INSERTED GENERIC-REUSABLE CONTENT HERE" is where you will see that your generic header content inserted

             <body>
               <nav id="myHeader" class="navbar navbar-default navbar-fixed-top">
                    INSERTED GENERIC-REUSABLE CONTENT HERE
               </nav>
               <div class="container">
                   ....
               </div>
            

Want to download the code?? My Github link

I have shared the codebase on Github for you to download. Link to github repo is Code download on Github

In the code, I have an Index.html which has a header and a body. Then I move the header code into it's own file called CommonStaticHeader.html (in the common folder) Also,I refactored Index.html and created RefactoredIndex.html. RefactoredIndex.html uses CommonStaticHeader.html and injects the header part dynamically

And that's it. Hope you undertood how to reuse HTML code easily and also the benefits of it.Email me at "thizismanju@gmail.com" incase you have queries. Alternatively, you can fill the "CONTACT" form or drop a comment below