Learn HTML - HTML Link - Infotech Solution

Learn HTML - HTML Link

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="url">link text</a>

Example

<a href="https://infotechsolutionblog.blogspot.in/html/">Visit our HTML tutorial</a>

The href attribute specifies the destination address (https://infotechsolutionblog.blogspot.in/html/) 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.html">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 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="https://infotechsolutionblog.blogspot.in/" target="_blank">Visit Infotech!</a>

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

Example

<a href="https://infotechsolutionblog.blogspot.in/html/" target="_top">HTML5 tutorial!</a>

HTML Links - Image as Link

It is common to use images as links:

Example

</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.

Example

<a href="https://infotechsolutionblog.blogspot.in/html/" title="Go to Infotech HTML section">Visit our 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:

<a href="#C4">Jump to Chapter 4</a>

Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:

Example

<a href="html_demo.html#C4">Jump to Chapter 4</a>

External Paths

External pages can be referenced with a full URL or with a path relative to the current web page.

This example uses a full URL to link to a web page:

Example

<a href="https://infotechsolutionblog.blogspot.in/html/default.asp">HTML tutorial</a>

This example links to a page located in the html folder on the current web site:

Example

<a href="/html/default.asp">HTML tutorial</a>

This example links to a page located in the same folder as the current page:

Example

<a href="default.asp">HTML tutorial</a>

Labels HTML