Hyperlinks in HTML

Hyperlinks are connections between two resources:

1. the current document
2. and some other resource the user can either navigate to or download

The HTML tag is <a> and it stands for anchor.

Contents

1. <a> Element
   1. href
   2. target
   3. download
2. Practical Considerations
3. Summary
4. Playing Around
5. References

<a> Element

As with most HTML tags, hyperlinks are written with a starting <a> and ending </a> tags. Contained between those tags is the content that will serve as a hyperlink. Normally, it is some text, however, it can be an image, or any other part of the document which can be contained between the start and end tags.

<a>This is a hyperlink</a>

While the example above is a hyperlink, it is non-functional because it does not link to another resource – it simply defines a link. To make a link functional, we need to add an attribute to the <a> tag that specifies the URL of the resource.
Using the anchor tag in this way indicates that it is a placeholder for a future hyperlink.

href

The href attribute stands for hyperlink reference and provides the resource URL:

<p>A safe website to use in examples is
  <a href="http://example.com">example.com</a>
</p>

The URL can be an absolute URL or a relative URL.
An absolute URL is the complete URL, e.g.:

• http://example.com
• https://complete-concrete-concise.com

A relative URL is a partial URL relative to the current document location. Relative paths follow the Unix / Linux convention:

• / – the root directory. This is the same as the domain. For example:

  <a href="/">Take me to the home page</a>

  will jump to the home page of the domain.

• . – the current path. The paths image.jpg and ./image.jpg both refer to the file image.jpg in the current directory. For example:

  <a href="./image.jpg">Click to load the image.</a>
  <a href="image.jpg">Click to load the image.</a>

  will both load the file image.jpg which is located in the same directory (location) as the .html file.

• .. – one level up. So ../img/image.jpg refers to the file image.jpg which is located in the img folder which can be accessed by going up one directory level. In other words, the current directory and the img directory are siblings. For example:

  <a href="../img/image.jpg">Click to load the image</a>

  will load the file image.jpg which is located in the folder img which can be accessed by going up one directory level.

You have seen that anchors can be used to navigate to another page or resource, however, they can also be used to navigate to locations in a document – the Table of Contents at the top of this article is an example.
To navigate to a portion of a document, you need two things:

1. an identifier in the document which identifies the location
2. a hyperlink to that identifier.

The identifier is an attribute you add to an opening HTML tag:

<p id="jump-here">Some text we can jump to.</p>

The id attribute value is jump-here and can be used as the value to the href attribute. However, there are a few provisos:

1. The id value must be unique. It is incorrect to have two ids with the same value in the document.
2. The id value must not contain spaces.
3. The id value must contain at least one character.
4. To be safe, use only:
   • letters
   • digits
   • underscores (_)
   • hyphens (-)
5. To be extra safe, ensure the id value begins with a letter or underscore (_)
6. The id value is case-insensitive, so, jump-here is the same as JUMP-HERE¹

