What a link points to
An HTML link uses an anchor element and an href attribute to tell the browser where to go. The value of href might identify another file in your site, a complete web address, or a place within a page. The visible link text tells readers what they can expect to find there. Descriptive text such as “Contact details” is more useful than “click here,” especially when someone scans a page or uses a screen reader.
You can follow the examples below with a text editor and a browser; no framework or particular tool version is needed. The file paths describe a hypothetical project, not pages you need to have. As you read, keep one question in mind: where is the page containing the link? Its location matters for some href values but not others.
Relative links start from the current page
A relative link gives directions from the page containing it. Suppose your project has /guide/index.html and /guide/contact.html. On /guide/index.html, an href value of contact.html points to /guide/contact.html. The browser looks in the same directory because the value does not begin with a slash or a web address.
To reach a file one directory higher, use ../. If the project also has /index.html, an href value of ../index.html on /guide/index.html points to that top-level file. Each ../ moves up one directory. You can then continue down another path: ../about/team.html would mean “go up from /guide, then look in /about for team.html,” assuming those directories and that file exist.
A path beginning with / is often called a root-relative path. From /guide/index.html, /guide/contact.html points to the contact file starting at the website’s root, not from the current directory. This is useful for site-wide navigation because the same href value can work on pages in different directories. The leading slash does not make it a complete web address: the browser still uses the current site’s origin. If you open files directly from your computer rather than through a web server, root-relative paths may behave differently than you expect, so test them in the environment where the site will run.
Absolute links name a complete web address
An absolute link provides the full address, including a scheme such as https://, a host name, and, when needed, a path. Because it names the destination independently of the current page’s directory, it is the usual choice for linking to a different website. It can also point to a page on your own site, although relative or root-relative paths are often easier to maintain for internal navigation.
For example, if you move your site to a different domain, internal links written as complete addresses may need updating. A link written as contact.html can continue to work if the two files keep the same positions relative to each other. Conversely, an absolute address is helpful when a destination must be unambiguous outside your site, such as a link shared in a document hosted elsewhere. Use the form that matches what should remain fixed: the destination’s full address or its position within your site.
Fragment links jump to a place on a page
A fragment identifies a location within a page. It appears after a # in the href value and usually matches an element’s id. Imagine that /guide/contact.html contains a section whose id is hours. A link to /guide/contact.html#hours requests that page and directs the browser to that section. On the contact page itself, an href value of #hours can jump there without naming the page again.
The id must match the fragment exactly, so check spelling and capitalization when a jump fails. Give each target a unique id on its page. A fragment can also follow a relative path, as in contact.html#hours on /guide/index.html. This combines two steps: resolve contact.html relative to the current page, then find the hours target on the destination page.
Choose and check links deliberately
For a nearby page in the same project, start with a relative path. For a destination elsewhere on the same site that should be reachable from many directories, consider a root-relative path. For another website, use an absolute address. Add a fragment when the reader needs a particular section rather than the top of a page. These are conventions, not strict rules; a working link is one whose address resolves to the intended destination in your site’s actual setup.
When a link fails, inspect its href value and identify the starting point. For a relative path, trace each directory step from the page containing the link, not from a page you visited earlier. Check file names, directory names, and letter case, which can matter on some servers. For a fragment, confirm that the destination page contains the matching id. Finally, click the link in a browser and check both the loaded page and, if applicable, the section where you land.
