HTML Links

In this tutorial you'll learn how to create links to other pages in HTML.

Links are used on all web sites. The link allows the user to move from one page to another. Link tags are also used to move from one web site to another.

By default, links will appear as follows in all browsers:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

HTML Link Syntax

An HTML hyperlink is a word or group of words or an image that a user can click to go to another web page or document.
When you place a mouse pointer or cursor over a link on a web page, the cursor is converted to one hand or another animation is seen.

HTML hyperlinks are created using anchor tags <a> … </a> tags.

Here are some examples of links:

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Creating Links in HTML</title>
</head>
<body>
  <p><a href="https://www.google.com/" target="_blank">Google Search</a></p>
  <p><a href="https://www.google.com/" target="_blank">Facebook</a></p>
  <p>
   <a href="https://t.co/UfdP80wx4t?amp=1">
     <img src="https://i.imgur.com/DR25PT3.jpg">
    </a>
  </p>
  <p><a href="https://coderwell.com/">CoderWell</a></p>
</body>
</html>

Result:

Google Search

Facebook



CoderWell

How to use HTML hyperlinks

There are two ways to create hyperlinks in HTML –

  • Using the href attribute with the anchor tag,
  • Creates bookmarks inside documents.
Creating Bookmark Anchors

You can also create bookmark anchors to allow users to navigate to specific sections of a web page. Bookmarks are especially helpful if you’ve got a really long website.

Creating a bookmark can be a two-step process: first add the ID attribute to the element you want to jump to, then use the value of the ID attribute before the hash (#) because the value of the <a> tag’s href attribute, here are examples:

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Creating Links in HTML</title>
</head>
<body>
   <a href="#SectionOne"><b>Section One</b></a>
   <a href="#SectionTwo"><b>Section Two</b></a>
   <a href="#SectionThree"><b>Section Three</b></a>
    <hr>
     <h1 id="SectionOne">Section One</h1>
    <p><a href="https://www.google.com/" target="_blank">Google Search</a></p>
    <p><a href="https://www.facebook.com/" target="_blank">Facebook</a></p>
    <p>
        <a href="https://t.co/UfdP80wx4t?amp=1">
            <img src="https://i.imgur.com/DR25PT3.jpg">
        </a>
    </p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utinam quidem dicerent alium alio beatiorem! Iam ruinas videres. Duo Reges: constructio interrete. Zenonis est, inquam, hoc Stoici. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. </p>
     <hr>
    <hr>
      <h1 id="SectionTwo">Section Two</h1>
      <p><a href="https://www.google.com/" target="_blank">Google Search Section Two</a></p>
      <p><a href="https://www.google.com/" target="_blank">Facebook Section Two</a></p>
      <p>
          <a href="https://t.co/UfdP80wx4t?amp=1">
              <img src="https://i.imgur.com/CFAtkEe.jpg">
          </a>
      </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utinam quidem dicerent alium alio beatiorem! Iam ruinas videres. Duo Reges: constructio interrete. Zenonis est, inquam, hoc Stoici. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. </p>
      <hr>
      <hr>
     <h1 id="SectionThree">Section Three</h1>
     <p><a href="https://www.google.com/" target="_blank">Google Search Section Three</a></p>
     <p><a href="https://www.google.com/" target="_blank">Facebook Section Three</a></p>
     <p>
         <a href="https://t.co/UfdP80wx4t?amp=1">
             <img src="https://i.imgur.com/DUkpobn.jpg">
         </a>
     </p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utinam quidem dicerent alium alio beatiorem! Iam ruinas videres. Duo Reges: constructio interrete. Zenonis est, inquam, hoc Stoici. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. </p>
     <hr>
</body>
</html>

Setting the Targets for Links

The target attribute specifies where and how the HTML document will be displayed or opened in the browser. The rule of thumb is to write a target attribute

Here are some of the values ​​that the target property can have –

  • _blank – the document will open a new window or tab,
  • _self – will open the document in the same window or tab and set it to automatic value,
  • _parent – will open the document in the parent frame,
  • _top – Opens the document in an entire window,
  • _framename – will open the document in a specific name frame.

See the example below, the document linked here will create a new tab or window in the browser.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Targets for Links in HTML</title>
</head>
<body>
     <p><a href="https://www.google.com/" target="_blank">Google Search</a></p>
     <p><a href="https://www.facebook.com/" target="_top">Facebook</a></p>
     <p><a href="https://www.coderwell.com/" target="_self">Coder Well</a></p>
     <p>
        <a href="https://t.co/UfdP80wx4t?amp=1" target="_parent">
            <img src="https://i.imgur.com/DR25PT3.jpg">
        </a>
     </p>
</body>
</html>

TOOLS

ABOUT US

CONTACT