HTML Links - Hyperlinks

HTML links are called hyperlinks and it found in nearly all web pages.

The HTML a tag (or anchor tag) defines a hyperlink, which is used to link or navigate from one page to another.

Hyperlinks allow linking to web-based HTML files web pages, text files, photos, documents, videos, audio files, etc on the web.

Example

<p>I'm creating a link to
<a href="https://en.wikipedia.org/wiki/HTML">the HTML page from Wikipedia</a>.
</p>

Result of the above query

The most important attribute of the HTML a tag is the href attribute, which indicates the link's destination (web URL).

It has the following syntax:

<a href="target url">link text or any content</a>

A target URL may be an internet site, blog, document, email address, telephone number, photo/video, etc

When the user clicks on the link, the browser goes (specified in the href attribute) to the target URL.

Note: If the href attribute is not specified in the a element, the a tag will not be a hyperlink.

A text link is created by adding a text, an image, heading, list, table, or any other HTML elements inside of an a element.

Note: It is not necessary for the "link text" to be text. An image or any other HTML element can be used as a link text.

Tip: You can use href="#top" or href="#" to link to the top of the current page!

Example

<p>I'm creating a link to
<a href="https://en.wikipedia.org/wiki/HTML">the HTML article page from Wikipedia</a>.
</p>

Result of the above query

It is very important that you describe to the reader exactly what you are linking to by your link text.

The user can quickly figure out what you're linking to by looking at the link text.

Note: It's a good thing to include in your link text important keywords related to the linked content.

Example

Good link text: Download Firefox

<p><a href="https://firefox.com/">
  Download Firefox
</a></p>

Result of the above query

Example

Bad link text: Click here to download Firefox

<p><a href="https://firefox.com/">
  Click here
 </a> to download Firefox</p>

Result of the above query

Remember

• Don't repeat the URL as part of the link text.
• Don't say "link" or "links to" in the link text.
• Don't use the same link text for multiple URLs on the same page.

As mentioned before, almost any content (an image, a heading, a table, etc) not only text, can be made as a link text.

For example, If you want to convert an image as a link, use the a element, and reference the image file with the img element.

<a href="https://www.mozilla.org/en-US/">
  <img src="html-resources/img-computer.jpg" alt="An image that links to the mozilla homepage" />
</a>

Result of the above query

An absolute URL (web address) starts with a protocol name like "HTTP/HTTPS/FTP" and a domain name.

A full web address includes the protocol name domain name and the specified filename with path.

Note: The absolute URL must exist on the internet and be active.

Example

<h2>Absolute URLs</h2>

<p><a href="https://www.simmanchith.com">Simmanchith Homepage</a></p>

<p><a href="https://www.simmanchith.org/favicon.png">Simmanchith Logo</a></p>

<p><a href="https://www.simmanchith.com/tutorial/html/html-introduction.aspx">A page from simmanchith website</a></p>

Result of the above query

A relative URL will not include "HTTP/HTTPS" and domain name.

It includes only the specified file name and path in the href attribute.

Note: The relative URL must be available from the same website and cannot provide a link from another website as a relative URL.

Example

<h2>Relative URLs</h2>
<p><a href="html-resources/img-computer.jpg">An Image</a></p>
<p><a href="html-comments.aspx">Html Comments Tutorial</a></p>

Result of the above query

The target attribute specifies where to display or open the linked URL.

By default, the linked document will be opened in the current browsing context (a tab, window, or iframe).

You must specify a different target value for the associated document to modify this.

The target attribute can have one of the following values:

• self- Default. Open the linked resource in the current browsing context (window/tab/iframe).
• blank - Opens the linked resource in a new window or tab (usually a new tab, but users can configure browsers to open a new window instead).
• parent - Opens the resource in the parent frame
• top - Opens the resource in the full body of the window

Example

Use target="_blank" to open the linked URL page in a new browser window or tab:

<a href="https://www.simmanchith.com/" target="_blank">Visit Simmanchith Homepage!</a>

Result of the above query

The title attribute provides some additional information about the linked URL.

The additional data specifies which kind of information available or something related to that on the linked page.

The title is usually displayed as a tooltip when the mouse moves across the element.

Example

<a title="The best place to learn computer programming languages"
    href="https://www.simmanchith.com/">Visit Simmanchith Website</a>
 on the web.

Result of the above query

This gives us the following result and hovering over the link displays the title as a tooltip.

The download attribute is used to download/save the linked document in the user machine instead of opening it in the user browser.

The linked document will be downloaded when a user clicks on the hyperlink.

You can use the download attribute to provide a default filename for the document which is being downloaded by user.

syntax

<a download="optional value|filename">

After the file has been downloaded by the user, the optional value of the download attribute will be its new file name.

Note: If the value is omitted, the original filename is used to save the document.

Here's an example with a download link to the latest Windows version of Firefox:

<a href="https://simmanchith.com/favicon.png"
   download="logo.png">
  Download Simmanchith Website Logo
</a>

Result of the above query

Note: The download works only on URLs of the same website.

When linking to a resource that can be downloaded or streamed, make sure to use clear words.

For example, downloading a pdf or a word document, streaming video files, etc.

After reading the link text the user will understand the given link and what the link does.

Example

<p>
 <a href="https://www.example.com/large-report.pdf">
  Download the sales report (PDF, 10MB)
</a>
</p>

<p>
<a href="https://www.example.com/video-stream/" target="_blank">
  Watch the video (stream opens in separate tab, HD quality)
</a>
</p>

<p>
<a href="https://www.example.com/car-game">
  Play the car game (requires Flash Player)
</a>
</p>

Result of the above query

Instead of linking to a URL, you can create links that when clicked, open the user's email program and send a new email message.

You can use mailto: URL scheme inside href attribute to do that.

Example

<a href="mailto:someone@example.com">Send email</a>

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

Result of the above query

This results in a link that looks like this: Send email to nowhere.

In the above example, the given email address specifies to whom (recipient email address) you want to send an email.

The email address of the recipient is optional. If you leave it out, a new outgoing email will be created with no recipient address.

They are often used as "share" links on a webpage.

A bookmark is a link to a specific section on a page.

It refers only to a specific section (text, heading, table, image, etc) on a page instead of referring to a whole page.

Bookmarks can be useful if a web page contains very long content.

It can be created by HTML links.

To create a bookmark - Add an id attribute to which section you want to create a bookmark, and then add a link to it.

Example

First, use the id attribute to create a bookmark:

<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 (Same page)</a>

You can also add a link to a bookmark on another page:

<a href="html-attributes.aspx#C2">Jump to Chapter 2 (Another page)</a>

CSS properties can be applied to HTML hyperlinks.

Using CSS on HTML links, you can change the link color, remove the underline that appears below links, and so on.

The CSS attribute text-decoration is used to remove the underscores in an HTML link.

syntax

text-decoration: none;

Example

<a href="html-attributes.aspx" style="text-decoration: none;">About Us</a>

The result of above query

The color of an HTML link depends (link states) on whether it has been visited, is unvisited, or is active.

By default, a link will display like this (in all browsers):

Unvisited links are highlighted in blue color, Visited links are highlighted in purple color, and Active links are highlighted in red color.

Example

Here, an unvisited link will be green with no underline. A visited link will be pink with no underline. An active link will be yellow and underlined. In addition, when mousing over a link (a:hover) it will become red and underlined:

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