Load page content on hashchange I want to create a modular website with no frameworks or CMS nor server-side language.
Also, I am doing simple use of the hashchange event to help the navigation.

The structure would be as follows:


A basic container HTML page with 3 main areas: header, content, footer.
Individual HTML files - one for each page - which would contain only the HTML to be inserted in the content part
a JavaScript file with all the code needed
a CSS file with all the styling


Please bear in mind that all the code below has been cleaned to illustrate the concept: the real code is more complex (e.g. the content of the header and the footer might as well be loaded with AJAX calls, some manipulations might occur to the DOM after the content has been put in place, handling AJAX failures, and so on).

A sample version of the HTML for the container page would be like:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"/&gt;
    &lt;title&gt;Faux SPA&lt;/title&gt;
    &lt;link rel="stylesheet" href="styles.css"/&gt;
    &lt;script src="script/jquery/jquery-1.12.4.min.js"&gt;&lt;/script&gt;
    &lt;script src="script/loader.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="viewPort"&gt;
        &lt;div id="header"&gt;
        &lt;/div&gt;
        &lt;div id="content"&gt;
        &lt;/div&gt;
        &lt;div id="footer"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;button onclick="setPageHash('Page1')"&gt;View 1&lt;/button&gt;
    &lt;button onclick="setPageHash('Page2')"&gt;View 2&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;


A couple of sample HTML files for the content (obviously, the real-world content would be more complex):

Page1.html:

&lt;div&gt;
    &lt;img src="images/Image1.png" alt=""&gt;
&lt;/div&gt;


And Page2.html:

&lt;div&gt;
    Some text content 
    &lt;br/&gt;
    second line of text content 
&lt;/div&gt;


Finally, the JavaScript code would be like:

var validHashes = ["Page1", "Page2"];
function page(pageName){
    var newPageURI = pageName + ".html";
    var container = "#content";
    $.ajax(newPageURI).done(
        function(content) {
            putContentInContainer(container, content);
            setPageHash(pageName);
        }
    );
}
function putContentInContainer(container, content) {
    $(container).html(content)
}
function loadPageFromHash() {
    var hashValue = window.location.hash || "";
    var hashIsValid;
    hashValue = hashValue.replace('#','');
    hashIsValid = (validHashes.indexOf(hashValue)&gt;=0);
    if (hashIsValid) {
        page(hashValue);
    } else {
        console.error("no valid HASH!");
    }
}
function setPageHash(page) {
    window.location.hash = page;
}
window.onhashchange = loadPageFromHash;
$().ready(function() {
    loadPageFromHash();
});


So, my questions are:


Is there any disadvantage in loading the HTML this way?
I know that the HTML files with the content will not be valid HTML files because of the missing tags (e.g. body, html, etc.): would that represent a problem?
Is there anything else I am missing for the whole hashchange subject?
1) Loading HTML this way will exclude all your users with js disabled from browsing your site, that's why back-end scripting exists
2) They are not a problem if you inject them in a valid HTML document. If you don't, the majority of modern browsers will create html, head and body elements by themselves, but all the other browsers will possibly display nothing
3) Theoretically not