I appreciate the valuable answers provided by everyone. In the end, I have decided to implement a solution that I believe strikes a good balance:
I have consolidated all pages into one and used Javascript to selectively display only the page I need:
(I can dynamically populate the content of the page divs using either jQuery or AngularJS without needing them to be physically present in the same file).
HTML
<div id="allPages">
<div id="MainPage" class="page" style="background:red">
Home page
<ul>
<li><a href="#SecondPage">Go to second page</a>
<li><a href="#ThirdPage">Go to third page</a>
<li><a href="#ForthPage">Go to forth page</a>
</ul>
</div>
<div id="SecondPage" class="page" style="background:yellow">
This is second page
<ul>
<li><a href="#MainPage">Go to home page</a>
<li><a href="#ThirdPage">Go to third page</a>
<li><a href="#ForthPage">Go to forth page</a>
</ul>
</div>
<div id="ThirdPage" class="page" style="background:blue">
This is third page
<ul>
<li><a href="#MainPage">Go to home page</a>
<li><a href="#SecondPage">Go to second page</a>
<li><a href="#ForthPage">Go to forth page</a>
</ul>
</div>
<div id="ForthPage" class="page" style="background:green">
This is forth page
<ul>
<li><a href="#MainPage">Go to home page</a>
<li><a href="#SecondPage">Go to second page</a>
<li><a href="#ThirdPage">Go to forth page</a>
</ul>
</div>
</div>
CSS
#allPages {
position: absolute;
width: 100%;
/* display: flex; */
height: 100%;
}
.page {
border: 1px solid red;
width: 100%;
min-height: 100%;
display: inline-block;
}
JS
$( document ).ready(function() {
var url;
url = getUrl();
goToClickedPage(url)
$("#allPages ul li a").click(function(){
var linkTo;
linkTo = $(this).attr("href");
goToClickedPage(linkTo);
});
});
function getUrl(){
var url;
url = ($(location.hash).length===0) ? "#MainPage":location.hash;
console.log(url);
return url;
}
function goToClickedPage(url){
$("#allPages .page").hide();
$(url).show();
}
While not the most elegant approach, I hope this solution proves helpful to others. Any additional tips are certainly welcome.