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

I'm creating a link to the HTML page from Wikipedia.

It is also used for hyperlink open in new tab, hyperlink color, hyperlink image, hyperlink without underline, hyperlink button, hyperlink symbol, hyperlink icon, hyperlink meaning, hyperlink without href

HTML Links - The href Attribute

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

I'm creating a link to the HTML article page from Wikipedia.

It is also used for link href meaning and attribute, link href local file, link href stylesheet, link href rel, link href not working, link without href attribute

Use clear link wording

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

Click here to download Firefox

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.

Block level links

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


It is also used for html support block-level links, image as link to another page html and image as link markdown, react, webflow, accessibility, link to heading in markdown and link to heading on webpage, html link to heading on same page, html link to table row

Absolute URLs vs. Relative URLs

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


It is also used for anchor absolute url, html action link absolute url, base tag absolute url, beginform absolute url, get absolute url, form action absolute url, image absolute url, relative url path, relative url root, difference between relative url and absolute url

HTML Links - The target Attribute

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:

<a target="_blank|_self|_parent|_top|framename">
  • 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


It is also used for link target new tab, link target options, link target on same page, link target parent, link target download, link target property, link target div

HTML Links - The title Attribute

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.

It is also used for title tag in html with image, use of title tag, what is the title tag description and optimization, what is the title tag with example

HTML Links - The download Attribute

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.

It is also used for link download attribute not working, download attribute in anchor tag, download attribute changer, download attribute in angular, download attribute in react, link download instead of open, link download file, link download multiple files, link download file not open

Remember - Linking to non-HTML resources

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



Link to an Email Address

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.

It is also used for link to email address wordpress, link to email address in adobe acrobat and link to email address in sharepoint and in canva, how to create and add email link,html link to email with subject and body

Create a Bookmark in HTML

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>
It is also used for html id attribute rules, id attribute value with prefix section, id attribute naming conventions, id attribute vs html class attribute, id attribute unique and spaces, id attribute camelcase

HTML Links and CSS

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.

It is also used for html link css file path, html link css stylesheet, html link css not working, html link css in different folder, html link css style, html link css in body

HTML Links - Remove Underline

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


It is also used for link remove underline on hover, how to remove underline in href, how to remove underline from link

HTML Link Colors

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>


It is also used for link color code and link color image, inline, blue, hex, how to change link color on hover, link color pages, link color scheme, link color by number and link color without css, link color change after click