There's more than one kind of address when programming in HTML5 and CSS3. You’re probably familiar with absolute references, used for links to outside pages. Another kind of reference — a relative reference — links multiple pages inside your own website.
Absolute references
The type of link used in basicLinks.html is an absolute reference. Absolute references always begin with the protocol name. An absolute reference is the complete address to a web page, just as you'd use in the browser's address bar. Absolute references are used to refer to a site somewhere else on the Internet.
Even if your website moves (say, from your desktop machine to a web server somewhere on the Internet), all the absolute references will work fine because they don't rely on the current page's position for any information.
Relative references
Relative references are used when your website includes more than one page. You might choose to have several pages and a link mechanism for moving among them.
The page isn't so interesting on its own, but it isn't meant to stand alone. When you click one of the links, you go to a brand-new page. Here’s what happens when you click the market link.
The market page is pretty simple, but it also contains a link back to the initial page. Most websites aren't single pages at all, but an interconnected web of pages. The relative reference is very useful when you have a set of pages with interlacing links.
The code for pigs.html shows how relative references work:
<!DOCTYPE html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <title>pigs.html</title> </head> <body> <h1>Destinations of Porcine Mammals</h1> <ul> <li>This little pig went to <a href = "market.html">market</a></li> <li>This little pig stayed <a href = "home.html">home</a>.</li> <li>This little pig had <a href = "roastBeef.html">roast beef</a></li> <li>This little pig had <a href = "none.html">none</a>.</li> <li>This little pig went <a href = "wee.html">'wee wee wee'</a> all the way home.</li> </ul> </body> </html>
Most of the code is completely familiar. The only thing surprising is what's not there. Take a closer look at one of the links:
<a href = "market.html">home</a>.</li>
There's no protocol (the part) and no address at all, just a filename. This is a relative reference. Relative references work by assuming the address of the current page. When the user clicks , the browser sees no protocol, so it assumes that market.html is in the same directory on the same server as .
Relative references work like directions. For example, if you're in a lab and ask where the water fountain is, someone might say, “Go out into the hallway, turn left, and turn left again at the end of the next hallway.” Those directions get you to the water fountain if you start in the right place. If you're somewhere else and you follow these directions, you won’t find the water fountain.
Relative references work well when you have a bunch of interconnected web pages. If you create a lot of pages about the same topic and put them in the same directory, you can use relative references between the pages. If you decide to move your pages to another server, all the links still work correctly.
It's often most convenient to create and modify your pages on the local machine and then ship them to the web server for the world to see. If you use relative references, it's easy to move a group of pages together and know the links will still work.
If you're referring to a page on somebody else's site, you have to use an absolute reference. If you're linking to another page on your site, you typically use a relative reference.