HTML Paths Explained: Tutorial and Diagrams

The following is a diagrammed discussion of the structure and syntax of link paths in HTML code. Excerpted from Interactive InDesign CC, chapter 24.

Paths: Relatively Speaking

Tracing a path from one document to another often requires jumping in and out of multiple folders.

file hierarchy

A hierarchy of files and folders that a link may be required to navigate

Based on the file hierarchy in the above figure, the path to display the mi_logo.gif image in the index.html page would look like this:

<img src="images/logo.gif">

The / after the images folder name indicates that the link from the index page must jump inside the images folder to locate the logo file.

Path to image

Link path from logo.gif to index.html

If the linked file were located inside a hierarchy of folders, the name of each nested folder would be separated by a forward slash like this:

images/logos/adobe/indesign_logo.gif

File hierarchy

The path above indicates that it’s necessary to jump into a folder called “images”  then into a folder named “logos,” and finally into a folder called “adobe” in order to link to the image file called indesign_logo.gif.

Use ../ in a path when it’s necessary to jump out of a folder to get to another file. Continuing with the same example file hierarchy, the code for the path that would make the  indesign_icon.gif image appear in the indesign.html document would look like this:

<img src="../images/indesign_icon.gif">

Path to an image file

The path from indesign.html to the indesign_logo.gif image file would have to jump out of the class_descriptions folder and into the images folder

A link from indesign.html to index.html would have to jump out of the class_descriptions folder to reach the index page. With the word “home” appearing as hypertext on the page, the anchor tag would look like this:

<a href="../index.html">home</a>

link_paths5

The link path from indesign.html to index.html

To turn the mi_logo.gif image in the indesign.html document into a link to the index.html page, the anchor tag for the link would have to wrap around the image tag and the HTML would look like this:

<a href="../index.html"><img src="../images/mi_logo.gif" alt="Mira Images logo" /></a>

link_paths6

A link on the mi_logo.gif image in indesign.html to the index.html page

In contrast, a link on indesign_icon.gif from index.html page to indesign.html would look like this:

<a href="class_descriptions/indesign.html">
<img src="images/indesign_icon.gif" alt="InDesign icon" />
</a>

link_paths7

A link on the indesign_icon.gif image in index.html to indesign.html

For long, scrolling document pages, it’s often helpful to provide a link from the bottom of the page back to the top. To link within an HTML document, you must first create a destination anchor. Destinations can be created in one of two ways. You can create a code anchor on the page that has no visible appearance like this:

<a name="top" id="top"></a>

Or, you can assign an ID to an existing element on the page which you could then target as a destination:

<p id="top">This paragraph is named top</p>

The reference to  an internal anchor is indicated by a # sign and looks like this:

<a href="#top">This is a link to the anchor named top</a>