Introduction to HTML5 (Part 2)

Introduction to HTML5 Part 2 of 2

1. Building Links

The hyperlink (commonly referred to as a "link" is the centerpiece of navigation on the internet.

The link is built using the anchor element and then declaring the following values:

  • href - destination of the link
    • May contain absolute or relative destination (discussed below)
  • title - tooltip text of the link
    • May contain any helpful text relating to the link
  • target - designates where the link will open
    • _blank will open the link in a new tab/window
    • _self will open he link in the current tab/window

Absolute Addressing

As was stated above, when creating a link, you can point it to either an absolute address or a relative address. In this section, we will be looking at the absolute address.

An absolute address is typically used when you are creating a link to a page that is NOT part of your current site. An example of this would be creating a link to Facebook from your site.

An absolute address MUST begin with the protocol (typically this is http://) when setting the value for the href.

Relative Addressing

In contrast to absolute addressing, relative addressing is when you are referring to the destination page in relationship to the page you are building the link on.

A relative address begins with either the directory or the destination file name. The protocol is not used in relative addressing.

Using the image above, the value of the href to navigate from the index.html page to the collected_works.html page would be as follows:

collected_works.html

Continuing with the image above, the value of the href to navigate from the index.html page to the resume.pdf page would be as follows:

media/resume.pdf

The Code

Absolute Address Example

<a href="http://www.facebook.com" title="Facebook Social Networking" target="_blank">Click Here</a> to visit Facebook.

Anything that is enclosed between the ending bracket of the opening anchor tag and the starting bracket of the closing anchor tag is the text that appears on the page to be clicked on. In the example above, the words Click Here are the link that appears on the page.

Relative Address Example

The <a href="collected_works.html" title="My Collected Works" target="_self">Collected Works</a> of Eric Evans.

As you can see, the value of the href is the major difference between the two addressing examples.

In this relative address example, the text Collected Works is the link while the rest of the sentence will appear as plain text in the browser.