Reusing a footer among multiple HTML pages

Question

I am working on a web template which provides 5 HTML pages. I was surprised that inside each page there is the same footer section, as follow:

<footer>
    <div class="footerrow1">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 maxheight1 footercol1">
                    <a class="smallogo" href="index.html"><img src="img/logosmall.png" alt=""></a>
                    <ul class="social_icons clearfix">
                         <li><a href="#"><img src="img/follow_icon1.png" alt=""></a></li>
                         <li><a href="#"><img src="img/follow_icon2.png" alt=""></a></li>
                         <li><a href="#"><img src="img/follow_icon3.png" alt=""></a></li>
                         <li><a href="#"><img src="img/follow_icon4.png" alt=""></a></li>
                         <li><a href="#"><img src="img/follow_icon5.png" alt=""></a></li>
                    </ul> 
                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 maxheight1 footercol1">
                    <h5>our Location</h5>
                    <div class="smalladdress">
                        <p class="mainaddress">9870 St Vincent Place,<br>Glasgow, DC 45 Fr 45.</p>
                        <p>Freephone:<span>+1 800 559 6580</span></p>
                        <p>Telephone:<span>+1 800 603 6035</span></p>
                        <p>FAX:<span class="marginfax">+1 800 889 9898</span></p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 maxheight1 footercol1">
                    <h5>Overview</h5>
                    <ul class="list5">
                        <li><a href="#">what we do</a></li>
                        <li><a href="#">sales for services</a></li>
                        <li><a href="#">Development Process</a></li>
                        <li><a href="#">Clients</a></li>
                        <li><a href="#">our team</a></li>
                        <li><a href="#">Blog</a></li>
                    </ul>

                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 maxheight1 footercol1">
                    <h5 class="mbotform1">newsletter</h5>
                    <form id="form1">
                      <div class="success">Your subscribe request<br> has been sent!</div>
                        <fieldset>
                        <label class="email">
                            <input type="email" value="Enter Your Email">
                            <span class="error">*This is not a valid email address.</span></label>
                        <br class="clear">
                        <div class="btns"><a href="#" class="btn btn-primary btn-lg btn4" data-type="submit">Submit</a></div>
                      </fieldset>
                      </form>
                </div>
            </div>
        </div>
    </div>
    <div class="footerrow2">
        <div class="container">
            <p class="footerpriv" style="text-align:center">&copy; <span id="copyright-year"></span> <img src="img/linefooter.png" alt=""> <a class="privacylink" href="index-5.html">Privacy Policy</a></p>
        </div>
    </div> 
</footer>

If I need to modify it, I need to modify each of the 5 HTML pages. I am an ASP.net MVC web developer where i can easily handle this by defining a layout view which each contain all the shared sections.

So my question is how I can manage this inside my web template's HTML pages?

Answer 1

The answer is no* (with an asterik).

*There is some support in HTML5 for include-able HTML but it is very limited.

So little support, in fact, that Firefox ..."has no plans to support HTML imports"...

You may have luck using the Web Components Library to enable cross-browser support, but that may be more trouble than it is worth for a 5 page template.