Links in HTML

Links are the main part of any webpage. It is what make a webpage alive. You can use <a> tag to link content. In this section, we will make links to various pages of this website.

You should use following syntax for linking

<a href="link to webpage" > Text </a>

So, when you click text, then you will be directed to the webpage present in the href attribute.

Link in same page

You can also link to some part of the page using the id

<a href="#para3">Go to para 3</a>

<p id="para3">Paragraph Elements</p>

So, when you click Go to para 3, it moves to paragraph elements.

Dead Link

You can also make the dead link. Suppose you make a link, but do not know where to point now you can give the value # to the href attribute as shown below

<a href="#">Dead Link</a>

Image Link

You can also make image as a link. Just insert the image tag inside the link tag as shown below. So, as you click the image, it will point to the source present in the href attribute.

<a href="Link to image 1"><img src="image1.jpg"></a>

Code Sample

The below code shows the example for links in HTML. Copy the code and run the on your machine

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8" />
    <meta name="viewport" 
    content="width=device-width,initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Links</title>
  </head>
  <body>
    <h3>Links in Paragraphs</h3>
    <p>Go to <a href="https://www.google.com">Google</a></p>
    <p>
      <a href="#para3">Go to Para3</a>
      Lorem Ipsum is simply dummy 
      text of the printing and 
      typesetting industry.It was 
      popularised in the 1960s with t
      he release of Letraset sheets 
      containing Lorem Ipsum passages, 
      and more recently with desktop
      publishing software like Aldus 
      PageMaker including versions of 
      Lorem Ipsum.
    </p>
    <br>
    <br>
    <p>
      Paragraph 1
      <br>
      Lorem Ipsum is simply dummy 
      text of the printing and 
      typesetting industry.It was 
      popularised in the 1960s with t
      he release of Letraset sheets 
      containing Lorem Ipsum passages, 
      and more recently with desktop
      publishing software like Aldus 
      PageMaker including versions of 
      Lorem Ipsum.
    </p>
    <p id = "para3">
      Paragraph 2
      <br>
      Lorem Ipsum is simply dummy 
      text of the printing and 
      typesetting industry.It was 
      popularised in the 1960s with t
      he release of Letraset sheets 
      containing Lorem Ipsum passages, 
      and more recently with desktop
      publishing software like Aldus 
      PageMaker including versions of 
      Lorem Ipsum.
    </p>
    <p >
      Paragraph 2
      <br>
      Lorem Ipsum is simply dummy 
      text of the printing and 
      typesetting industry.It was 
      popularised in the 1960s with t
      he release of Letraset sheets 
      containing Lorem Ipsum passages, 
      and more recently with desktop
      publishing software like Aldus 
      PageMaker including versions of 
      Lorem Ipsum.
    </p>
    <p id = "para3">
      Paragraph 3
      <br>
      Lorem Ipsum is simply dummy 
      text of the printing and 
      typesetting industry.It was 
      popularised in the 1960s with t
      he release of Letraset sheets 
      containing Lorem Ipsum passages, 
      and more recently with desktop
      publishing software like Aldus 
      PageMaker including versions of 
      Lorem Ipsum.
    </p>
  </body>
</html>

So, when you click Google, you go to google website. And when you click Go to Para3, you are directed to the last paragraph.

Anchor has two attributes – href and target. href takes the link parameter to direct to the link.

In the case of target, if we set target to “_blank“, we will be able to open the link in the new page. Try adding target to the above code.

<p>Go to <a href="https://www.google.com" target="_blank">Google</a></p>

This will open google page in the new page.

One Reply to “Links in HTML”

Leave a Reply

Your email address will not be published. Required fields are marked *