Planning a Clean HTML Folder Structure

A clean folder structure keeps HTML pages, images, styles, and scripts easy to find. You can start small and add folders only as the project grows.

What You Need to Know

Prefer consistent lowercase file names and short paths. Moving files changes relative paths, so update the references after reorganizing the project.

Think of an HTML document as a small book: the browser needs a title and some information about how to read it, while visitors need the actual chapters and text.

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-project/
    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.

Compare the source code with the rendered page using Inspect Element. The browser might correct malformed markup, so verify structure rather than trusting appearance alone.

What Should You See?

This example may change the document’s behavior or metadata rather than draw something obvious. Use your browser’s developer tools to inspect the actual elements and attributes.

Open the page and compare what appears in the browser tab with the heading inside the document. Both have different jobs.

Try It Yourself

1. Add a pages folder and explain how that changes the path to a shared image.
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

• Creating deeply nested folders before there is any real need for them.
• The title in the browser tab and the heading visible in the page are different pieces of information.

Key Takeaways

• A clean folder structure keeps HTML pages, images, styles, and scripts easy to find.
• Focus on what the browser does with the markup, not just how the example looks.
• Prefer consistent lowercase file names and short paths. Moving files changes relative paths, so update the references after reorganizing the project.