Subdirectories for html file

I want to be able to test my html file using "someDirectory/someHTML.html/someSubDirectory" Is there a way to implement this without using the div tag and javascript?

The best I got to this was using hidden div tags, javascript, and a div tag with the id of screen by just changing the innerHTML variable of the screen div tag to the innerHTML variable of the current page's div tag:

<!DOCTYPE html>
<html>
  <body>
    <style>
      .page {
        display: none;
      }
    </style>
    <p id="display">
      Current page:
      p1
    </p>
    <div id="screen"></div>
    <div id="page1" class="page">
      <!--- Page one code instead of button --->
      <button type="button" onclick="nav('p2')">Click me</button>
    </div>
    <div id="page2" class="page">
      <!--- Page two code instead of button --->
      <button type="button" onclick="nav('p1')">Don't click me</button>
    </div>
    <script>
      var currPage = 'p1';
      var disp = document.getElementById('display');
      var screen = document.getElementById('screen');
      var pages = {
        p1:document.getElementById('page1'),
        p2:document.getElementById('page2')
      };
      function nav(page) {
        screen.innerHTML = pages[page].innerHTML;
        currPage = page;
        disp.innerHTML = `Current page:\n${page}`;
        console.log('showed '+page);
      }
      nav('p1');
    </script>
  </body>
</html>

The only thing is that it is EXTREMLY inefficient and I just want to use a slash

Solution

Would a hash (#) do instead of a slash (/) in the address bar?

That would fit your needs if those are that you whish to have only one HTML file located on your hard drive. The address bar would look like c://users/AverseMoon/myHTMLpage.html#page2.

You can show/hide any div with it using a hash in the adresse bar. (A subdomain really is somthing else).

It would look like this:

// The current page display
var disp = document.getElementById('display');

// The hashchange event handler
window.addEventListener("hashchange", function() {

  // Update display
  let currentHash = location.hash
  disp.innerHTML = "Current page: " + currentHash.substring(1)

  // Hide all .page
  document.querySelectorAll(".page").forEach(function(page) {
    page.style.display = "none";
  })
  
  // Show the current page
  document.querySelector(currentHash).style.display = "block";
})


// Page1 visible on load
document.getElementById('page1').style.display = "block";

.page {
  display: none;
}
.page a{
  border: 1px solid grey;
  border-radius: 4px;
  padding: 4px;
  background: lightgrey;
  text-decoration: none;
  color: black;
}

<p id="display">
  Current page: page1
</p>

<div id="page1" class="page">
  <a href="#page2"> Go to page #2</a>
</div>
<div id="page2" class="page">
  <a href="#page1"> Go to page #1</a>
</div>