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.

Hyperlinks (Anchor Element)

You learned briefly about links in the less on HTML Basics: A hyperlink, or just "link", is created with the anchor element <a> Be careful though: there's an element <link> that has nothing to do with hyperlinks. That can be confusing when you're asked to "create a link" - many students forget that they should use the <a> element for links.

Here's a quick review of what we learned about the anchor <a> element so far:

• The text that is clickable goes inside the opening <a> and closing </a> tags.
• The href attribute (which is short for "hypertext reference") contains the resource that should be requested when the link is clicked.
• The href attribute can accept an absolute or relative URL.
• Example: <a href="https://terminallearning.com/devHtml/index.html">Learn HTML</a> creates a link that goes to the main page of the HTML tutorials. It produces the following: Learn HTML (if you click that link to try it out, make sure you then press your browser's BACK button to return back here!)

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>

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 (your target). Usually this is the main container for the area of the page you want to jump to. You should choose a document structure element (e.g. article, section, etc) if possible. For example, it's better to jump to an article or section instead of the article or section's heading. 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>

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>

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:

• _self - this is the default behaviour. A link with target="_self" loads into the requested page into the same browsing context as the page in which the link resides (e.g. if you are in a tab and click a link, the page linked to will load in the current tab).
• _blank - the linked page will load inside a new browsing context (e.g. a new tab or window - by default most modern browsers will open a new tab, but a user might have disabled this ability, in which case the link will open in a new window, instead).
  • When you use _blank, you should also include the attribute rel="noopener" to avoid a vulnerability that older browsers have when opening untrusted links in a new browsing context (for more information you can read About rel="noopener"
• _parent - if you have a page embedded within another (e.g via an <iframe> element), the current document is considered the parent of the embedded document, so if you click a link in the embedded document with _parent as the target, the linked page will load in the main document's context. If there is no parent, then this behaves like _self.
• _top - load the linked page into the top-level browsing context (used when you have several embedded documents). If there is no parent, then this behaves like _self. Note that this is not the same as a link with href="#top".
• A named browsing context - you can make up your own name to create a named browsing context.
  • Just make up a name you'd like to call your new tab or window. For example, when I code links to pages that aren't on TerminalLearning, I use the name "extref" (short for external reference).
  • Use your custom name in the target attribute. For example, my links to non-TerminalLearning pages have target="extref".
  • The first time your browser sees the named browsing context, it will open a new tab or window and assign that new tab/window the custom name.
  • The second and subsequent times you click links with the same named browsing context, they will open in that exact same named tab/window.
  • This provides a nice way to allow people to open several links without opening up too many tabs/windows (each tab/window takes up a lot of memory, so too many will slow down you computer or even crash your browser). I do this with the external links in the tutorials so you don't have too many tabs/windows open - you've probably noticed this by now.