Chapter 6
Listing 6-4. A sample site structure
http://example.com/index.html
http://example.com/about.html
http://example.com/links.html
http://example.com/contact.html
Creating a link from one page to another in this example is as easy as setting the link's href attribute to
the file name of the page to which you're linking (see Listing 6-5).
Listing 6-5. An anchor element with a relative URL
This example site structure works great for smaller websites. Assume, though, that you are tasked with
creating a much larger website. For this larger web project, you may want to organize your pages in a
series of folders. Using that approach, you might organize your pages in a fashion similar to that shown in
Listing 6-6.
Listing 6-6. A sample site structure
http://example.com/index.html
http://example.com/about/index.html
http://example.com/about/history.html
http://example.com/links/index.html
http://example.com/links/archive.html
Let’s say you want to add a link from the “links” folder’s “index.html” page to the “about” folder’s
“history.html” page. To accomplish this, you would create a link like that shown in Listing 6-7.
Listing 6-7. An anchor element with a relative URL
Including the “../”characters at the beginning of the relative URL indicates to the browser that it should
first navigate up a single directory. After that, the browser is instructed to navigate into the "about" folder
and find the file named "history.html." It is possible to chain together several “../” characters; each
occurrence will instruct the browser to navigate up another folder within the structure of your website.
Fragment identifiers are the third type of link that you can use with the href attribute. In the context of a
web page, a fragment identifier is a specialized reference to a portion of a page. They are placed at the
end of URLs preceded by a hash symbol, as shown in Listing 6-8.
Listing 6-8. A URL with a fragment identifier
http://example.com/about.html#products
The string "products" that appears after the hash symbol directly correlates to an element on the team.html
page that has an id attribute with the value "products." The browser recognizes the fragment identifier in
the URL and automatically scrolls the page to bring the linked portion into view. You've likely seen
fragment identifiers in action if you've ever clicked a "read more" link on a news article.