Hyperlinks

Section 1: Hypermedia

Recall that in previous notes we explained that hypertext (or hypermedia) enables you to read and navigate text and visual information in a nonlinear way by clicking links, or hyperlinks, within a web page.

Links are the most important element in HTML.
Without the ability to link from one document to another, the Web wouldn't be the Web.
The "H" in "HTML" stands for hypertext, but becomes meaningless without the concept of linked documents.
Links are the thread that binds the tapestry of the Web together.

Section 2: More on the Anchor Tag <a>

We first encountered the anchor tag (<a>) in the HTML Basics notes (click to expand "Links").

Attributes

The anchor element supports the following optional attributes (among others):

href: a URL that defines the destination of the hyperlink. This can be a relative URL, an absolute URL, or a fragment identifier.
id: assigns an id for the section anchored by the <a> tag.
target: a name or keyword that is the browsing context that a browser should use when following the hyperlink. Typical values are "_blank", "_self", "_parent", or "_top". More on this in Section 4.
media: defines the media for which the linked document was designed (Explanation of the HTML <a> media Attribute).
The title attribute is a global attribute (meaning that it can be used on any HTML element) that provides a description or other information for an HTML element, such as a description of the target resource for a hypertext link.
- Many web browsers take the text in the title attribute and display it in a pop-up tool tip when the mouse is held over content with a title.
- Hover over the preceding link for an example.
Here is a link to an Anchor Tag (Link) Generator

Image Links

We mentioned that the words between the open and close of the anchor tag will be displayed as a link. However, an anchor tag can also surround an image rather than just text.

In that case, the entire image becomes a link.
Example code:
<a href="http://www.isu.edu/"><img src="images/wordmark-black.png"></a>
Example:

Content Model (reference only)

In previous versions of HTML, the anchor element's content model restricted its content to phrasing (or "inline") content, but HTML5 expands the anchor's content model to allow for the inclusion of flow (or "block") content.

Links are one of a handful of HTML elements that have what's known as a "transparent content model."
- This means that, depending on context, the element can contain phrasing content or flow content.
- If the anchor is a child of any element (such as a span) that can only contain phrasing content , then the anchor too can only contain phrasing content.
  - This is the traditional, pre-HTML5 interpretation of the anchor element (described in previous versions of HTML as being "inline").
- On the other hand, if the anchor is a child of any element that can contain flow content (such as a div), it too can contain flow content.
  - In this context, the anchor is what's commonly referred to as a "block-level link."
- Read more about "Block-level" links in HTML5.

Section 3: Base tag (reference only)

The <base> tag is related to URLs.

You might recall that a browser resolves relative paths based on the location of the current document.
You can change this behavior by using the base element to specify a different starting location for all relative paths.
The base element has the syntax
<base href="path" >
...where path is the folder that you want the browser to use when resolving relative paths in the current document.
The base is useful when moving a single document to a new folder.
- Rather than rewriting all of the relative paths in the file to reflect the document's new location, the base element redirects browsers to the document's old location (where the other files still reside), allowing any relative paths to be resolved as they were before.
Rules for using the base tag:
- The HTML5 <base> tag has to be utilized as the first element in the HTML5 <head> element.
- It is essential that the HTML5 <base> tag be used only once.
- Include at least an href attribute or a target= attribute, possibly both, within the <base> tag.
- The value of the href attribute, which is enclosed in double quotes, is the base URL for other URLs in the document, which otherwise would default to the actual location of the document.
- The target attribute will be covered in the Target section.
- Since the base element is a void element, it should always be coded as a self-closing tag terminated with the delimiter string >.
- You can find some examples in the Html5 Base Tag tutorial.

Section 4: Target

The target attribute specifies where to open a linked document.

Value	Description
_self	Load the response into the same HTML5 browsing context (tab or window) as the current one. This value is the default if the attribute is not specified.
_blank	Load the response into a new unnamed HTML5 browsing context.
_parent	Load the response into the HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
_top	Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.

Example:

<a href="http://www.isu.edu" target="_blank">Idaho State University</a>

If you set the target attribute to open a link in a new frame or window, the HTML5 specs recommend that you associate information with the link indicating that the link will open in a new window.

The title attribute is a likely candidate for this task.
Here is an example: Parker's Classes

And the code:

<a href="../../../index.htm" target="_blank"
title="This link opens a new tab or window.">Parker's Classes</a>

Recall the base tag that we mentioned earlier.

The base tag also makes it possible to specify a value for the target attribute, which in turn specifies the target frame for links on the entire page.
Example:
<head>
<base target="_blank" >
</head>

Section 5: Bookmarks

Internal links, or bookmarks, can be used to link to different parts of a single page.

