Links – Web Scripting

Below we discuss hyperlinks. For more information, please consult Mozilla’s terrific documentation on links.

Hyperlinks are a staple for developing interactive web pages. This tutorial discusses how to use links to:

navigate to another web page
navigate to a particular element of the current or another web page

Hyperlinks are created using the inline anchor (<a>) element. The href attribute of the anchor element specifies a URL to a resource that is opened when the content (e.g. text) that is between the opening and closing anchor tags is clicked.

For example:

<a href="https://protonmail.com">Proton Mail</a>

produces the following link: Proton Mail

The title Attribute

The title attribute’s value contains text that is displayed as a tooltip when the cursor hovers over the link.

<a href="https://protonmail.com" title="Secure Email">Proton Mail</a>

The code above produces the following link: Proton Mail

The href Attribute

The href attribute must contain one of the following:

the absolute path to a resource
a relative path to a resource
a path to an element on the current page or some other page
a request to create an email with the users default email client

An absolute path must include the protocol and domain name as shown in the example above. Absolute paths must be used to link to resources on other domains.

A relative path can be used to specify the path to a resource on the same domain for which the HTML page containing the link is located. The path is relative to the location of the web page containing the link. Suppose, for example, a web site has the following files:

.../index.html                    
.../csci240/index.html
.../csci240/structured_text.html
.../csci240/images/cartoon.png

The following are anchors elements assumed to be in .../csci240/index.html.

<!-- Link to a file in the parent directory -->
<a href="../index.html">Home</a>

<!-- Link to a file in the same directory -->
<a href="structured_text.html">A3 - Structured Text</a>

<!-- Link to a file in a sub-directory -->
<a href="images/cartoon.png">xkcd cartoon</a>

When linking to a web page, we can request the browser scroll to a particular element in the web page. In order to do so, the element must have an id attribute set. The href attribute in the anchor tag should then include, after the file name, a hash-mark (#) followed by the value of the id attribute of the element. Below are link examples that link to particular in a web page.

<a href="#top">Top of page</a>
<a href="#titleAttribute">Title Attribute Section</a>

The code above code produces the following links.

Top of page
Title Attribute Section

Note that the second link works because the H3 element in this page that is used for the heading The title Attribute contains an id attribute that is set to the string titleAttribute.

Anchor Content

We’ve seen above many examples that have text between the opening and closing anchor tags. The content between the opening and closing anchor tags can contain almost any HTML content (including block elements) making the entire content clickable. For example, to make an image clickable we use the following code.

<a href="https://xkcd.com/610/"><img src="https://imgs.xkcd.com/comics/sheeple.png"></a>

The code above produces the following HTML.