HTML – Links

Share

HTML links or hyperlinks are at the root of how the world wide web works. HTML links are used to allow users to jump from page to page by clicking on them. Links can be attached to almost any element.

The HTML <a> tag defines a hyperlink with the following syntax:

<a href="url" [other optional attributes]>Link Text</a>

Example:
This example creates a link to Brightwhiz.com.

<!DOCTYPE html>
<html>
   <head>
      <title>This is document title</title>
   </head>	
   <body>
      <p>Click the link below:</p>
      <a href="https://brightwhiz.com">This is a link</a>
   </body>	
</html>

The <a> element used as a link requires the href attribute, which indicates the link’s destination. The link text “This is a link” in the above example is the part of the link that will be visible to the visitor. Clicking on the link text will send the visitor to the specified URL address.

The target Attribute

By default, the linked page will be displayed in the current browser window. This behavior can be changed using the target attribute, which specifies where to open the linked document.

The target attribute can have one of the following values:

  • _self: Default. Opens the document in the same window/tab as the current link
  • _blank: Opens the document in a new window or tab
  • _parent: Opens the document in the parent frame
  • _top: Opens the document in the full body of the window
  • targetframe: Opens the document in a named targetframe

Example
This target="_blank" will open the linked document in a new browser window or tab:

<a href="https://brightwhiz.com" target="_blank">Opens in New Tab or Window</a>

Test It

Click the following link to test the above example

Opens in New Tab or Window

Absolute URLs vs. Relative URLs

When you link HTML documents with a destination on the same website (local link), you do not have to specify a complete URL for every link. All the examples in this tutorial have specified the website and therefore are termed Absolute URLs.

A local link without the website specified is called a Relative URL.

Example:

<h1>Absolute URLs</h1>
<p><a href="https://brightwhiz.com/">W3C</a></p>
<p><a href="https://tutorials.brightwhiz.com/">Google</a></p>

<h1>Relative URLs</h1>
<p><a href="index.html">Interesting Page</a></p>
<p><a href="/another_file.html">Another Page</a></p>

Almost all visual HTML elements can be turned into a link simply by placing it inside the <a> tags.

Example

This example shows how to create a link using an image.

<a href="index.php">
   <img src="logo.png" alt="Brightwhiz.com">
</a>

What About Base Path?

You can specify the base path within a website by using the <base> tag in your HTML document header. This tag is used to give a base path for all the links. So your browser will concatenate the given relative path to this base path and will make a complete URL. Absolute URLs will not be affected.

Example

The following example makes use of <base> tag to specify base URL and later we can use the relative path to all the links instead of giving a complete URL for every link.

<!DOCTYPE html>
<html>
   <head>
      <title>This is document title</title>
      <base href = "https://brightwhiz.com/">
   </head>	
   <body>
      <p>Click the link below:</p>
      <a href="index.html">This is a link</a>
   </body>	
</html>

The above will result in a full URL reading: https://brightwhiz.com/index.html.

Linking to a Page Section

You can create a link to a particular section of an HTML document by specifying the id attribute.

Note: name attribute was used prior to HTML5 but has since been deprecated in favor of id attribute.

Example

Using the deprecated name attribute.

<h1>HTML Title <a name="top"></a></h1>

Next, create a hyperlink to the section of the document with the <a> tag that has the name attribute with the value “top”.

<a href = "index.html#top">Go to the Top</a>

Using Id attribute

Specify the id attribute of any HTML element.

<h1 id="top">HTML Title</h1>

Next, as shown above, create the link.

<a href = "index.html#top">Go to the Top</a>

When you link to certain binary file formats such as EXE or ZIP, etc., They will be downloaded automatically. However, when you link to documents like PDF, or DOC they will be opened in the web browser. Sometimes that may not be what you want. If you would like your document to be downloaded instead you can specify the download attribute.

Example:

<a href="document.pdf" download>This is a downloadable document</a>

HTML Links do not have to open HTML documents on the website. They can be used to access other results depending on the URI scheme.

Example

In this example, we have used the mailto: scheme and specified the email address in the href attribute. This opens the default email client to allow a user to send a new email.

<a href="mailto:[email protected]">Send an email</a>

Share