Linking between directories¶
When you're providing links to different sections
Always use index.html¶
If I had a file named index.html inside of a folder named butterscotch, I could view it on the web by visiting example.com/butterscotch/.
If I had a file named web.html inside of a folder named butterscortch, I would have to visit example.com/butterscotch/web.html.
The first one is way nicer, right? Right! So be sure to always name files index.html and put them in nicely-named directories.
Note that if you're looking at your site on your computer, your computer won't automatically show you
index.html. It only works on the web!(Well technically it isn't necessarily true but by default it is)
Going "into" a folder¶
Maybe you're on the front page of example.com and want to link into a story at example.com/curry-rice. It's pretty simple!
When you don't include an https://... or a / at the front of your href=, it just adds it on to the existing URL.
Danger
Note that if you're already at example.com/curry-rice, though, it will send you to example.com/curry-rice/curry-rice.
Going "up" a folder¶
Maybe you're at example.com/butterscotch/ and want to link back up to example.com. You have three options!
Method one: Direct linking¶
The first method is linking directly to the URL, which looks like this:
Even if you moved this link to example2.com or example.com/leek-soup you'd still end up at the same place.
Method two: Absolute paths¶
The second method is
This kind of link will always go to the "root" or "top" of whatever domain you're on. So if you're on example.com/butterscotch it would go to example.com/, but if you changed the domain and path to cats.org/paper-bags it would go to cats.org.
It also works if your link points to a specific subdirectory:
No matter where you are on the website or what the domain it, this link will always send you to domain.com/about/. These kinds of links are useful if you have a template that could go anywhere on a site.
Method three: Relative paths¶
The final method is a relative path, which has to go "up" a single directory.
If you're at example.com/butterscotch/ this would send you do example.com/. If you were at example.com/pies/cherry/ it would send you to example.com/pies/.
This is useful if your website is hosted in a subdirectory somewhere, like example.com/mysite, and you don't want to add /mysite/ to every single link.