Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
To create a subpage in a basic HTML site, make a second HTML document, save it in the location you want, and link to it with an <a href="..."> element. A subpage is not embedded automatically inside its parent page: it is another document that the browser requests when someone follows the link. The examples below show a flat layout, a folder layout, accessible navigation, testing steps, and fixes for the path errors that cause most broken links.
What a subpage is in HTML
In a static website, a subpage is normally a separate file such as about.html, contact.html or docs/getting-started.html. The browser moves to that document when an anchor points to its URL. MDN’s multipage exercise uses this separate-file model and ordinary links between documents (MDN: Creating links).
HTML provides the document and the link; your folder structure and web server determine where the resulting URL lives. A directory by itself does not create navigation. Someone can reach a new file only if a link, bookmark, typed URL, sitemap or other mechanism points to it.
Choose a file layout before you write the link
For a small site, either of these layouts works. Both use a normal anchor; the difference is the path in href and how you organize files.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
| Layout | Example files | Link from root index.html |
Best fit | Important detail |
|---|---|---|---|---|
| Sibling file | index.htmlabout.html |
about.html |
A site with a few pages | Flat and easy to inspect |
| Folder page | index.htmlabout/index.html |
about/ or about/index.html |
Grouping related pages or using short directory-style URLs | The host must serve index.html as the directory’s default document if you use about/ |
| Named file in a folder | index.htmlpages/about.html |
pages/about.html |
Keeping all secondary pages together | Links from pages at other depths need different relative paths |
Directory-style URLs are a hosting convention, not a special subpage feature. Confirm how your host handles a folder containing index.html; configurations differ (MDN’s relative-path guidance).
Create a sibling subpage step by step
1. Make the files
Create a project folder containing index.html and about.html. Use lowercase names consistently if your host treats capitalization as different.
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home | Example Site</title>
</head>
<body>
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="index.html" aria-current="page">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<main>
<h1>Home</h1>
<p>Welcome to the example site.</p>
</main>
</body>
</html><!-- about.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About | Example Site</title>
</head>
<body>
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html" aria-current="page">About</a></li>
</ul>
</nav>
</header>
<main>
<h1>About</h1>
<p>Content for this page goes here.</p>
<p><a href="index.html">Return to Home</a></p>
</main>
</body>
</html>The two files share a directory, so the relative URL about.html resolves directly to the new document. Each page has its own title, heading and navigation, rather than relying on content from the other file.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Create a subpage inside a folder
Folder page with a directory URL
To organize an About section, create about/index.html. From the root homepage, either of these links can target it:
<a href="about/">About</a>
<a href="about/index.html">About</a>The first form asks the server for the about/ directory and depends on its default-index configuration. The second names the file explicitly and is useful when that configuration is unknown. Inside about/index.html, a link back to the root is one level up:
<a href="../index.html">Home</a>Named file inside a folder
If the file is pages/about.html, the root page needs the folder in its path:
<a href="pages/about.html">About</a>From pages/about.html, a link to a sibling such as pages/contact.html is simply contact.html. A link back to the root is ../index.html. Relative URLs are interpreted from the URL of the document containing the link, not from the project root (web.dev: Links).
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Understand relative, root-relative and absolute URLs
| Href | Meaning when written in /pages/about.html |
Typical use |
|---|---|---|
contact.html |
/pages/contact.html |
A sibling in the same folder |
../index.html |
/index.html |
Move up one directory |
../assets/site.css |
/assets/site.css |
Reach a root-level assets folder |
/about/ |
https://your-domain.example/about/ |
A path relative to the site’s domain root |
https://other.example/page |
An external URL | Link to another website |
Do not confuse a root-relative path beginning with / with a relative path. A root-relative link usually works from any page on the same domain, while about.html changes meaning when the linking page moves into a deeper folder. A fragment such as about.html#team first opens the document and then targets the element whose id is team.
Build navigation that people and assistive technology can use
Put the primary site links in a <nav> landmark and use a list of descriptive anchors. The W3C curriculum recommends this pattern for primary navigation (W3C: Creating multiple pages with navigation menus).
- Use destination-specific text such as “Pricing” or “Contact support,” not a row of ambiguous “Click here” links.
- Keep the primary navigation consistent across pages so readers can move between them.
- Mark the current destination with
aria-current="page"when appropriate. - Consider a keyboard skip link before repeated navigation:
<a href="#main-content">Skip to main content</a>, with the destination element givenid="main-content". MDN documents skip links as a way to bypass repeated content (MDN: The anchor element). - Give every document a meaningful
<title>and one useful<h1>. These help users understand where the page sits in the larger collection, a relationship addressed by WAI’s G127 technique (W3C WAI G127).
Test the subpage before publishing
- Open the exact linking page and activate the new link.
- On the subpage, activate every navigation link, including the return-to-home link.
- Check the address bar against your intended path: spelling, capitalization, extension and directory names must match the files.
- Test from a page at each directory depth. A path that works from
index.htmlmay need../when copied intopages/about.html. - Test the deployed URL, not only a local file, because the host may apply directory-index or case-sensitivity rules differently.
- Use the browser’s developer tools Network panel if a click returns a 404. The requested URL reveals exactly what the browser tried to load.
Fix common broken-subpage errors
404 Not Found
Cause: The URL does not map to a deployed file, often because the folder, extension or capitalization differs. Fix: Compare the href character by character with the deployed path. Upload the new file and confirm that it is in the directory named by the link.
The link works on the homepage but not on the subpage
Cause: A relative path is evaluated from the current document. For example, about.html in /pages/help.html requests /pages/about.html, not /about.html. Fix: Use ../about.html for the root-level file, or use a root-relative /about.html when that URL is stable.
Recommended Free Tools
The folder URL shows a directory listing or 403
Cause: The server is not configured to select index.html as the default document, or directory listing is disabled. Fix: Link explicitly to about/index.html, or configure the host’s default document according to its own documentation. Do not assume every host treats folders identically.
CSS or images disappear on the new page
Cause: Asset paths are relative too. A stylesheet reference such as assets/site.css in a root page becomes /pages/assets/site.css when copied unchanged into pages/about.html. Fix: Adjust it to ../assets/site.css, or use a root-relative path such as /assets/site.css when deploying at the domain root.
The page opens locally but not after upload
Cause: The new file may not have been uploaded, the deployed URL may use a different base path, or the host may distinguish uppercase and lowercase names. Fix: Inspect the deployed directory and request the exact URL directly, then update the link to match.
Keep a growing site maintainable
For a handful of pages, duplicated navigation is understandable and transparent. As the site grows, update the same navigation links on every document or generate them through your build system; plain HTML does not synchronize separate files automatically. Keep page-specific content in each document, use predictable folders, and choose one canonical URL style (for example, always linking to about/ or always to about.html). This reduces inconsistent links and makes future moves easier.
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
When you move a subpage, update every internal link that points to its old path and configure a redirect on the server when an old public URL must continue to work. Preserve meaningful link text and page titles after the move.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If your goal is to obtain an image or PDF of a subpage rather than hand-test it in a browser, ScreenshotNeo can capture the URL through one request. Its capture pipeline accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups and chat widgets before the shot; each step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
cURL
See the ScreenshotNeo API documentation for all options. Replace the URL with your deployed subpage:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/about.html -o about.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,
)
r.raise_for_status()
open("about.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}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('about.webp', Buffer.from(await res.arrayBuffer()));The API supports full-page captures with lazy images loaded, element selection by CSS selector, dark mode, 12 device presets or custom viewports, retina scale, PDF paper sizes and page ranges, custom CSS and JavaScript, clicks before capture, selector hiding, waits for selectors, delays or network idle, request and resource blocking, custom headers, cookies, user agents, Authorization, timezone and geolocation, transparent backgrounds, resizing, configurable-TTL caching, signed links, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, a usage API and an OpenAPI specification. Parameter names used by other screenshot APIs are accepted to ease migration.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Pricing is Free for 1,000 shots per month with no card, then Starter at $5 for 3,000, Growth at $15 for 15,000, Pro at $39 for 60,000, Scale at $99 for 250,000 and Business at $249 for 1,000,000. Yearly billing provides two months free, and every feature is included on every plan. Create a free ScreenshotNeo account to get 1,000 screenshots a month without a card.
Subpage checklist
- Create a real
.htmldocument at the intended location. - Give it its own title, heading and page content.
- Link to it with an
<a href>whose path is relative to the linking file. - Use
../when moving from a nested folder to its parent. - Place primary links in a labeled
<nav>list and use descriptive text. - Verify folder-index behavior with your host or link directly to
index.html. - Test every direction of navigation on the deployed site.
Frequently Asked Questions
Can a subpage use a different file extension such as .htm?
Yes. The extension is part of the URL, so the anchor must use the exact deployed name, such as help.htm. Keep one naming convention throughout a site to avoid confusion.
Best Value
Do I need JavaScript to create a subpage?
No. A separate HTML file and an anchor are sufficient for ordinary multipage navigation. JavaScript is only needed for behavior beyond loading another document.
Can two subpages share the same CSS file?
Yes. Reference the shared stylesheet with a path that is correct from each page’s directory, such as ../assets/site.css from a one-level-deep page.
How do I link to a specific section on the new page?
Give the target element an id, for example <h2 id="pricing">, then link with about.html#pricing.
The Bottom Line
A reliable HTML subpage is simply a separate document plus a correctly calculated link. Decide the folder layout first, verify relative paths from every directory depth, provide consistent accessible navigation, and test the deployed URLs rather than assuming a folder automatically creates a page.
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.
