How To Make Different Pages In HTML: Simple Multi-Page Website Structure

I built my first multi-page site in 1998 on a hand-me-down IBM. Three pages, one folder, and a navigation bar that broke every time I moved a file.

Turns out the secret is organization: one folder for HTML, another for images, and consistent naming. The a href tag becomes your best friend—linking pages is as simple as pointing to the right file path.

You’ll end up with a clean structure that grows with your project. No broken links, no confused visitors, and a setup that even my 12-year-old self could’ve maintained.

Works for personal sites, portfolios, or small business pages. Here’s how to set it up right from the start.

What Youll Need

Instructions

Here’s the procedure I follow to create a clean, functional multi-page website quickly.

Start by creating a new folder on your desktop or documents directory for the project. I always name it something descriptive like my-website to keep things organized. Inside this folder, create a new subfolder called pages—this will house all your individual HTML files.

Now, create your first page by making a new file named index.html in the root folder. This will serve as your homepage. For additional pages, create separate files in the pages folder, such as about.html, contact.html, and services.html. Naming files this way makes them easy to reference later.

Open index.html in a text editor like VS Code or Notepad++. Start with the basic HTML5 boilerplate: <!DOCTYPE html>, followed by <html>, <head>, and <body> tags. I like to add a <meta charset=”UTF-8″> tag in the head to ensure proper character encoding.

Repeat this structure for each page in the pages folder. Copying the boilerplate from index.html and pasting it into the new files saves time. Just update the <title> tag in the head to reflect the page’s purpose, like About Us for about.html.

In the <body> of index.html, create a navigation bar using <nav> and <a> tags. For example, to link to the about page, use <a href=”pages/about.html”>About</a>. This tells the browser to look in the pages folder for about.html.

Copy the same navigation bar to every page, but adjust the links so they point back to index.html or other pages as needed. For instance, on the about page, the home link should be <a href=”../index.html”>Home</a>—the ../ moves up one folder level to find index.html.

Open index.html in a web browser by double-clicking the file. Click each link in your navigation bar to confirm they work. You should see the corresponding page load without errors. If a link is broken, double-check the href attribute for typos or incorrect folder paths.

Test the navigation from every page. For example, from about.html, ensure the link back to index.html works. This is the moment that matters: catching broken links now prevents frustration later. I’ve found that even a single misplaced slash can break the entire navigation.

Tips and Common Mistakes

Here’s what I’ve learned from building countless multi-page sites to help you avoid the most common pitfalls.

The Folder Structure Secret: That pages subfolder in Step 1 isn’t just organizational—it creates a clean URL structure. I’ve seen beginners dump all HTML files in the root, which quickly becomes unmanageable. Keeping additional pages in pages/ while reserving index.html for the root prevents path confusion later.

Boilerplate Efficiency: In Step 2, when copying the HTML5 structure between pages, don’t just copy-paste blindly. I always update the <title> tag immediately while the file’s purpose is fresh in my mind. This prevents the embarrassing “New Page” title from slipping through to production.

Navigation Path Precision: The ../ in Step 3’s home link example trips up many beginners. Remember: each ../ moves up one directory level. On your about page, ../index.html works because about.html is in pages/, and index.html is in the parent folder. Misplacing a single slash here can break your entire navigation system.

Testing Protocol: Step 4’s advice about testing from every page is non-negotiable. I once spent hours debugging why my about page couldn’t find the homepage, only to realize I’d used href=”index.html” instead of href=”../index.html”. Always test the navigation flow from each page in both directions.

Frequently Asked Questions

Creating multiple pages in HTML is now a breeze for you! 🎯 With a clear structure, consistent navigation, and proper linking, you can build a multi-page website like a pro. Next, try adding CSS to style your pages and make them visually stunning—your audience will love it! Happy coding!