Page URLs

There are several ways we can control how our HTML where our files are stored, retrieved by browsers, and how they appear in the address bar of those browsers.

Consider the file “about.html,” found on your website:

simple about page

We need to decide where to place this file in our directory and how the site should locate it. The location of the file will also affect its URL.

Pages In and Outside Directories:

Browsers treat pages differently from other files. They have expectations of what pages will be titled, what languages they’ll use, and where they’ll live in the site directory.

Browsers have some default behaviors they do automatically with pages when a visitor accesses the site. Where we put pages is a conscious decision on our part, mostly regarding keeping the site files organized and URLs clean. If you’ll remember, anything inside a directory needs that directory added to its path to be accessed; too few or too many directories can clutter your site and its pages’ URLs.

Directory Tree
.
├── page-01.html
└──  directory-name/
    └── page-02.html

https://www.baseurl.com/about.html

One way to avoid long URLs is to place the page in the root of the site (in our case, MART341-WebDesign/). No additional pathing is needed, as the page is not in any other directories.

We can still have additional pages that we explicitly address. For example, we could have other HTML pages at the same directory level, such as a contact.html.

This method is sufficient for sites with few pages. But for sites with many, using child directories is preferable, as it helps with site organization.

Directory Tree
.
├── about.html 
├── index.html
├──  css/
│   └──  style.css
└──  images/
    ├──  photo-1.jpg
    └──  photo-2.jpg

https://www.baseurl.com/about/

If you wished to have a “cleaner” looking URL, you could create an additional child directory labeled about/ and place a file saved as index.html within that directory.

You’ll see how an index.html is one of those files browsers expect to find in the next sub-topic. Because of this, if an index.html file is in a directory, you usually do not have to include it in the file path; the browser will request it automatically.

Note Notice how we do not add /index.html at the end of the URL above; instead the URL simply ends with a directory slash (/).

Directory Tree
.
├── index.html
├──  about/
│   └──  index.html 
├──  css/
│   └──  style.css
└──  images/
    ├──  photo-1.jpg
    └──  photo-2.jpg

https://www.baseurl.com/pages/about.html

For our class, we will create some of our assignment/ and project/ directories with a sub-directory called pages/. It will contain all of our additional .html pages, not any of which will be called index.html.

This structure is suitable for learning directory structure for the first time, but because these sub-directories will not have an index.html file to request, https://www.baseurl.com/pages/ will likely return a 404 error.

Directory Tree
.
├── index.html
├──  css/
│   └──  style.css
├──  images/
│   ├──  photo-1.jpg
│   └──  photo-2.jpg
└──  pages/
    ├──  about.html 
    ├──  contact.html
    └──  gallery.html

Neat-O This site has over 100 child and grandchild directories to keep its many pages organized!

development directory organize page root