What is index html var
The fundamental relationship at the heart of the web is the relationship between the server and the client or browser (we’ll use «browser» and «client» interchangeably for the rest of this article).
Every web page is produced by a server and viewed by a browser. There are many different kinds of web servers and many different kinds of web browsers. The client doesn’t know everything about the server, and the server cannot control everything about the browser; but the thing they both agree on is to communicate (at least initially) using the HyperText Transfer Protocol, .
Now that your GET request has reached the web server, the server has to parse the URL to determine what to include in the response.
So when the request for GET https://my-domain.dev/ comes in, the web server parses it into three major parts,
So this particular request is asking for the entire web root directory since the path part of the URL didn’t include any specific file in the request. How does the web server know how to respond? Most web servers when given a request for a directory will look for a special file in that directory named index.html and serve that. It’s as if the user actually typed https://my-domain.dev/index.html into their browser.
The simplest kinds of web servers retrieve the file located at the path specified in the URL, relative to the web root. The web root is the directory which that web server is configured to look in for files. For example, the Apache web server running on Ubuntu Linux 14.04 looks in /var/www/html/ by default, whereas the nginx server by some default configurations looks in /usr/share/nginx/html/ .
Just like on your computer, you can have as many pages and folders as you want in the web root
/ └── var └── www └── html ├── about │ ├── contact.html │ └── index.html ├── index.html └── help.html This represents the default server root for Apache web server on linux.
| Page | Url | File |
|---|---|---|
| Homepage | https://my-domain.com/ | /var/www/html/index.html |
| Help | https://my-domain.com/help.html | /var/www/html/help.html |
| About | https://my-domain.com/about/ | /var/www/html/about/index.html |
| Contact | https://my-domain.com/about/contact.html | /var/www/html/about/contact.html |
Now if you were to request https://my-domain.com/main.html , the server would send back the infamous «404 — File not found» error, since there’s no /main.html file in the web root. Likewise, if you were to rename index.html to main.html , then https://my-domain.com/main.html would work but https://my-domain.com/ would give a «404».
Files Outside the Web Root
In the above examples, the server used the default web root /var/www/html , but we could also have configured it to use /var/www/html/about , e.g. by changing into that directory and starting a server from the command line:
cd /var/www/html/about http-server If we did that, though, the server would not be able to read help.html . The only files it can serve are:
It will be important to keep this in mind when structuring your projects. In a buildless workflow, the web server will need to have all of your dependencies, including node_modules in its web root. So if you decide to keep your JavaScript code in a subdirectory of the project root, like /src , you will need to keep index.html in the root directory and run your local development server from there.
Just like how running http-server from /about made help.html inaccessible, running your local development server from /src would make node_modules inaccessible.
The «HT» in HTML , «HyperText», refers to the way in which documents can link to other documents. This is the fundamental feature of HTML and the most important feature of the web.
Hyperlinks («links» for short) in HTML are represented by the anchor element. The href attribute contains the URL which the hyperlink points to.
There are three basic types of URLs which you can link to:
The most specific type of URL is the fully-qualified URL. They contain a protocol; zero, one, or more subdomains; a domain name; and an optional path. They refer specifically to a single, unique resource. Some examples:
- https://www.google.com
- https://modern-web.dev/guides/going-buildless/serving/
- ws://demos.kaazing.com/echo
Links with fully qualified URLs can link a page on your server, to pages on another server. This is what puts the «world-wide» in «world-wide-web». All the links to MDN in this article are like that.
a href="https://google.com/">if you click me I will open googlea> Absolute URLs contain only a path, omitting the protocol and origin. They always begin with / . Like fully-qualified URLs, they always refer to the same path relative to the origin, for example:
a href="/index.html">Home Pagea> This link will have the same behaviour on all pages on modern-web.dev , namely returning to the Modern Web homepage. but if placed on developer.mozilla.org , will link to the MDN homepage, not Modern Web’s.
Absolute links containing only a / are special, they refer to the web root. In most cases, they are synonymous with /index.html .
The least specific type of URL is a relative URL. Like absolute URLs, they omit the protocol and origin, but unlike absolute URLs, which contain a full path, relative URLs contain a partial, or relative path. They start with ./ , ../ , or a path to a resource. for example:
a href="../">Go Upa> a href="./help.html">Go to Help Pagea> a href="help.html">Also Go to Help Pagea> Relative URLs are relative to the current document, so they may have different behaviour depending on which page on a website they are used.
Given the following folder structure:
. ├── about │ ├── index.html │ └── contact.html ├── help.html └── index.html And the following link tag
A link within help.html would link to index.html .
A link within about/contact.html would link to about/index.html .
If you wanna know more check out MDN’s HTML basics.
Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!
The right way of using index.html
The reason we use index.html or home.html or derivitives thereof, is because the webserver software itself actually looks for that and serves it. For example:
This is INVALID: (www-directory)
/var/www/ |_blog.html |_blog/ |_math.html |_page2.html |_page3.html |_(. ) This will in fact get served as a page listing the folders and files. (Not what you want). You can try this structure, but also make an index.html file next to blog.html. Notice how it will not serve blog.html unless you specify http://www.site.com/blog.html ) This is why http://www.google.com/ shows the page without you having to specify http://www.google.com/index.html
/var/www/ |_index.html (renamed blog.html to index.html) |_blog/ |_math.html |_page2.html |_page3.html |_(. ) This will serve your blog.html file AS THE HOMEPAGE. (Not list all the folders/files in that directory)
The webserver software has (in the config) a specialized list of file names that will be served as the homepage or the main page of a folder. (In my experience, index.html takes precedence over index.php, so if you have index.html and index.php in a folder, the index.html is what the public will see) Of course that can all be changed, and you can even set blog.html to be recognized as an «index».
«This trick would change the address of my blog from www.xxx.com/blog.html into www.xxx.com/blog/.»
This would be done by moving blog.html entirely into /blog/ and renaming it to index.html.
Your new structure would be:
/var/www/ |_blog/ |_index.html (renamed from blog.html) |_math.html |_page2.html |_page3.html |_(. ) This should correctly serve http://www.site.com/blog/ to show the contents of your blog.html which we renamed to index.html so the software could set it as the index of your directory /blog/
You’re also free now to put and index.html file into the root of your site http://www.site.com/(index.html) to have links to /blog/ and whatever else you wish.
Specifically answering your questions in short statements:
- Is it a good practice to have the index.html file in every subfolder or is it intended to be only in the root folder? Yes, because it prevents people from seeing what files are in your directories. You can prevent this with a .htaccess file containing Options -Indexes
- Are there any disadvantages or problems that may occur when using the second, «index in every folder» method? None that I can think of.
- Which one of the two ways of structuring the website described above would you prefer? I usually have an index.html or index.php file in the root, subfolders based on category (such as forum or news or login etc.) and then some sort of index inside each of those.
The technical term for index.html is Directory Index for Apache and Default Document for IIS. The other Apache directive of interest is the Options directive. As indicated in the documentation, when Options Indexes is set:
If a URL which maps to a directory is requested, and there is no DirectoryIndex (e.g., index.html) in that directory, then mod_autoindex will return a formatted listing of the directory.
When I setup a website that is not using a content management system, my preferred setup is to have one content page per directory. That page is the directory index (default document) for the directory. All links on the site only link to the directory and end with a trailing slash (e.g., http://example.com/blog/ instead of http://example.com/blog/index.html or ./blog/ instead of ./blog/index.html ). The trailing slash is important to avoid what is commonly referred to as a courtesy redirect. (If the trailing slash is omitted, everything still resolves correctly, but the number of HTTP requests and thus bandwidth increase.)
My primary motivation for the above methodology is twofold. First, it facilitates switching the technology used on the website. For example, I can change a page from index.html to index.php without breaking any links or search engine listings. Second, the file extension of a content page is «noise»; removing the file extension from the URL results in shorter and hopefully more readable URLs.
- All CSS files reside in a css directory in the root of the website.
- All image files reside in an image directory or subdirectory thereof in the root of the website.
- All JavaScript files reside in a scripts directory in the root of the website.
- All flash and other movie files reside in a video directory or subdirectory thereof in the root of the website.
On an Apache server, I disable Options Indexes for the abovementioned directories. On both Apache and IIS servers, I do not specify a directory index (default document) for the abovementioned directories. Thus, a request for any of the directories results in an HTTP 403 error.