# Files and Folders for a Website

A website is a folder of files, so give each site its own folder, name every file in lowercase with hyphens instead of spaces, make index.html the front page and keep pictures in an images folder.

Novice · HTML · Web Development · Updated October 31, 2026

## After this lesson you can

- Name web files so they work on every web server, in lowercase with hyphens instead of spaces and the right extension
- Lay out a website's folder with index.html as its front page and its pictures in an images folder

## Key takeaways

- A website is a folder of files. Give each site its own project folder, with index.html as its front page.
- Name web files in lowercase, with hyphens between words and no spaces, such as game-night.html. Many web servers treat Menu.html and menu.html as two different files.
- The extension after the last dot, such as .html or .jpg, says what kind of file it is. Turn on showing extensions so you can see it.
- Keep pictures in an images folder. From index.html, the path to one is images/ and its name, such as images/dice.jpg.

A page that works perfectly on your computer and shows "404 Not Found" once it's online is one of the most common surprises in web development, and the cause is usually a file name: a capital letter, a space, or a hidden `.txt` on the end. A few habits about naming and arranging files prevent it, and they're the same habits every web team uses. Set them up now, before your first real page, and you won't have to undo anything later.

## A website is a folder

Think of a kitchen drawer for takeout menus: one drawer, everything about takeout in it, and you always know where to look. A website works the same way. It's a **folder** of files: the pages, the pictures, and later the styles. When you put a site online, you upload that folder, and the web server hands out its files when browsers ask.

So every website you build gets its own **project folder**, and all its files go inside it. In this course, keep them together in one `html-course` folder in your **Documents** folder:

```text
Documents/
└── html-course/
    ├── game-night/
    ├── band-fan-page/
    └── weekend-trip-guide/
```

A folder is also called a **directory**, especially in a terminal. They mean the same thing.

## File names that work on the web

Your computer is forgiving about names; the web is not. Many web servers treat `Menu.html` and `menu.html` as two different files, even though Windows and macOS treat them as the same one. A link to `menu.html` works on your computer and breaks online. Spaces cause trouble too: in a URL a space becomes `%20`, so `game night.html` turns into `game%20night.html`.

The rule that avoids all of it:

- **Lowercase** letters and numbers only.
- **Hyphens** between words, never spaces. This style is called **kebab case**, because the words look like pieces on a skewer.
- **No other symbols**: no `&`, `#`, `?` or accented letters.

```text
Works everywhere           Causes trouble
game-night.html            Game Night.html
rules-and-snacks.html      rules&snacks.html
images/board-games.jpg     images/Board Games.JPG
```

## Extensions: what kind of file it is

The letters after the last dot in a file name are its **file extension**. They tell the computer, and the browser, what kind of file it is: `.html` is a web page, `.css` a stylesheet, `.jpg` and `.png` pictures.

Windows and macOS hide extensions unless you ask to see them, which leads to a classic mistake: a file that looks like `index.html` but is really `index.html.txt`, a text file the browser shows as plain text. Turn extensions on:

| Windows 11 (File Explorer) | macOS (Finder) |
|---|---|
| **View > Show > File name extensions** | **Finder > Settings > Advanced**, then check **Show all filename extensions** |

VS Code always shows the whole name, extension included, so creating files there avoids the problem.

## index.html: the front door

When a URL names a folder but no file, such as `https://www.example.com/`, the web server sends that folder's `index.html`. That makes `index.html` your site's **front door**: the page visitors see first. Every website you build in this course has one, and it's always named exactly `index.html`, all lowercase.

Other pages sit beside it, and pictures go in a folder of their own named `images`:

```text
game-night/
├── index.html
├── rules.html
└── images/
    ├── board-games.jpg
    └── dice.png
```

A **path** is the directions to a file. Starting from `index.html`, the directions to the dice picture are "go into `images`, then take `dice.png`", written `images/dice.png`. A path that starts from where you are, the way this one starts from `index.html`, is a **relative path**. You'll write paths like it when you add links and pictures, in *Links Between Your Own Pages* and *Adding Pictures*.

**Try it.** Inside your `html-course` folder, make a folder named `my-first-site`. Open it in VS Code with **File > Open Folder**. In the Explorer, use the **New Folder** icon to make an `images` folder, and the **New File** icon to make `index.html` (outside `images`). Your Explorer should show the same shape as the tree above. Then look at the folder in File Explorer or Finder with extensions turned on: the file is `index.html`, nothing more.

![VS Code's Explorer panel showing a project folder named game-night, with index.html at the top level and an images folder holding two pictures](https://www.ask-codey.com/lessons/TODO)

## Check yourself

2 questions to try on the lesson page.

## So what

A website is a folder, and its file names are part of its addresses. Lowercase, hyphens, the right extension and an `index.html` at the front: get these right from the first page, and your links and pictures keep working when the site goes online.

## Key terms

- [File Extension](https://www.ask-codey.com/glossary/file-extension)
- Directory
- [Kebab Case](https://www.ask-codey.com/glossary/kebab-case)
- [Relative Path](https://www.ask-codey.com/glossary/relative-path)

## Cheat sheets

- [Files and Folders for a Website](https://www.ask-codey.com/cheat-sheets/html-files-and-folders-for-a-website-cheat-sheet)

Source: https://www.ask-codey.com/lessons/html-files-and-folders-for-a-website