Purpose of Index Page(s)

[musmathosopher]

Hello…

So when I first started learning HTML in high school, my class only got as far as the idea that the home page is called index.html.

Now that I look at more code and read through books, it seems that many of the broader organizational layers of the website have index pages as well.

What needs and index page and what does an index page do? What I’ve gleaned so far is that it seems these are pages with like I said, a broad organizational role, and also they tend to have a larger number of links than other pages. Like if you counted up the links (or did the math to see how many pages they get you to for 1 or more clicks) this would be a larger number than it would be for a page of very specific and narrow content deep in the website.

Am I on the right track? If someone could add to this, modify it, or tell me in more erudite terms, that would be awesome!

[mtf]

A web server will have a number of pages that it will look for by default if no resource name is included in the URL.

https://www.example.com/

Server-side preprocessed pages will take precedence,

index.php
index.asp
etc.,

but in absence of these, the server will look for,

index.htm
index.html
home.htm
home.html
default.htm
default.html

in roughly that order of precedence.

Folders that do not have an index.html (or some such) page will, unless there is an htaccess restriction, default to folder view and will list the contents of that directory. At the very least every directory on the server should have an index.html page even if just to say private directory.

If you do not wish the hundreds of images in a folder to be exposed in a directory listing, slip in an index.html page and you’ll ensure a little bit of privacy for that folder.

www.example.com/blog/

Above we see a URL with no resource name, but the server will search for an index.html (or similar) in the blog folder so it can respond to the request.

Many hosting plans permit sub-domains up to some number (or no restriction) but the site contents for the sub-domains will all resolve to the same namespace as the main domain. Very likely, their content will be in folders of the same name off the root of the main site.

https://blog.example.com/

So long as the sub-domain is registered in hosting plan, this URL and the earlier one above will serve content from the blog directory.

It’s worth noting that www is a sub-domain, itself.

The site is accessible at the domain,

https://example.com

Recall that only the domain name and TLD are included in the registrar’s records. We have the option of tacking on www in our marketing material. It’s not a requirement.

Lastly, and what should have been stated off the top, an index page is better known as a, landing page.

[musmathosopher]

Wow, thank you for the detailed response! Some of it is a bit over my head at present, but I’m sure I’ll be referring back to this as I continue learning.

One followup question…

Like I said in my original post, I know that the homepage is called index.html (I figure this is the index of the “root directory” you were referring to?). A homepage is going to have a whole bunch of links to other places on the site, and if any reading/viewing material, it’s going to be very general.

What does an index page of a subordinate directory look like then? Like what am I seeing if I’m on the index.html page for a different part of the site after clicking away from the homepage?

I’ve been reading through Rob Larsen’s “Beginning HTML and CSS” and trying the exercises to get started, but it doesn’t really seem to cover the kind of things you and I are talking about right now. Seems like I might be missing out on something really important.

Anyway thanks again for you help, I’ll be finding the right buttons to click on here to communicate that as well.

[mtf]

What does an index page of a subordinate directory look like then?

In terms of what will its resource name be? index.html as the index page of its directory.

example.com/blog/index.html

is what the server will look for, and if not found and the server is configured to give up at that point, a 404 response will be returned.

Servers can be configured to look for a close match, or other default resources to respond with, but that is not always the case. We know they will find index.html on their own if the url does not specify it. Assuming said resource exists in the blog directory, it makes it unnecessary to include it in the URL.

example.com/blog/

The trailing slash is in some cases not necessary to include in the URL because nowadays browsers will tack it on when issuing the request. For my own part, I always include it.

Something of note, we do not need to, and probably shouldn’t, include the full URL in local links.

<a href="/blog/" title="Our blog homepage">Blog</a>

The above assumes the blog directory is just off the root and may be addressed absolutely (with the leading forward slash) as the root has already been found (we’re on the site).

[musmathosopher]

Oh I meant literally… what am I looking at if I’m on an “index.html” page for a website? I know the homepage is named this, but I’ve also seen that other pages get that name.

Now I know that the server looks for an index.html page when I load the website (and I suppose also when I click on something that goes deeper into the website, it looks for the next one?).

