HTML Links HTML Links
HTML Links Tutorial and Information

HTML Tutorial - Links or Hyperlinks

Links are used to jump from one HTML page to another, or jump to a specific section of one and the same HTML page. Links can also be used to open a specific web page in a new browser window, or open an email client to send an email to a pre-set email address.

How To Create A Link or Hyperlink

A link consists of the anchor element <a> and the href attribute. The anchor element specifies where to link from, and the href attribute specifies where to link to. As with any other HTML element the anchor or link element must always have an opening tag and a closing tag.
<a href=""></a>
This is what a simple text link looks like:
<a href="url">Link Text</a>

Internal Links And External Links

Internal links point to another web page within a web site, and external links point to a HTML document outside a website.

Internal Link:

The example below shows an internal link which points to another web page within the site
Here is what an internal link looks like:
<a href="htmlintroduction.php">HTML Introduction</a>
HTML Introduction

External Link:

External links usually start with http://
This example shows an external link which points to
<a href="">Go To Google</a>
Go To Google

How To Link An Image

An image can be used as a link as well. Instead of text which functions as a link (text link), an image source code is specified between the anchor opening tag and the anchor closing tag. Here is what the HTML code for a linked image looks like:
<a href="">
<img src="images/image.gif" width="100" height="50" /></a>
HTML Links Test Image
Depending on which web browser you use, a linked image may be displayed by default with or without border. For more information about HTML borders visit WebmasterSeminar's HTML borders tutorial
For more information about images please visit HTML images tutorial

How To Open A Link In A New Browser Window

A link can open the HTML document it points to in a new browser window. This is done by using the attribute target="_blank" in the anchor element. Here is an example of an internal link which opens in a new browser window:
<a href="htmlintroduction.php" target="_blank">
HTML Introduction - opens in new browser window</a>
HTML Introduction - opens in new browser window

The target="_blank" attribute can also be used for external links, images, videos and more.

How To Create A MailTo Link (email link)

Links can be used as a "mail-to" link which opens an email client. This email link lets you pre-define the email address of the recipient. Here is what an email link looks like:
<a href="">contact</a>

Links Within One HTML Document Or Web Page

A link can point to a specific section within one web page or HTML document as well. This technique is usually being used with larger web pages in the table of contents at the beginning of a web page, or to jump from one web page to a specific section of another web page without having to scroll down and search for the wanted information.

Go to Domain Names to see a live example of a table of contents which uses this linking technique. Click on the links in the top of the domain names page and you will jump to the according section without leaving the web page or HTML document.

Here is what a link within one HTML document looks like using the Domain Name Section as an example:
<a href="domainname.php#IDN_domain_names">What are IDN Domain Names</a>
What are IDN Domain Names

Notice that the link above takes you right to the bottom of the web page instead of to the top. This way, users do not need to scroll down and search for the information they are looking for.

Note: In order for this link to work there is a small piece of code that needs to be placed right on the web page where you want the user to land. Otherwise the link will not work.
Here is what this landing code for the link looks like:
<a id="IDN_domain_names"></a>

HTML Related Links

© This Article is Copyrighted by

Please do not copy or reproduce this article in whole or part, in any form, without mentioning the source and including a live link back to - Thank You!


Copy the code below and paste into your web page
<a href="">
Webmaster Seminar</a><br />
HTML Links - Free Information, Tutorials and HTML Resources