HTML Link


HTML uses hyperlinks to connect to another document on the web. Links can be found on almost all web pages. Click a link to jump from one page to another.


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 that you can click to jump to a new document or a section in the current document.

When you move the mouse pointer over a link in a web page, the arrow turns into a small hand.

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

By default, the link will appear in the browser as:

  • An unvisited link is shown in blue font and underlined.
  • Visited links are purple and underlined.
  • When a link is clicked, the link appears red and underlined.

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


The HTML code for 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.tutorialsbyte.com/">Visit Tutorialsbyte.com</a>

The above line of code is displayed as: Visit Tutorialsbyte

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

Tip: “Link text” doesn’t have to be text. Images or other HTML elements can be links.


Using the target attribute, you can define where the linked document is displayed.

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

example

<a href="https://www.tutorialsbyte.com/" target="_blank" rel="noopener noreferrer">Visit Tutorialsbyte.com</a>

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

Tip: Bookmarks are not displayed in any special way, ie they are not displayed in the HTML page, so they are hidden from the reader.

example

Insert ID in HTML document:

<a id="tips">Helpful Tips Section</a>

Create a link to the “Helpful Tips Section (id=”tips”)” in the HTML document:

<a href="#tips">Visit the helpful tips section</a>

Alternatively, create a link to the “Helpful Tips Section (id=”tips”)” from another page:

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

Basic Notes – Helpful Tips

NOTE: Always add forward slashes to subfolders. If the link is written like this: href=”https://www.tutorialsbyte.com/html”, two HTTP requests will be made to the server. This is because the server will add forward slashes to this address and then create a new request like this: href=”https://www.tutorialsbyte.com/html/”.