How am I supposed to use index.html?

thefistopher picture thefistopher · Apr 5, 2015 · Viewed 24k times · Source

Is index.html meant to be just the first page among many separate HTML pages, or is it supposed to be the only page, and the other pages are just snippets put inside of it? And by supposed to, I mean, what is the best/most common practice?

I used to think the former, but I just tried using HTML5-Boilerplate and it's setup seemed like it was implying the latter. All this awful meta stuff and imports (is there a term for that?) is in the index.html, and I don't want to have to put that in every single page. Same goes with the navigation bar and the footer which is on every page. And the project structure doesn't have an html folder (obviously I could make my own, but I took it as implying I didn't need one). It sounds ideal if instead of loading a different html page I just leave a placeholder and insert another file, but I don't know how to do that other than an iframe, which would be ugly. How would this approach work, if it is the right way?

If you couldn't tell I'm very much a beginner. I feel like this must be a common question but I don't know what the term(s) for this is, so I've been having trouble searching. Thank you

Answer

GolezTrol picture GolezTrol · Apr 5, 2015

Many web servers will have a 'default document' that is returned when you specify just a path and no file name. So browsing to http://example.com will return the default document from the document root directory of that domain.

Quite often the default document can be named index.html, index.htm or -if PHP is installed- index.php, but they can be other names as well, depending on the configuration.

Some sites are built up from many actual html files, while other, more dynamic sites usually look like they consist of many html pages, but actually they just have a single entry page (like index.php) that handles all requests and generates output based on the url.

HTML5 Boilerplate (assuming you mean this one) describes a structure for a site. This structure is mostly the build-up of HTML, CSS and JavaScript. The index.html included with it is only a skeleton HTML file. It describes what your output should look like. How that output is generated is up to you. You can create a big folder full of separate HTML files, or a dynamic site with a single entry point, like described above. The HTML5 document, the CSS and all the other front-end stuff are interpreted by the browser, and it doesn't care how that content was generated.