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
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.
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:
HTML (if you click that link to try it out, make sure
you then press your browser's BACK button to return back here!)
This page you're reading now is in the directory
How would I create a hypertext link on this page with the text
"Intro to CSS" to the https://terminallearning.com/basic/fonts.html
page using a relative URL?
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.
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.
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
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:
Create an ID at the location you want to jump to.
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:
... all the content of the Lesson Overview section....
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:
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>
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
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.
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
_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
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.
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).