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 a 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. This 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.

This means browsers have some default behaviors they do automatically with pages when the site is accessed by a visitor. 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 of a directory needs that directory added to its path in order to be accessed; too few or too many directories can clutter up 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 longer URLs is to place the page in the root of the site (in our case, web-dev-hw/). No additional pathing is needed, as the page are not in any other directories.

This is not to say that we could not have additional pages that we explicitly address. For example we could have additional HTML pages at the same directory level, such as an contact.html.

This method is fine for sites will 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.

In the next sub-topic, you’ll see how an index.html is one of those files browsers expect to find. 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 is good for those of us 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