Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Create a multi-page website by saving each page as its own HTML file and linking the files with ordinary hyperlinks. For a small first project, keep the pages in one folder and add the same clear navigation menu to each one; no CSS or JavaScript is needed for visitors to move between pages.
What a multi-page HTML site is
A multi-page site is a set of separate HTML documents connected by links. Each file has its own content and browser tab title; an anchor element with an href provides navigation to another document. The WHATWG HTML Living Standard defines the href value on an anchor as a valid URL, which can be a relative path such as projects.html for another file in the same folder (WHATWG HTML Living Standard: Links).
HTML alone can make the site navigable and meaningful, though it will look visually plain without styling. For a first build, focus on having every page load and every link lead to the right place.
Plan pages and save them together
Choose a small subject and list the pages a visitor needs. For example, a personal site could have Home, Projects, Pictures, and Social pages. MDN uses those page names in its beginner exercise for creating a multi-page website (MDN Web Docs: Creating links).
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Create one file for each page in the same project directory. A simple folder could look like this:
my-website/
index.html
projects.html
pictures.html
social.htmlThe filenames in your links must match the files you actually create. Keeping these files together makes the first relative links easy to understand.
Build a page with landmarks and a descriptive title
Each page should have a unique document title, a clear top-level heading, and content specific to that page. The <header> can hold the site name; <nav> can identify the main menu; <main> should contain the central content unique to the current document; and <footer> can hold suitable closing information. MDN notes that <main> is for the document’s unique central content, not repeated navigation or branding (MDN Web Docs: The Main element).
Here is a starter page. Save it as index.html; make corresponding files for the other pages and change the title, heading, and main content on each.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home | My Website</title>
</head>
<body>
<header>
<p>My Website</p>
<nav aria-label="Main navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="pictures.html">Pictures</a></li>
<li><a href="social.html">Social</a></li>
</ul>
</nav>
</header>
<main>
<h1>Welcome</h1>
<p>A short introduction to this website goes here.</p>
</main>
<footer>
<p>My Website</p>
</footer>
</body>
</html>Connect the pages with a navigation menu
An anchor with an href is a link, not a button by default: its purpose is to navigate to a destination. Put the main group of site links inside a <nav> element and use link text that makes each destination clear. MDN describes <nav> as a section for major navigation blocks, such as links to other documents; it is not necessary to wrap every link on a page in <nav> (MDN Web Docs: The Navigation element).
Copy the same menu to every page, adjusting it only if the site’s structure calls for a change. That gives visitors a familiar route between documents. The links in the sample menu can remain on the current page, or you can omit that page’s link as MDN does in its exercise; HTML does not require one particular menu convention.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Link to a section within a page
A link to another HTML file takes the visitor to another document. A fragment link instead points to an element identifier in the current document. Give the destination an id, then use that value after # in the link:
<a href="#gallery">Jump to the gallery</a>
<h2 id="gallery">Gallery</h2>Use a fragment when jumping to a particular section is useful; it serves a different purpose from the links in a site-wide menu. MDN explains how anchor links and fragment identifiers work in its anchor element guide.
Best Value
Check the links in a browser
-
Save all the HTML files in the folder structure you intend to use.
-
Open
index.htmlin a browser and select each menu link. -
Confirm that each link opens the intended page and that the page’s heading and browser title identify it.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
Repeat from the other pages so visitors can reach the rest of the site from wherever they land.
-
If a link fails, check that the
hrefpath and filename match exactly, including folder location and spelling. For fragment links, confirm that the target element has the matchingid.Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
