Screen Printing

TUTORIALS » HTML / JavaScript » HTML essentials (guided tutorials)

Links in HTML

Page 2 of 4


You are in page:
» 2. Absolute and relative paths

Absolute paths

Sometimes you will want to link to other files inside your server but in different folders. Let's say your .html file is in the root folder, and your server's domain name is www.myserver.com. If you want to create a link to a file named second.html that is placed inside a subfolder named myfolder you could use an absolute path in your href parameter.

It would look something like:
<a href="http://www.myserver.com/myfolder/second.html">Click here</a>
So no matter where your source file is, you are being very specific on where the target is; you are telling the server name, the folder, and the file you are pointing to.

Again, this is called an absolute path.

Absolute paths are a very safe way to point links to other files, but they can also be too long and annoying to write.

Relative paths

When the source and destination files are in the same domain, you can set the destination of a link in relation to the location of the source file. You can do it in three ways.
  1. Starting from the root folder – using a leading slash. If you start your href path with a slash, the path will be based on the root folder of the web server.

    Example using the domain name www.myserver.com:
    <a href="/album.html">Click here</a>
    <a href="/images/personal/vacations.jpg">Family picture</a>
    In the example above, regardless of where the source file is located inside the server, the links will point to:
       http://www.myserver.com/album.html
    and
       http://www.myserver.com/images/personal/vacations.jpg
    respectively.

  2. Starting from the folder where the source file is located – without leading slash. If you omit the leading slash from the href path, the destination folder/file will be set in relation to the location of the source file.

    Take a look at the example, assuming your file is located at http://www.myserver.com/john/
    <a href="album.html">Click here</a>
    <a href="images/personal/vacations.jpg">Family picture</a>
    Since the source file is inside the folder /john/, the links will point to:
       http://www.myserver.com/john/album.html
    and
       http://www.myserver.com/john/images/personal/vacations.jpg

  3. Going up one level – two leading dots and a slash. Two dots and a slash at the beginning of a href path mean "Go up one level".

    So, the example starting from www.myserver.com/john/misc/ is:
    <a href="../music.html">My music</a>
    <a href="../images/classmates.jpg">My buddies</a>
    will point to:
       http://www.myserver.com/john/music.html
    and
       http://www.myserver.com/john/images/classmates.jpg

  1. Create a new .html file and name it first.html.
  2. Create a new folder and name it myfolder, in the SAME folder where first.html is located.
  3. INSIDE myfolder crate a new .html file and name it second.html.
  4. Edit first.html and write:
    <h1>First</h1>
    Click <a href="myfolder/second.html">here</a>
  5. Edit second.html and write:
    <h1>Second</h1>
    Click <a href="../first.html">here</a>
  6. Preview first.html in your web browser and click follow the links.
Notice, in your browser's address bar, how you are changing in-and-out of the subfolder every time you click on the links.

You now know how to point your links to other files and folders inside your site without having to write the whole (absolute) path.


Now, let's go to the next page and learn about a very useful feature called anchors.

More pages of this tutorial → Links in HTML  <1234>

Comments & Questions