HTML Link


HTML uses hyperlinks to connect to another document on the web. You can find links on almost all web pages. Click the link to jump from one page to another.


Examples

Try It - Example

HTML links
How to create links in HTML documents.

(You can find more examples at the bottom of this page)


HTML Hyperlink (Link)

HTML uses the tag <a> to set up hypertext links.

A hyperlink can be a letter, a word, or a group of words, or an image. You can click on these contents to jump to a new document or a certain part of the current document.

When you move the mouse pointer to a link in a web page, the arrow will turn into a small hand.

The href attribute is used in the tag <a> to describe the link address.

By default, the link will appear in the browser in the following form:

  • An unvisited link is displayed in blue font and underlined.

  • Visited links are shown in purple and underlined.

  • When you click the link, the link is displayed in red and underlined.

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


HTML Link Syntax

The HTML code of the link is simple. It looks like this:

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

The href attribute describes the target of the link.

Example

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

The above line of code is displayed as: Visit the tutorialfish.com

Clicking on this hyperlink will take the user to the homepage of the tutorialfish.com tutorials.

Tip: "Link text" does not have to be text. Pictures or other HTML elements can become links.


HTML Link - Target Attribute

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

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

Example

<a href="https://www.tutorialfish.com/" target="_blank" rel="noopener noreferrer">visit the Tutorial Fish!</a>

Try It!



HTML Link - Id Attribute

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

Tip: Bookmarks will not be displayed in any special way, that is, they are not displayed in HTML pages, so they are hidden from readers.

Example

Insert ID in HTML document:

<a id="tips">Useful tips section</a>

Create a link to the "useful tips section (id="tips")" in the HTML document:

<a href="#tips">Access the useful tips section</a>

Or, create a link from another page to the "useful tips section (id="tips")":

<a href="https://www.tutorialfish.com/html/html-links.html#tips">
Visit the useful tips section</a>



Basic Notes - Useful Tips

Note: Please always add a forward slashe to the subfolder at the end of url. 

If you write a link like this: href="https://www.tutorialfish.com/html", two HTTP requests will be made to the server. 

This is because the server will add a forward slash to this address, and then create a new request, like this: href="https://www.tutorialfish.com/html/".



Examples

More examples (under construction)

Image link

How to use picture link.

Link to the specified location on the current page
How to use bookmarks

Jump out of the frame
This example demonstrates how to jump out of the frame, assuming your page is fixed in the frame.

Create an email link
This example demonstrates how to link to an email. (This example can only work after installing the mail client program.)

Create email link 2
This example demonstrates a more complex email link.


HTML Link Tag

LabelDescription
<a>Define a hyperlink