To reference an internal id in a link, you need to preface the name with the pound sign (#):

<a href="#jump-here">Jump to interesting part</a>

We can put this all together and create a simple table of contents:

<h2>Table of Contents</h2>
<ol>
  <li><a href="#topic1">Topic 1</a></li>
  <li><a href="#topic2">Topic 2</a></li>
  <li><a href="#topic3">Topic 3</a></li>
  <li><a href="#topic4">Topic 4</a></li>
</ol>

<p>Just some padding text, for no other purpose than
  having some text.</p>

<h2 id="topic1">Topic 1</h2>

<p>It is nice for each section to have some content.
  It doesn't need to be long, just long enough.</p>

<h2 id="topic2">Topic 2</h2>

<p>The content in <strong>Topic 2</strong> should
not be the same as in <strong>Topic 1</strong>.</p>

<h2 id="topic3">Topic 3</h2>

<p>After a while, it gets hard to come up with new
content. This is why people use <i>lorem ipsum</i></p>

<h2 id="topic4">Topic 4</h2>

<p>Lorem ipsum dolor sit amet, eum invenire erroribus
  id. At solum tamquam voluptatum his. Id ius omnis
  labitur adipiscing, ut tollit discere deseruisse per.
  Ea accumsan reprimique concludaturque eam, ut sed
  suas consetetur. Cum imperdiet referrentur in. Usu
  postulant philosophia id.</p>

Notice that each topic header has a unique id value and to navigate to those ids, we prepend the pound symbol to the name in the href attribute.
You can also use anchors and ids to create footnotes:

<p>Sometimes, it is nice to be able to put
  <a id="fnref1" href="#fn1">footnotes</a> in your
  documents because the content doesn't really belong
  in the main flow of the document</p>
<p>To see the effect, you will need to copy the next
  few paragraphs a many times, so the footnote scrolls
  off the bottom of the page.</p>
<p>Lorem ipsum dolor sit amet, eum invenire erroribus
  id. At solum tamquam voluptatum his. Id ius omnis
  labitur adipiscing, ut tollit discere deseruisse per.
  Ea accumsan reprimique concludaturque eam, ut sed
  suas consetetur. Cum imperdiet referrentur in.
  Usu postulant philosophia id.</p>
<p>In mea sumo disputationi. Te pri quodsi laoreet.
  Etiam dicta an vis, nec et mnesarchum incorrupte
  constituam, facer mandamus sea ei. Sale assum no
  vel, id labores inciderint vix. Diam accusata
  appellantur cum te, mel ne ornatus eleifend
  adversarium.</p>
<h2>Footnotes</h2>
<p>----------</p>
<p id="fn1"><strong>1.</strong> This is a footnote and
  it has a link to return back to your location in the
  document.
  <a href="#fnref1">↩</a>
</p>

I didn’t do a traditional footnote with the little superscript² because we haven’t covered the tag yet. Nevertheless, you can see that it is possible to:

1. create a footnote (or just notes) section in your documents
2. jump or navigate to those sections
3. return to the location were the jump was made from.
4. add ids to anchor tags and navigate to them

You can also navigate to a specific location in any document by appending the id to the URL:

<a href="http://example.com/index.html#reference">
  Reference material
</a>

The code fragment above, creates a hyperlink which instructs the browser to load the document index.html from the domain example.com and to jump to the location on the page having an id with the value of reference.

target

By default, clicking on a hyperlink loads the resource into the current context (i.e. your current browser window or tab).
Setting the attribute target to “_blank” will cause the resource to open in a new window or tab:

<a href="http://example.com" target="_blank">Click to
  open in a new window or tab.</a>

download

Sometimes, you want a hyperlink to download a resource instead of loading it. This can be done using the download attribute:

<a href="http://example.com/file.zip" download="file.zip">
  Click to download.
</a>

The example above will prompt the user to download file.zip. If download has a value, it will be used as the default name for the resource being downloaded (the user can change it before downloading). If no value is given for download, the user will be prompted for a suitable filename. Obviously, if you are assigning a value to the download attribute, ensure it is a sensible filename.³

Practical Considerations

A good hyperlink is one that lets the user know exactly what they are going to get when they click on it. In other words, it should be informative.
Avoid vague or generic terms or phrases. For example, the following are not considered “good” hyperlinks:

<a href="http://example.com"> Click here!</a>

<a href="http://example.com"> Read more.</a>

<p>
  Get more information
  <a href="http://example.com"> here</a>.
</p>

Better hyperlinks would be:

<p> Download
  <a href="http://example.com">
    The Guide to Effective Links
  </a>
</p>

<p>There is so much to learn about the
  <a href="http://example.com">World Wide Web</a>
</p>

<p>
  <a href="http://example.com">Sign up</a>
  and become a member.
</p>

When people read, they tend to skim and notice the first few characters (about the length of 2 short words). If people can’t figure out what the hyperlink is about from the first 2 words, the text of the link is probably suboptimal.
You should also prefer nouns, objects, and concrete things over verbs. The title of a resource, generally, is the appropriate text for a hyperlink.
You can also put a hyperlink on an image:

<a href="big_image.jpg">
  <img src="thumbail.jpg">
</a>

(The example above assumes both images are in the same location as the HTML document.)
You would typically do this to minimize the image size in your document (this leads to faster download and a better user experience). If the user wants to see the full sized image, they can click on the image.
You might also do this if hyperlink text is not good enough. For example, the social media buttons you see on many websites are little images wrapped inside an HTML anchor:

<a href="facebook.com"><img src="fb_thumb.png"></a>

While you can create a link to open in a new window or tab (using target=“_blank”), remember that many people don’t appreciate new windows or tabs opening up without warning. So it is a good idea to warn people:

<p>
  Get a
  <a href="http://example.com" target="_blank">
    Free Sample
  </a>. (Opens in a new tab.)
</p>

Summary

• The <a> tag is used to create a hyperlink in your document.
• The hyperlink can be to various types of resources:
  • Documents on other websites
  • Documents on your website
  • Locations within your document
  • Other files or images
• To create a hyperlink to a part of your document, you need to add an id attribute to an HTML tag in that region and you reference the id by prefacing its value with a pound sign (#)
• The href attribute takes an absolute or relative URL to a resource.
• The target attribute allows you to specify the hyperlink should open in a new window or tab.
• The download attribute allows you to specify the resource should be downloaded.
• Pick meaningful text for hyperlinks. The user should be able to infer what the hyperlink resource is from just the first few characters (about the length of 2 short words).
• Images can be used as hyperlinks. This is commonly seen in social media icons.

Playing Around

The best way to learn is to play around with what you have learned.
Some webpage ideas are:

• update one of your previous webpages to include hyperlinks – for example, replace the images with a smaller “thumbnail” images and create hyperlinks to load the full sized image
• create a number of recipe pages and a main page that lists all the recipes and links to them. Put a return link on each recipe page back to the main page.
• if you are feeling extremely adventurous, create a “Choose Your Own Adventure” story. This is a type of story in which the reader reads a short piece of prose (usually 1-3 paragraphs) and has to choose an action at the end, this leads to another page, and so on.
• create a reference page for yourself. I am pretty sure this tutorial series is not the only resource you are using. Create a page that lists and links to your favourite resources.

References

1. <a> tag
2. href attribute
3. target attribute
4. download attribute
5. Effective Hyperlinks