Creating a Simple Multi-Page HTML Project

A multi-page site is simply several HTML files connected by links. Begin with Home, About, and Contact pages in one folder, and give each page the same simple navigation. 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

A link to about.html works when both pages are in the same folder. Check the path carefully if you move a file into a subfolder.

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.

project/
    index.html
    about.html
    contact.html
    images/
        avatar.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

Create three files and make sure you can go from each one to the other two.
Save your changes, open or refresh the page, and compare the result with the original example.
Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

Writing a link to About.html when the actual filename is about.html on a case-sensitive server.
If a result does not change, check that the file was saved and that the browser is showing the right path.

Key Takeaways

A multi-page site is simply several HTML files connected by links.
Focus on what the browser does with the markup, not just how the example looks.
A link to about.html works when both pages are in the same folder. Check the path carefully if you move a file into a subfolder.