Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →To create a subpage in a basic HTML site, make a second HTML document, save it where you want it in the project, and link to it with an anchor whose href matches the file’s path. For a small site, that can be as simple as about.html beside index.html. For a larger site, put the page in a folder such as about/index.html and link to that location. A subpage is a separate document; a folder alone does not create a page or navigation.
The complete workflow is: choose the URL and file layout, create valid HTML, add a descriptive link (usually in a semantic <nav>), test the path from every page that links to it, then deploy the same structure to your host. MDN’s multipage exercise follows this separate-file-and-links model. MDN: Creating links
Choose a file layout first
Your folder structure determines the relative URL you write in href. Two layouts cover most simple static sites:
| Layout | Example files | Link from the root page | Best fit |
|---|---|---|---|
| Sibling files | index.htmlabout.html |
about.html |
A small site with a few pages and flat paths |
| Folder page | index.htmlabout/index.html |
about/ or about/index.html |
Grouped content or directory-style URLs |
| Named subfolder file | pages/about.html |
pages/about.html |
Several related pages under one directory |
Both layouts use ordinary anchors. Select the one that gives you a clear URL and manageable paths. A URL ending in a folder commonly serves that folder’s index.html, but this is a web-server convention, not a special HTML feature; verify your host’s default-document configuration. MDN documents relative paths and the common index.html convention.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Create a sibling subpage step by step
1. Create the document
In the same directory as your homepage, create about.html. Give it its own language declaration, character set, viewport, title, heading, and content:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About Acme Studio</title>
</head>
<body>
<h1>About Acme Studio</h1>
<p>Information about the people and work behind this site.</p>
<a href="index.html">Return to Home</a>
</body>
</html>The new file is the subpage. Nothing else is required for the browser to load it directly if the URL and filename are correct.
2. Link to it from the homepage
Add a descriptive anchor to index.html. For primary site navigation, put a list of links inside a nav element:
<nav aria-label="Main navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Acme Studio</a></li>
</ul>
</nav>The W3C curriculum recommends nav for a major navigation block and lists of links to other documents. W3C: Creating multiple pages with navigation menus Use link text that tells readers what they will find instead of vague text such as “click here.”
3. Add a consistent return path
Include the same primary navigation on the subpage and a link back to the homepage. A consistent header helps users understand where the page belongs. A skip link can let keyboard users bypass repeated navigation:
<a class="skip-link" href="#main-content">Skip to main content</a>
<nav aria-label="Main navigation">...</nav>
<main id="main-content">
<h1>About Acme Studio</h1>
</main>MDN identifies skip links as a way to bypass repeated content, and WAI guidance addresses identifying a page’s relationship to a larger collection. MDN: The anchor element WAI technique G127
Use a nested folder when the page belongs to a section
Root page linking into a folder
Suppose your project is:
site/
index.html
pages/
contact.htmlFrom index.html, link with:
<a href="pages/contact.html">Contact</a>A page linking back up
From pages/contact.html, the root homepage is one directory above, so use ../index.html:
<a href="../index.html">Home</a>Relative URLs are resolved from the document containing the link, not from the project root. The same destination therefore needs different href values at different directory depths. web.dev: Links
Recommended Free Tools
Directory-style URLs
For this structure:
site/
index.html
about/
index.htmlYou can write <a href="about/">About</a>. Many hosts then map /about/ to about/index.html. If the host does not provide that default mapping, link explicitly to about/index.html or configure the server. Do not assume that opening a folder URL will work identically on every host.
Build a complete multipage example
This small project has a homepage, an about page, and a contact page:
site/
index.html
about.html
contact.html
styles.cssUse the same navigation on each document, changing only the relative paths when pages move into folders:
<nav aria-label="Main navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>Keep each page’s <title> and primary <h1> specific to its content. Put shared CSS in styles.css and reference it with a path valid from that page. For a page in about/, the stylesheet reference would usually be ../styles.css, not styles.css.
Relative, root-relative, and absolute links
Relative links
about.html, pages/about.html, and ../index.html are relative to the current document. They are portable when you move the whole site between hosts or local folders.
Root-relative links
A link such as /about/ starts at the website root. It is convenient when every page is deployed at the domain root, but it can fail if the site is hosted under a subdirectory such as /docs/.
Absolute links
https://example.com/about.html includes the complete origin. Use it when linking to another site or when a system specifically requires a canonical external URL. For ordinary internal navigation, relative links avoid hard-coding a domain.
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
Accessibility and navigation details that matter
- Use one clearly identified primary
navblock for the site’s main links; not every group of links is navigation. - Write destination-specific labels such as “Pricing” or “Contact support,” not repeated “Read more” links with no context.
- Keep keyboard focus visible and ensure links can be reached without a mouse.
- Use a logical heading hierarchy and a unique page title so users and assistive technologies can identify the page.
- Keep the navigation order consistent across subpages, and mark the current location when useful with
aria-current="page".
These practices follow the semantic navigation and link guidance from the W3C curriculum and MDN anchor reference. W3C navigation guidance MDN anchor reference
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchTest the subpage before publishing
- Open the new HTML file directly and confirm its title, heading, styles, images, and scripts load.
- Open the page that contains the link and activate it with both a mouse and keyboard.
- Test every navigation link from the subpage, including links that go up a directory.
- Inspect the final deployed URL, not just a local file URL. Some hosts use case-sensitive filenames even when a local computer does not.
- Check the browser address bar and network error status for 404 responses, redirects, or mixed-content warnings.
- Test on a narrow viewport and with a keyboard to catch overflowing navigation and inaccessible focus states.
Troubleshooting broken subpage links
“404 Not Found”
Confirm that the file was uploaded, that the spelling and capitalization match exactly, and that the extension is really .html rather than a hidden .html.txt. Recalculate the path from the file containing the link.
The link opens the wrong page
Inspect whether the href is relative to the current document. A link copied from the homepage may need an extra ../ when pasted into a nested page. Check for an unintended leading slash or an old duplicate filename.
Styles or images disappear on the subpage
Asset paths are relative too. From pages/contact.html, a root-level stylesheet or image usually needs ../styles.css or ../images/logo.svg. Browser developer tools show the exact failed request.
The folder URL fails but index.html works
Your host may not be configured to serve directory index files. Link to about/index.html, enable the host’s default-document setting, or use the host’s documented rewrite rules. The behavior is server-specific.
Free tools Windows power users keep installed
One-click scans. No signup required.
The page works locally but not after deployment
Do not rely on file:// behavior for server features. Upload the complete directory tree, preserve case, and test through the deployed HTTP(S) URL. If scripts use fetch requests, run the site through a local development server so origin and path behavior match production more closely.
Or skip the browser setup
If you need a rendered image of the new subpage for documentation, a pull request, or a visual check, ScreenshotNeo can capture the deployed URL with one GET request. It accepts the consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before the capture; each cleanup step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and whether the request was billed. It also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
See the ScreenshotNeo documentation for all options. Replace the example URL with your deployed subpage:
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/about.html -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/about.html"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/about.html' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);The service includes full-page captures with lazy images loaded, CSS-selector element captures, custom CSS and JavaScript, click and wait conditions, device presets, arbitrary viewports, retina scale, PDF output, request blocking, headers, cookies, user agents, authorization, timezone and geolocation controls, transparent backgrounds, resizing, cache TTLs, signed image links, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, usage reporting, and an OpenAPI specification. Parameter names used by other screenshot APIs also work, which can simplify migration.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesThe Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; yearly billing gives two months free. Create a free ScreenshotNeo account to capture your subpage without setting up a browser.
When a separate HTML subpage is not the right model
A separate file is the natural choice for a small static site. A framework-based single-page application may instead change views with client-side routing, while a content-management system may generate URLs from database records. Those systems still need correct links and server routing, but you create the route or entry in the framework rather than hand-authoring one file per page. If you are starting with plain HTML, separate documents are simpler to understand, deploy, and debug.
Frequently Asked Questions
Can I create a subpage without a separate HTML file?
Yes, a JavaScript application or server-side framework can render a route dynamically. For a plain static HTML site, however, the reliable and simplest approach is a separate document such as about.html or about/index.html.
Should I link to about.html or about/?
Use about.html when you want an explicit file URL. Use about/ when your host is configured to serve about/index.html as its directory default; otherwise link to the index file explicitly.
Why does the same href need different paths on different pages?
Relative URLs are resolved from the document that contains the link. A page one directory deeper needs ../ to reach a root-level file, while a root page does not.
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.
