O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Making a Link to a Web Page

Problem

You want to link to another web page.

Solution

Using the anchor link:

<p>This book's <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>

Discussion

Along with the img element (see Adding an Image), some browsers display a tool tip if a title attribute and value are present within the anchor link, as shown in Figure 1-12:

<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>
A tool tip displayed over a link

Figure 1-12. A tool tip displayed over a link

Linking to another web page on the same site

When you are creating links within the same site, use relative links instead of anchor links. Relative links are addresses that are valid only if you are visiting from certain web pages.

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:

  • httpdocs/

    • index.html

    • aboutus.html

    • contactus.html

    • services.html

Sample directory structure

Figure 1-13. Sample directory structure

Including everything that is needed to point a web browser to a location in a link means that you created an absolute link, which looks like this:

<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 href attribute:

<a href="services.html">Services Page</a>

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.

Moving up folders

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:

  • products/

    • widget/

      • specs/

        • specs.html

To provide a link to the main widget page from the technical specs page, use ../ to tell the browser to go up to the parent directory:

<a href="../widget.html">Widget Page</a>

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:

<a href="../../products.html">Product Page</a>

Using the root relative link

The process for using relative links to move between the folders of a large website can sometimes be tricky, if not convoluted. Another type of link to use in such a case is a root relative link.

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:

<a href="/products/products.html">Product Page</a>

The forward slash signifies the protocol and domain name of the URI, a sort of shorthand for links.

Linking to certain elements within a web page

You can also link to certain elements within an HTML document by creating anchors. You can create an anchor by assigning an id attribute to an HTML element:

<h2 id="hireme">Hire Me</h2>

Then, link to that anchor by prefacing the id name with a hash symbol (#):

<a href="#hireme">Hire Me</a>

When clicked, the browser navigates to the part of the document that has the corresponding id name.

Note

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.

See Also

Chapter 7 on links and navigation

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required