Link Local Pages with Relative Paths

A hyperlink is made with an <a> (anchor) element. Its href attribute supplies the destination. The text between the opening and closing tags is the visible text a reader encounters.

In this example, about.html is the destination reference, and About this guide is the link text. They have different jobs.

Example location: city-guide/index.html, inside the existing body element.

The anchor structure stays the same, but an href can describe different kinds of destinations. For this tutorial, you will create document-relative paths that connect files on your own computer.

Before writing an href, locate the document that contains the link. In city-guide/, index.html is the current page. Because about.html sits directly beside it, its filename is a document-relative path: it means “look in this same folder.”

No hostname or leading slash is needed for this local link.

Create a folder named city-guide, then save these two complete documents directly inside it. The links are reciprocal: each page provides a route to the other page. Keep the documents unstyled and script-free for this practice.

city-guide/index.html — complete document

city-guide/about.html — complete document

Save both files before testing. Complete the missing href values, then open a file in your browser and follow both links. For each destination, check two things: the displayed page content changes, and the browser’s local-file address ends with the intended filename. If either check fails, compare the folder location, spelling, capitalization, and .html extension.

A document-relative path begins in the folder that contains the current page—the file holding the link.

From city-guide/index.html, reach the park page by entering its child folder first: write the folder name, a forward slash, then the filename. From city-guide/places/park.html, ../ moves one folder upward, back to city-guide/.

Trace from the linking document, not from the project folder in general. The same destination can need a different href when the current page is in a different folder.

Create a folder named places inside city-guide/. Then create park.html inside places and save this complete document. Its two links leave the places folder before naming files in the parent folder.

city-guide/places/park.html — complete document

city-guide/index.html — inside the existing <body>, add this paragraph alongside the existing page content.

A fragment link points to a specific element in an HTML document. Give the target element an id that is unique within that document. The link’s fragment begins with # and must match that id exactly.

For this guide, the target is id="facilities". Its same-page fragment is #facilities: the # belongs in the href, not in the id value.

A fragment can follow a document-relative path too. Start from the current page’s folder, reach the destination document, then add # and the target id.

Edit the existing park page. In city-guide/places/park.html, add these paragraphs inside the existing <body>, after its current links.

The first paragraph creates a same-page link. The second is the exact target. Keep this id on this one paragraph only.

city-guide/places/park.html — insert inside the existing <body> after the current link paragraphs.

Now link directly to that paragraph from the home page. The current page is city-guide/index.html, so the document-relative path enters the places folder and finds park.html. Append the fragment after the filename.

Add this paragraph inside the existing <body> in the home page, after the existing park link. After saving and refreshing, activating it opens the park page at its facilities target.

city-guide/index.html — insert inside the existing <body> after the existing Riverside Park link.

A reader should be able to predict where a link goes from its text. Compare “click here” with “Riverside Park.” The second label communicates a destination even when it is read out of its surrounding sentence or listed with other links.

For this guide, use the destination-specific text “Riverside Park” for the park page. The href still supplies the destination; changing the visible words does not change where the link goes.

In city-guide/index.html, inside the existing <body>, replace the park link paragraph with this markup. Save the file and refresh it in your browser.

An accessible name identifies a control for assistive technologies. For this plain-text link, the enclosed words “Riverside Park” provide that name. The href provides the destination, not the name.

A native role identifies what kind of control it is. An <a> element with href has the native role link. The browser exposes this semantic information in an accessibility tree, which represents controls and their meaning rather than merely copying the visual layout.

Choose the element by what the person needs to accomplish:

• Navigation takes the person to another document or a location in a document. Use a link.
• An action changes, reveals, starts, or controls something on the current interface. Use a button.

Start with native HTML. A link with an href provides navigation; a native button provides button semantics and built-in keyboard support. The element choice comes from the requirement, not from the visual appearance you want.

In the City Guide, the about-page reference is navigation, so it remains a link. “Show details” describes an action on the current page, so it uses a native button.

The button below is illustrative markup only. This tutorial does not implement a show-details action.

Complete the native elements for the two requirements in the City Guide.

Native links can receive keyboard focus. Press Tab to move focus forward among focusable controls; press Shift+Tab to move it backward. The browser shows which control has focus with a visible focus indicator, such as an outline or highlight. Its appearance can vary by browser and operating system.

Keyboard focus is separate from the mouse pointer. Watch the focus indicator move so you know which link will receive the next keyboard command.

After a native link has focus, press Enter to activate it. The browser follows the link’s existing href; no custom JavaScript or custom keyboard handling is needed.

Use the focus indicator first, then activate the focused link. This lets you test the same local routes that a keyboard-only visitor uses.

Save your files and open city-guide/index.html in your browser. Press Tab until Riverside Park has visible focus, then press Enter. Confirm that the Riverside Park page opens and that the local-file address points to places/park.html.

On the park page, use Tab until Back to the guide has focus. Press Enter and confirm that the City Guide home page opens. Check the destination after each activation rather than relying only on the source markup.

When a local link fails, first identify the current page: the document that contains the <a> element. Resolve its href from that document’s folder, not from the folder you expected to reach.

In city-guide/, a link in index.html starts in city-guide/. A link in places/park.html starts one level deeper, in places/. Only after locating that starting folder should you compare every path segment with the real destination.

Compare the written href with the actual folder name, filename, .html extension, and capitalization.

A path problem can prevent the destination document from opening. A fragment problem is different: the destination page may open, but the fragment after # does not match an element id exactly. The # belongs in the link reference, not in the id value.

city-guide/places/park.html — fragment target to inspect

After editing and saving, validate the repair by using the link in the browser.

For a page link, activate it and confirm the destination’s visible page content and local-file address. For a fragment link, also confirm that the address ends with the expected fragment and that the target paragraph is reached. Little or no scrolling can still be correct when the target was already visible.

Your finished project should contain these three files:

• city-guide/index.html
• city-guide/about.html
• city-guide/places/park.html

Before testing, save every file. Resolve each route from the current page—the document that contains the link—not from the project folder in general. Then verify the route in the browser rather than trusting the markup alone.

File: city-guide/index.html.

Insertion location: inside the existing <body>. Complete the destinations for the home page links.

File: city-guide/places/park.html.

Insertion location: inside the existing <body>. Complete the destinations for links that start from the park page.