HTML Links

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

HTML Links - Hyperlinks

HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.

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:

<a href="http://paul-html-tutorial.blogspot.com/p/html-comment-tags.html">link text</a>

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="pagename.php">HTML Images</a>

HTML Link Colors

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 CSS:

<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:

<a href="http://paul-html-tutorial.blogspot.com/p/html-css.html" target="_blank">Paul Tutorial!</a>

 Tip: If your webpage is locked in a frame, you can use target="_top" to break out of the frame:

<a href="http://paul-html-tutorial.blogspot.com/p/html-css.html" target="_top">HTML tutorial!</a>

HTML Links - Image as Link

It is common to use images as links:

<a href="index.php">
  <img src="paul.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).

Link Titles

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

<a href="http://paul-html-tutorial.blogspot.com/p/html-css.html" title="Paul HTML Tutorial ">Visit Paul HTML Tutorial</a>

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="C4">Chapter 4</h2>

 Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

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