We have seen that in an <a> element, the href attribute use used to give the destination of the link. This destination is a URL, but there is more to say about that, and we should have a look now.
URLs are also used to refer to images so they can be displayed on the page. The <img> tag is used to insert images into a page like this:
<p><img src="http://example.com/vacation.jpg" alt="My vacation" /></p>
The src attribute is used to give the URL of the image. The alt attribute gives alternate text: text that can be displayed in place of the image if it can't be loaded (because it can't be found on the server, or network problems, or any other reason). Both of these attributes should be specified and the tag is empty, since it just marks the place an image should go, but doesn't have any content.
Absolute URLs
The URLs that we have seen so far are absolute URLs. Absolute URLs contain a scheme, server, and path as described in the topic The Web and HTTP (but the path may be empty).
Absolute URLs can be used to locate a piece of content on the web with no other information or context.
Relative URLs
In HTML, you can also refer to content by giving its position relative to the page you're looking at. These relative URLs give information like “in the same folder, find the page nextpage.html” or “look in the folder images for the image selfie.jpg”.
In the same folder
The simplest relative URL is the one that specifies “look in the same folder”. To do that, you simply specify the filename:
<a href="nextpage.html">next page</a> <img src="happy.png" alt="happy face" />
The first line creates a link to the page nextpage.html in the same folder as the HTML page that contains that link. The second line references an image happy.png in the same folder.
The nice thing about relative URLs is that they will work between pages on your site, no matter where that site is. You can create a link <a href="menu.html"> that you want to take you back to your site's menu: it will work when you're editing the files on your computer and it will work after you have uploaded the site to a web server.
Into a folder
Referring to files in the same folder is straightforward enough, but you will often want to organize your files into a folder structure. Suppose we have organized our HTML and images into folders like this:
If we want to link from menu.html to about.html like the above: <a href="about.html">about me</a>.
But what if we want to link into a folder: link from menu.html to europe.html in the vacations folder. We can put code like this in our menu.html:
<a href="vacations/europe.html">European vacation</a>
What this means to the web browser is “start where the current file (menu.html) is; move into the vacations folder and find europe.html.” Note that the folder and file names are separated by a slash (/), not a backslash (\) or other character. Slash is the only character used to separate folders in URLs.
We can also move in multiple folder levels by giving each folder to enter. Again, if we were adding code to menu.html, we could link to or include the image eiffel.jpg like this:
<a href="vacations/pictures/eiffel.jpg">us at the Eiffel Tower</a> <img src="vacations/pictures/eiffel.jpg" alt="Eiffel Tower" />
These would create a link (first line: user clicks the words “us at the Eiffel Tower” to go to the image itself) and embed the image (second line: image appears on the menu.html page itself).
Remember that relative URLs depend on where the page itself is in the folder structure. If we wanted to do the same thing on the europe.html page, the code would be this since we start inside the vacations folder.
<a href="pictures/eiffel.jpg">us at the Eiffel Tower</a> <img src="pictures/eiffel.jpg" alt="Eiffel Tower" />
Up a level
The above lets us descend into folders, but we will also need to move up out of them. For example, if we're working on math.html and want to make a link back to the menu.
What we have to express to the browser is “move up out of this folder (courses) and find menu.html.” We can use the special folder name “..” to do this: the web browser will understand it as “move up a level”. A link to the menu one level up is expressed like this:
We can do the same thing to move up two levels. We could put this on<a href="../menu.html">back to the menu</a>
geog.html (inside both courses and last-semester):
<a href="../../menu.html">back to the menu</a>
This link will tell the browser to go up a level (out of last-semester), up again (out of courses), and find the file menu.html.
We can combine these to traverse the folder structure. Again, suppose we're working on geog.html. This would insert the image big-ben.jpg:
<img src="../../vacations/pictures/big-ben.jpg" alt="Big Ben in London" />
Summary
The rules of relative URLs may seem complicated at first, but remember that they will save you effort in the long term. All of these relative URLs will work when you're editing the site on your computer, and they will continue to work after you upload everything to a web server (as long as you keep the folder structure the same).
Case-Sensitivity
URLs are case sensitive. That means that the URL page.html is a different URL than Page.html or PAGE.HTML.
That means that the URLs you use must match your files. This can be difficult since both Windows and Mac computer are case insensitive: the file names page.html and Page.html are considered to be the same.
That means that if you use the HTML <a href="page.html"> to refer to a file you have named Page.html, then it will work on your computer but not on a web server. Make sure your URLs and filenames match (probably by using lowercase everywhere).