Make header and footer files to be included in multiple html pages

Question

I want to create common header and footer pages that are included on several html pages.

I\'d like to use javascript. Is there a way to do this using only html and

Answer 1

I think, answers to this question are too old... currently some desktop and mobile browsers support HTML Templates for doing this.

I've built a little example:

Tested OK in Chrome 61.0, Opera 48.0, Opera Neon 1.0, Android Browser 6.0, Chrome Mobile 61.0 and Adblocker Browser 54.0
Tested KO in Safari 10.1, Firefox 56.0, Edge 38.14 and IE 11

More compatibility info in canisue.com

index.html

    
    

    
    



1
2
3
4
5

autoload-template.html

    Template Hello World!

styles.css

#template-content {
    color: red;
}

.template-container {
    background-color: yellow;
    color: blue;
}

Your can get more examples in this HTML5 Rocks post