HTML Links

HTML uses hyperlinks to connect a document with another document on the web.

Links in HTML are elements used for navigating between different web pages.

Links are typically used to associate one web page with another web page or resource, such as documents, images, audio files, etc.

Links allow users to click on text or images while browsing a webpage to jump to other locations, thereby enabling interconnection between web pages.

Examples

<p><a href="/index.html">This text</a> is a link to a page within this site.</p>
<p><a href="http://www.microsoft.com/">This text</a> is a link to a page on the World Wide Web.</p>

Creating Links in an HTML Document

(More examples can be found at the bottom of this page)

HTML Hyperlinks (Links)

HTML uses the <a> tag to set up hyperlinks.

A hyperlink can be a word, a group of words, or an image that you can click to jump to a new document or a specific section of the current document.

When you move the mouse pointer over a link on a webpage, the arrow will change to a small hand.

The <a> tag uses the href attribute to describe the link's address.

By default, links will appear in the browser as follows:

An unvisited link is underlined and blue.
A visited link is underlined and purple.
A clicked link is underlined and red.

Note: If CSS styles are set for these hyperlinks, the display style will be shown according to the CSS settings.

HTML Link Syntax

The basic syntax and attributes for creating links in HTML:

The <a> element is the primary HTML element for creating links. The <a> element has the following attributes:

href: Specifies the URL of the link target, which is the most important attribute. It can be the URL of another web page, a file, or another resource.
target (optional): Specifies how the link will open in the browser. Common values include _blank (opens the link in a new tab or window) and _self (opens the link in the current tab or window).
title (optional): Provides additional information about the link, usually displayed as a tooltip when hovering over the link.
rel (optional): Specifies the relationship between the current document and the linked document, such as nofollow, noopener, etc.

The HTML code for a link is simple and looks like this:

<a href="url">Link Text</a>

The href attribute describes the target of the link.

Example

<a href="https://www.webcode101.com/">Visit webcode101.com</a>

This line of code displays as: Visit Webcode101.com

Clicking this hyperlink will take the user to the homepage of webcode101.

Tip: "Link Text" doesn't have to be text. Images or other HTML elements can also be links.

Types of Links

Text Links: The most common type of link is a text link, which uses the <a> element to turn a piece of text into a clickable link, such as:

<a href="https://www.example.com">Visit Example Site</a>

Image Links: You can also use an image as a link. In this case, the <a> element surrounds the <img> element. For example:

<a href="https://www.example.com">
  <img src="example.jpg" alt="Example Image">
</a>

Anchor Links: Besides linking to other web pages, you can also create internal links within the same page, called anchor links. To create an anchor link, define a mark with the <a> element at the target location and reference it with the # symbol. For example:

<a href="#section2">Jump to Section 2</a>
<!-- Somewhere on the page -->
<a name="section2"></a>

Download Links: If you want a link to download a file instead of navigating to another web page, use the download attribute. For example:

<a href="document.pdf" download>Download Document</a>

HTML Links - target Attribute

Using the target attribute, you can define where the linked document will display.

The following line will open the document in a new window:

<a href="https://www.webcode101.com/" target="_blank" rel="noopener noreferrer">Visit webcode101!</a>

HTML Links - id Attribute

The id attribute can be used to create a bookmark in an HTML document.

Tip: Bookmarks are not displayed in any special way; they are hidden from the reader in the HTML page.

Example

Insert an ID into an HTML document:

<a id="tips">Useful Tips Section</a>

Create a link to the "Useful Tips Section (id="tips")" within the HTML document:

<a href="#tips">Visit Useful Tips Section</a>

Or, create a link from another page to the "Useful Tips Section (id="tips")":

<a href="https://www.webcode101.com/html/html-attributes.htm#tips">Visit Useful Tips Section</a>

Basic Considerations - Useful Tips

Note: Always add a trailing slash to subfolders. If you write the link as href="https://www.webcode101.com/html", it will generate two HTTP requests to the server. This is because the server will add a trailing slash to this address and create a new request like this: href="https://www.webcode101.com/html/".

Examples

Image Links

How to use image links.

<p>Create an image link:
  <a href="http://www.webcode101.com/html/html-tutorial.htm">
    <img border="10" src="smiley.gif" alt="HTML Tutorial" width="32" height="32">
  </a>
</p>

<p>Image link without border:
  <a href="http://www.webcode101.com/html/html-tutorial.htm">
    <img border="0" src="smiley.gif" alt="HTML Tutorial" width="32" height="32">
  </a>
</p>

Linking to a Specific Position on the Current Page

How to use bookmarks.

<p><a href="#C4">View Chapter 4</a></p>

<h2>Chapter 1</h2>
<p>This shows the content of this chapter...</p>

<h2>Chapter 2</h2>
<p>This shows the content of this chapter...</p>

<h2>Chapter 3</h2>
<p>This shows the content of this chapter...</p>

<h2><a id="C4">Chapter 4</a></h2>
<p>This shows the content of this chapter...</p>

<h2>Chapter 5</h2>
<p>This shows the content of this chapter...</p>

<h2>Chapter 6</h2>
<p>This shows the content of this chapter...</p>

<h2>Chapter 7</h2>
<p>This shows the content of this chapter...</p>

<h2>Chapter 8</h2>
<p>This shows the content of this chapter...</p>

<h2>Chapter 9</h2>
<p>This shows the content of this chapter...</p>

<h2>Chapter 10</h2>
<p>This shows the content of this chapter...</p>

<h2>Chapter 11</h2>
<p>This shows the content of this chapter...</p>

<h2>Chapter 12</h2>
<p>This shows the content of this chapter...</p>

<h2>Chapter 13</h2>
<p>This shows the content of this chapter...</p>

<h2>Chapter 14</h2>
<p>This shows the content of this chapter...</p>

<h2>Chapter 15</h2>
<p>This shows the content of this chapter...</p>

<h2>Chapter 16</h2>
<p>This shows the content of this chapter...</p>

<h2>Chapter 17</h2>
<p>This shows the content of this chapter...</p>

Escape Frames

This example demonstrates how to escape frames if your page is trapped in a frame.

<p>Escape the frame?</p>
<a href="http://www.webcode101.com/" target="_top">Click here!</a>

Creating Email Links

This example demonstrates how to link to an email. (This example only works if a mail client program is installed.)

<p>This is an email link:
  <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">Send Email</a>
</p>

<p><b>Note:</b> Use %20 to replace spaces between words to ensure that the browser displays the text correctly.</p>

Creating Email Links 2

This example demonstrates a more complex email link.

<p>This is another email link:
  <a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">Send Email!</a>
</p>


<p><b>Note:</b> Use %20 to replace spaces between words to ensure that the browser displays the text correctly.</p>

HTML Link Tags

Tag	Description
<a>	Defines a hyperlink