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.

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 word, a word, or a group of words, or an image. You can click on the content 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 the link is clicked, 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. 

Instance

<a href="https://hackerthink.com/">Visit the HacerThink tutorial</a>

The above line of code is displayed as: visit rookie tutorial

Clicking on this hyperlink will take the user to the homepage of the rookie tutorial.

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

HTML link-id attribute

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

Tip: Bookmarks are not displayed in any special way. They are not displayed in HTML documents, so they are hidden from readers.

Instance

Insert ID in HTML document:

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

Create a link to “Useful Tips (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://hackerthink.com/html/html-links.html#tips">Visit the useful tips section</a>

Basic notes-useful tips

Note: Please always add forward slashes to subfolders. If you write a link like this: href=”https://hackerthink.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://hackerthink.com/html/”.

More examples

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

label description
<a> Define a hyperlink