HTML Tutorial

Chapter: 14

HTML Links

Links are found in nearly all web pages. Links allow users to click their way from page to page.

HTML Links - Hyperlinks

Links are found in nearly all web pages. Links allow users to click their way from page to page.
You can click on a link and jump to another document.
NOTE: A link does not have to be text. It can be an image or any other HTML element.

HTML Links - Syntax

In HTML, links are defined with the <a> tag:

Syntax

<a href="url">link text</a>

Example

<a href="http://www.freeeducation.me/html/html_intro.php">Visit our HTML tutorial</a>
The href attribute specifies the destination address (http://www.freeeducation.me/html/html_intro.php) of the link.
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text will send you to the specified address.
NOTE: Without a forward slash on subfolder addresses, you might generate two requests to the server. Many servers will automatically add a forward slash to the address, and then create a new request.

Local Links

The example above used an absolute URL (A full web address).
A local link (link to the same web site) is specified with a relative URL (without http://www....).

Example

<a href="html_images.jpg">HTML Images</a>

HTML Links - Colors

When you move the mouse over a link, two things will normally happen:
  • The mouse arrow will turn into a little hand
  • The color of the link element will change
By default, a link will appear like this (in all browsers):
  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red
You can change the default colors, by using styles:

Example

<style>
a:link
{
      color:green;
      background-color:transparent;
      text-decoration:none
}
a:visited
{
      color:pink;
      background-color:transparent;
      text-decoration:none
}
a:hover
{
      color:red;
      background-color:transparent;
      text-decoration:underline
}
a:active
{
      color:yellow;
      background-color:transparent;
      text-decoration:underline
}
</style>

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
  • _blank - Opens the linked document in a new window or tab
  • _self - Opens the linked document in the same window/tab as it was clicked (this is default)
  • _parent - Opens the linked document in the parent frame
  • _top - Opens the linked document in the full body of the window
  • framename - Opens the linked document in a named frame

This example will open the linked document in a new browser window/tab:

Example

<a href="http://www.freeeducation.me/" target="_blank">Visit FreeEducation!</a>
Tip: If your webpage is locked in a frame, you can use target="_top" to break out of the frame:

Example

<a href="http://www.freeeducation.me/html/html_intro.php" target="_top">HTML5 tutorial!</a>

HTML Links - Image as Link

It is common to use images as links:

Example

<a href="inde.html">
     <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
NOTE: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).

HTML Links - Create a Bookmark

HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
Bookmarks can be useful if your webpage is very long.
To make a bookmark, you must first create the bookmark, and then add a link to it.
When the link is clicked, the page will scroll to the location with the bookmark.

Example

First, create a bookmark with the id attribute:
<h2 id="tips">Useful Tips Section</h2>
Then, add a link to the bookmark ("Useful Tips Section"), from within the same page:

Example

<a href="#tips">Visit the Useful Tips Section</a>
Or, add a link to the bookmark ("Useful Tips Section"), from another page:

Example

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>

Chapter Summary

  • Use the <a> element to define a link
  • Use the href attribute to define the link address
  • Use the target attribute to define where to open the linked document
  • Use the <img> element (inside <a>) to use an image as a link
  • Use the id attribute (id="value") to define bookmarks in a page
  • Use the href attribute (href="#value") to link to the bookmark

HTML Link Tags

Tag Description
<a> Defines a hyperlink