This seems like the least efficient way possible to solve a problem, but here we are. I'm too lazy to actually test/research this, so this is only my best guess.

HTML links are pretty much always relative. You cannot think of it like linux filesystem where / would be root. Here, ../ would likely work much better for you. Should be quick to test a few combinations.

About the html file structuring, I think it truly does not matter. There isn't a very widely used ruleset for this. No modern web application is built using raw html files, as most are single-page applications built on top of react/vue/etc. But for learning html/css/etc basics, this is probably a good way to start to understand what the browser actually will see.

How are you accessing the website? Are you using a web server like miniserve or are you just opening the HTML files in a browser?

Beginning a path with / makes the path absolute for that origin. An origin is basically the URL's scheme, domain, subdomains, and port (so https://www.example.com/foo/bar has the origin https://www.example.com/ - ignore the trailing slash, Lemmy keeps adding it...). If your URL begins with file:// then absolute paths will likely be absolute to your filesystem, not relative to your project's directory.

If you can, try serving the directory with something like miniserve and see if it works. It'll give you a better picture of what the website would look like if it were published for real. Otherwise, you can make the path relative to solve the problem without doing that.

I'm no webdev, but I think neither / nor ../ should be there. The paths are relative to where you are currently.