Lesson Overview

Links are a huge part of the World Wide Web: After all, the WWW was originally developed as a source of hypertext documents that could be viewable by anyone, that would allow anyone to navigate from document to document by clicking links. You learned the basics of links in the HTML Basics lesson. This lesson explores the finer points of hyperlinks and the <a> element: how to create special types of links that use a phone app or email client, how to create internal links within a document, and how to automatically open a linked document in a new tab or window.

If you're just starting this lesson, ignore this paragraph: it's used for the demonstration on internal links (jump links). To return back to the demonstration you can click this internal link.

Special Types of Links

You can create links to things other than web pages and files! For example, you can create links that automatically open up the user's phone or email app by using a special prefix instead of the http:// or https:// protocol.

Email Links: mailto:
Prefix your href value with "mailto:" and then add an email address. This creates a link that will open the user's default email program and create a new message to the email address in the link.
Example:
<a href="mailto:notta@real.address.ca">Email Notta</a>
Appears as Email Notta
Telephone Links: tel:
Prefix your href value with "tel:" and then a telephone number to create a link that will open the user's default phone application with the telephone number specified.
Example:
<a href="tel:+1905-555-1234">905-555-1234</a>
Appears as 905-555-1234

Jump Links (aka Internal Links)

Jump Links or Internal Links allow you to create links to specific locations inside a longer document. These links can be created within a page or from another page. For example, at the end of each lesson section is a horizontal menu with internal links to each section of this lesson.

<nav>
  <a href="#top">Top</a>
  <a href="#over">Overview</a>
  <a href="#eltypes">Block/Inline</a>
  <a href="#semant">Semantic</a>
  <span>Basic</span>
  <a href="#absVsRel">Paths</a>
</nav>
The code for the internal links found on this page.

Notice that the internal links are using a different kind of URL from the ones we've discussed so far: they start with the # symbol. The # symbol indicates that the link is for a specific location inside the current document.

As an example, I've created this internal link that takes you to a spot in the Overview section of the lesson. If you click it, you'll find a link that takes you back to this spot in the lesson.

To create internal links or jump links you need to do two things:

  1. Create an ID at the location you want to jump to.
  2. Create the link that jumps to the location in step 1.

1. Create an ID

First, decide where in the document you want your link to jump. Usually this is the main container for the area of the page you want to jump to, or the first heading inside that container, but you could also jump to any other element. Whatever element you choose will appear at the top of the viewport (viewing area of the browser) when the link is clicked, so make sure your location is user-friendly and makes sense.

Once you've chosen the jump location, Add the id attribute. The value in the id must be unique to the current page - you only use an ID value once in a single page. For example, the Overview section is one area I've created an internal link to in the navigation at the end of each lesson section:

<article id="over">
  ... all the content of the Lesson Overview section....
</article>

I also had to create an ID for the location to jump back to in the lesson:

<p id="#jump-demo-return">As an example, ... </p>

2. Create the Jump Link

The next step is to create the jump link. You use the regular anchor (<a>) element, but for the href attribute, you put the id value you want to jump to. Instead of using an absolute or relative URL, use the id value, but prefix it with a # (number sign) symbol. For example, the earlier demonstration that jumped to the Overview section and back used the link:

I've created <a href="#jump-demo">this internal link</a> that
  takes you to a spot in the Overview section of the lesson

In fact, that entire demo was coded as:

<!-- in the Overview section: -->
<p id="#jump-demo">If you're just starting this lesson, 
  ignore this paragraph: it's used for the demonstration on
  internal links (jump links). To return back to the demonstration
  <a href="#jump-demo-return">you can click this internal link</a>.
</p>
<!-- In the demonstration of internal links: -->
  <p id="#jump-demo-return">As an example, I've created 
  <a href="#jump-demo">this internal link</a> that
  takes you to a spot in the Overview section of the lesson. 
  If you click it, you'll find a link that takes you back to 
  this spot in the lesson.
</p>
The code for the internal links demo.

You can also link to parts of a document from another document. For example, if I wanted to link to the Overview section of the Regular Expressions lesson in my Java tutorial, I'd use the following:

<a href="../java/validationRegex.html#over">Overivew of the 
Regular Expressions Lesson</a>

Exercise

Create a project directory for this exercise and add an index.html page. In your index page, add several paragraphs of dummy text in different <section> elements. Don't forget to add an appropriate heading to each section.

Add a unique ID to each section element.

Create a navigation element at the top of your page that contains internal links to each document section.

At the bottom of each section, add a link back to the top of the page.

Link Targets

A browsing context refers to the place where you're viewing a web document or application. For example, a specific browser tab/window. In most modern browsers, you can have several browsing contexts open at any time; in other words, you can have several tabs and/or windows open in your browser with a different page or application in each one (or the same, if you're like me and often have so many tabs open, you forget what pages you have open :D )

When you code a link element, you can optionally specify which browsing context you want the page/application to open in by using the target attribute. For example, you can specify that the link open in a new tab, a specific tab, or even the current tab. The target attribute can accept one of the following browsing contexts as a value:

Exercise

Create a new project and add an index page with the minimal HTML. Add a navigation element with five links: add two links to your other exercises and 3 links to other web sites of your choice. Code the links so that the links to your own exercises each open in a brand new tab, and the external links open into the same named browsing context (you can choose an appropriate name).