Bookmarks are used throughout these notes in conjunction with the popup index.
Go to the first line in section 2, and hover over the link to see an example of a bookmark in the status bar at the bottom of the browser window.

Internal links are also called "intrapage links".

The prefix "intra" means within, so an intrapage link is a link within one Web page.

Intrapage links are often used in long documents that are divided into sections.

Here is an example that I set up for a former student.

You can set up a bookmark in a page by going to the point at which you want the bookmark and inserting an id.

You can assign an id to almost any tag positioned near the beginning of your section. (In older versions of HTML you could only use the anchor tag with the name attribute, but now bookmarks are created by associating an id with any tag.)

For example, if you have a section called 'Products' and you want to bookmark it, code would look like the following:
<h3 id="Products">Product List</h3>
To link to that specific section of the page, you need to use the <a> tag, but you use the pound sign (#) followed by the name that you gave the section.
<a href="#Products">Link to Products</a>

You can use internal links to access various portions of the same document (as with an index), or you can link to a specific point within an external web page.

Later in these notes there appears a link to the original CSS notes, but rather than linking to the beginning of the notes, we want to link to the section about pseudo-classes.
- In order to do so, the href attribute refers to the web page address, followed by a # and then the name of the id.
- Here is an example:
  <a href="css3.htm#Pseudo_Classes">Pseudo classes</a>

As noted above, the original purpose of the anchor tag was to act as an anchor, or internal link within a page (using <a name="bookmark">), but that functionality has been replaced by the id attribute, with the name attribute now being deprecated (except in forms with a PHP handler).

Section 6: Kinds of URLs (reference only)

The are various link types in HTML5, but we're going to focus on URI schemes.

Uniform resource locator (URL) protocols provide a means for locating and accessing resources that are available on the Internet and on intranets.
Plug-ins can request and receive the data associated with URLs of any type that the browser can handle, including HTTP, FTP, news, mailto, etc.
Here is one list of protocols.

email Links

An email link would require the following code:

<a href="mailto:youremailaddress">Email Me</a>

If you wish to have a specific subject in the email, you can add it to the html code using subject= setting :

<a href="mailto:email@echoecho.com?subject=Urgent">
Send Email</a>

Suppose you want an email link for your visitors containing specific text in the body of their message, simply add ?body=:

<a href="mailto:email@echoecho.com?body=Please send me my exam results!">Send Email</a>

Or combine all the options and allow your visitor to send email with the address, subject and text already entered. Notice the &.

<a href="mailto:parkerkr@isu.edu?subject=Urgent!
&body=Please send me my exam results!">Email Me</a>

PDF Links

You can link to a PDF document from an HTML document.

<a href="downloads/cisBrochure.pdf">Click to open the CIS Brochure</a>

This only works when the HTML document is served by a web server. It will not work from a local drive.
You cannot link to bookmarks within a PDF. You can link to named destinations, however. (Link to bookmarks in a PDF)
When a user clicks the link on the HTML page, the PDF document opens. The document can fill an entire browser window or launch a PDF viewer as a helper application, depending on how users have configured their Web browsers.
More details can be found in Link to PDFs from HTML.

Non-HTML Files that Open in the Browser

There are some files besides PDFs that can be linked to a web page but that are not HTML files. As with PDFs, many browsers have plugins that can handle them.

One typical example is an image file. Try it. The code looks like this:
<a href="downloads/BSU_fries.jpg">Try it</a>
It also works with text files: Try it.
And it works with several other file types, such as XML files.

Non-HTML Files that Do Not Open in the Browser

To create a link to a file the browser can't display, but rather can be downloaded, simply indicate the filename including the appropriate extension in the href attribute.

Common formats available for download are .zip, .exe, .docx, .pptx, etc.
In such cases, the user can generally either save the file or open it using its associated application.
To save a file without having the browser first display an "opening" dialog, right-click on the link and choose Save Link As or the equivalent and navigate to where you want to save the file on your local disk.
Try it. Here is the code.
<a href="downloads/bsuFries.docx">Try it.</a>

Other types of sites

You can also link to FTP sites, telnet sites, Usenet news sites, etc.

FTP

File Transfer Protocol (FTP) is a file-sharing protocol for downloading and uploading files using the Internet

Creating an FTP link to a remote site requires changing http: to ftp:.

Here is an example:

<p>Click to access
<a href="ftp://ftp.cableone.net/">CableOne's FTP site</a>
.</p>

Telnet

Telnet is a protocol for connecting to a remote computer and a TCP/IP service and enables a client computer to control a server.

For users to access a Telnet link, they must have software installed on their computer and their browser must be configured to open the software when the link is accessed.

Creating a Telnet link to a remote site requires changing http: to telnet:, and changing the href to the hostname.

<p>Click <a href="telnet://locis.loc.gov">here</a> to visit the Library of Congress.</p>

UseNet

Usenet is a worldwide network of commercial grade servers where members post and download files and messages to more than 100,000 themed discussion groups called "newsgroups".

Usenet has diminished in importance with respect to Internet forums, blogs and mailing lists.
A news reader is required before users can access Usenet links.
Example code:
<a href="news://news.mozilla.org/mozilla.support.firefox">Firefox Support<a>

Links about "Special" Links

Section 7: Pseudo Classes (reference only)

There are special CSS pseudo classes that apply particularly well to links.

Pseudo classes are discussed in the intermediate CSS notes under Additional Selector Forms.

Here are a few additional excellent links:

Section 8: Image Maps

Images maps, or hotspots, are really cool, but we'll defer them until a future lecture.

An image map is an image with multiple "clickable" areas. Here are some examples in case you're not familiar with the term:

Section 9: Q&A

Question:

When I have two attributes in an element, is the order important? For example, should the title attribute always come after the href?

Answer:

The order of attributes is not important in any element. Some editors put them in alphabetical order, but you can use any ordering you like.

Question:

I thought the id attribute was used for CSS ids. Now we're using it to create bookmarks. I'm confused.

Answer:

The id attribute can serve double duty. It can provide an id for a CSS id Selector, and it can be used as a bookmark. In fact, a single id associated with a tag can do both!

Question:

Okay, so I can associate an id with any tag, even with an <a> tag. But if I include an id with an <a> tag and leave out the href attribute, the text isn't underlined. Is my browser defective?

Answer:

Only if you're using Internet Explorer! Bwaa haa ha! Sorry, just a bit of developer humor.

An <a> element is only underlined if the href attribute is present, making it a hyperlink. The id attribute by itself has no effect on the look of any element, not even on the look of the text an <a> element surrounds.

Remember, an id attribute can be used with any tag to mark a location within a page, It does not create a hyperlink, so there isn't any need to display it visually.

Question:

Why is it called an anchor? What's anchor-like about it?

Answer:

The best we can come up with is that originally the <a> tag could be used to create a destination anchor in a page, but since those are generally referred to as bookmarks or some other name we're just going to say it like it is: "anchor" was a bad choice of names and has confused tens of thousands before you, if not millions. Basically we're all stuck with the name. But now that you do know what it does, before long you won't even give the name a second thought. I hope.

Question:

I noticed in some examples the id values are all lowercase letters. Does it matter?

Answer:

When you are naming your own ids you can use any combination of upper- and lowercase characters. Just make sure you are consistent and always use the same upper- and lowercase letters in your hrefs and destination anchor id. If you aren't consistent, don't expect your links to work correctly on every browser.

Question:

Wait, so does that mean that case makes a difference, or doesn't it?

Answer:

It can make a difference in the href values for your tags. It's easier to explain using an example. If you have a file named "Foo.htm" and you are hosted on a Windows server, you can link to that file as FOO.HTM, or FoO.htm, or foo.HTM, or whatever. However, if the file is hosted on a unix-based server you can only link to it as "Foo.htm". *nix servers are case sensitive. That's why the normal recommendation is to not use spaces or punctuation (other than hyphen and underscore).

Question:

Can I put a link to a destination anchor from within the same document?

Answer:

Ah ha! You weren't paying attention! That's what the section about bookmarks is all about. Destination anchor is another name for bookmarks. It is common to define a destination anchor "top" at the top of a page and have a link at the bottom of the page saying "Back to top". It is also common in long documents to have a table of contents for the entire page. For instance, to link to the "top" destination anchor in the same page, you would write <a href="#top">Back to top</a>.

Question:

If a Web page doesn't provide a destination anchor and I still need to link to a specific part of the page, how can I?

Answer:

You can't. If there is no destination anchor then you can't direct the browser to go to a specific location in a Web page. You might try to contact the page author and ask them to add one (even better, tell them how!) but don't expect it to be a priority.

Question:

Can I have a destination anchor id like "Jedi Mindtrick" or does an id have to be only one word?

Answer:

To work consistently with the most browsers, always start your id with a letter (A-Z or a-z) and follow it with any letter, digit, hyphen, underscore, colon, or period. So, since you can't use a space, you can't have a name like "Jedi Mindtrick"; but that isn't much of a restriction because you can always have "Jedi-Mindtrick", "Jedi_Mindtrick", 'JediMindtrick", and so on.

Question:

How can I tell others what destination anchors they can link to?

Answer:

There is no established way of doing this, and in fact, "View Page Source" remains the oldest and best technique for discovering the destination anchors you can link to.