HTML HTML File Naming: index.html, Extensions, and Safe Paths

File names are part of web addresses. index.html is a common default page for a directory, but your project can also contain about.html and other clear names. You do not need to learn everything at once. Follow the example, see what changes, and then try a small change of your own.

What You Need to Know

Prefer simple lowercase names with hyphens; avoid surprising spaces or punctuation. Servers with case-sensitive file systems treat File.html and file.html as different names.

Start small. Save your files in one folder and change one thing at a time. If the page does not look right, check the file you actually opened before changing the code again.

Example: See It in Action

This is a file layout or an editor shortcut rather than a piece of HTML to paste directly into a webpage. Follow its structure in your editor.

my-website/
    index.html
    about.html
    css/
        style.css
    images/
        banner.jpg

Let’s Understand the Example

Follow the example from top to bottom. The indentation shows which information belongs together. Each line has a job, even when the browser does not draw it as something visible.

This example is a folder map, not something to paste into an HTML file. Each indented entry belongs inside the folder above it. A browser uses the file paths that you actually create.

What Should You See?

This is a folder layout to build on your computer, not a browser screenshot. Create those files and folders in your editor, then open index.html to see the page.

Save a copy of your working file before experimenting. Change just one thing, test it in the browser, and compare the result to the original.

Try It Yourself

1. Rename a page, update its link, and test it in the browser.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Renaming a page without updating links that still point to the old filename.
• If a result does not change, check that the file was saved and that the browser is showing the right path.

Key Takeaways

• File names are part of web addresses. index.html is a common default page for a directory, but your project can also contain about.html and other clear names.
• Focus on what the browser does with the markup, not just how the example looks.
• Prefer simple lowercase names with hyphens; avoid surprising spaces or punctuation. Servers with case-sensitive file systems treat File.html and file.html as different names.