Using the anchor link:
<a href="http://www.csscookbook.com/">Web site</a>contains links to download more materials.</p>
to link to another page in the same website, link to its file:
<p>Check out the <a href="
about.html">About page</a> for more information.</p>
<p>This book's <a href="http://www.csscookbook.com/"
title="Link to the book
site">Web site</a> contains links to download more material.</p>
For example, suppose you have a website composed of four pages within the same root folder, the main directory that contains the website files, as shown in Figure 1-13:
<a href="http://www.csscookbook.com/services.html">Services Page</a>
If you want to create a link from the
index page to another page on the same website, use a
relative link. A relative link is a little bit
leaner than an absolute link and, as in this example, can cite just
the filename itself within the
Relative links contain neither the full http:// protocol nor the domain name.
When a browser navigates to a relative link, it uses the domain name of the page it is currently viewing to assemble the link to where it should go next.
Just as your personal computer probably contains numerous folders holding numerous files for a project, websites are also composed of folder sets and files. To link from one document to another document within the same website, use relative links.
For example, say you have a main technical specs page within a specs folder, which itself is in a widget folder. The organization of the files on the server might look something like this:
If you want to go up two parent directories and link to the main products page from the technical specs page, you would format the link like so:
Here is how you would use a root relative link to code the link from the technical specs page to the main product page in the preceding example:
The forward slash signifies the protocol and domain name of the URI, a sort of shorthand for links.
Then, link to that anchor by prefacing the
id name with a hash symbol
When clicked, the browser navigates to the part of the document
that has the corresponding
If a document is not longer than the browser’s viewport or window, there won’t be any noticeable change that the browser has skipped to an anchored link.
Designers use anchors to create a table of contents at the top of a web page that lets you quickly navigate to other parts of the document. This approach is particularly useful on web pages with a large amount of content to help users avoid excessive scrolling.
Chapter 7 on links and navigation