Perhaps that’s too broad a question… if so, maybe it’s simpler to ask, what is there besides index pages? I click on something, the server looks for an index page and finds it… then what?

Or another worthwhile question at my level probably… what should I go read up on to understand how this works?

It seems to me that maybe what I’m trying to understand is “directory structure” as I’ve heard it called? Perhaps the different example names you gave like index, home, and default… have some kind of functional role and I need to know what pages don’t have that role. I’m not so clear on naming conventions, function, and what these things mean for actual content I’m staring at in a browser.

Anyway, having started learning HTML and CSS, I haven’t come across any resources that explain this… so maybe it’s outside the scope of what I’ve been trying to learn so far. But it’s obviously important!

[mtf]

We may name our resources anything we wish.

about.html
contact.html
events.html

but those resources need to be requested as such in the URL.

example.com/about.html

The above assumes the resources are resident on the root.

There can only be one index.html page in any one directory. Other than that the directory can have dozens, hundreds or even thousands of other resources (pages, files, etc.)

For working with directories locally on our own computer, we should create a directory for our homepage and access it in that directory. absolute paths will not work (/blog/) since the root of your system is not the root of your local site.

<a href="blog/">Blog</a>

The above is half right. But our computer is not set up as a web server so will not look for the index page. In that case we would need to complete the URL by adding index.html or the name we used. Index pages are only really used on server hosted sites.

maybe it’s outside the scope of what I’ve been trying to learn so far.

Yes, slightly. It has nothing to do with HTML/CSS but everything to do with resource locating and site organization.

A typical small site will have a splattering of expected pages, such as those mentioned above.

    * site_root/
        + css/
            - index.html
        + js/
            - index.html
        + images/
            - index.html
        + videos/
            - index.html
        + publications/
            - index.html
        + blog/
            - index.html
        - index.html
        - about.html
        - contact.html

Recall we mentioned to have an index page in every directory unless the server is specifically configured to not respond with folder view when one is not found. We don’t expect users to type,

example.com/images/

unless they are just snooping. Having an index page in that folder lets us serve out a simple message. Private Directory. Nothing to see here.

[musmathosopher]

Awesome, thanks! I suppose I should look into learning about resource locating and site organization.

[mtf]

Perhaps the different example names you gave like index, home, and default… have some kind of functional role and I need to know what pages don’t have that role.

It depends upon the server out of the box, and how it is configured. So long as there is no index.html in the root folder, home.html can be used as the landing page. The server will find it without us specifying it in the URL. If there is an index.html page, we would have to name the resource directly to access it. There is no special functionality to the possible default pages the server will look for. It’s entirely our choosing which name to use. The most common is typically the best choice for consistency.

I didn’t read any of the results yet, but here is a SERP…

https://www.ecosia.org/search?q=page+load+precedence%2C+apache

Not sure what you’ll find there. When we sign up for a hosting plan for our domain we do not have access to the server configuration, so must resort to htaccess to customize our own configuation. This should really be avoided, though as it can slow the site down. Something for way down the road.

When you first get a domain hosted, try an experiment with the names I gave above. Rename the stock HTML page that your host has temporarily installed (to prevent 404 responses from your new domain). Create a plain HTML page and upload it as each of these names…

index.php
index.htm
index.html
home.htm
home.html
default.htm
default.html

Navigate to your domain in a browser with just the domain.tld/ and see which one comes up. The one with .php should be the one to come up. Just check the location bar for the full URL.

Remove the index.php page and try again. Will it be index.html? or index.htm? Remove that page and try again. Keep a note of the order of the results. Keep removing the latest page to come up. Depending upon the server, it might not search for home or default but it doesn’t hurt to try. Be sure to rename the stock page back to index.html (or whatever it was named) when you are done your test. You do not want your home page to ever respond with 404 (or worse, 500).

By the time you get to the part of acquiring a domain and purchasing a hosting package you will likely have something of a mock-up for your site so the sooner you get something up (and not “Under construction”) your site will be live. For a new site, keep everything simple and brief. Let search engines know the intention of your site by giving a decent description in textual form. A couple hundred words is adequate. Even if you don’t have any other pages ready, do a good job on your first home page.