Hyperlinks

Home     Building Blocks     HTML Documents     Tags     Hyperlinks     CSS     Forms

Hyperlinks

HTML uses the <a> (anchor) tag to create a link to another document. The <a> tag is a container tag; it has start and end tags that you wrap around a span of text.  The href attribute in the tag provides the URL (value) of the linked page.

To use an anchor tag, just wrap it around the text you want linked, like this:

<a href="http://www.w3schools.com/">Visit W3Schools!</a>

The line above will look like this in a browser:
Visit W3Schools!

  • The syntax of creating an anchor is: <a href="url">Text to be displayed</a>
  • The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.
  • An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

Absolute vs. Relative URLs

  • Absolute URLs provide the full URL for the document, including the http://, the domain name, and the pathname as necessary. You need to use an absolute URL when pointing to documents out on the Web
  • Relative URLs describe the pathname to the linked file relative to the current document.  It doesn't require the protocol or domain name, just the pathname. Relative URLs can be used when you are linking to another document within your own site.

Sample Relative Links:

File within the same directory:
<a href="tapenade.htm">tapenade</a>

File within a subdirectory (lower):
<a href="recipes/tapenade.htm">tapenade</a>

File outside of the directory (higher):
<a href="../tapenade.htm>tapenade</a>

The src attribute in the <img> tag works the same as the href attribute in anchors.

Linking Within a Page

You can also link to specified locations on a Web page.  For instance, this link to the top of the page takes me to a location that I have named as a destination or target on my page.  Anchors may be created and linked within one page or they may be used to to take your user to specified locations on any page within your site.  Linking within pages is a two part process that involves naming an anchor and then creating a link to that anchor from another location.

Naming the anchor:

The anchor tag (<a>) with the name attribute is used to give a section of the page a name that can be referenced elsewhere. You can wrap the anchor tag around text or just insert an empty anchor element before the text. I would place the following anchor at the top of my page:

<a name = "top"></a>Top

Next, at the bottom of the page, I'll create a link to the named anchor. The link is an ordinary link but also include the # symbol before the name to indicate we're linking to an anchor.

<a href= "#top">Top</a>

Try it by clicking this link: Top
View the source code for this page and see if you can locate the anchor and the link.

Practice creating hyperlinks on your Web page

 
  W3 Schools HTML Tutorials
http://www.w3schools.com/html/default.asp