Jalaj Singhal's Blog

Links in HTML

In this blog, we are going to discuss how we can use links on webpages.

Jalaj Singhal's photo
Jalaj Singhal
Links in HTML

Photo by Pierre Bamin on Unsplash

Table of contents

  • HTML links are connections from one web resource to another. A link has two ends.

  • An anchor and a direction. The link starts at the “source” anchor and points to the “destination” anchor, which may be any Web resource such as an image, a video clip, a sound bite, a program, an HTML document, or an element within an HTML document.

  • You will find many websites or social media platforms (Like YouTube and Instagram) which link an image to a URL or a text to a URL, etc. This means that by using the ‘a’ tag, you can link one element of the code to another element that may or may not be in your code.

  • Links can be used to connect two different web pages, or they may the image from the device itself.

  • An external link is a type of hyperlink that directs users to a resource, such as a webpage, image, or document, located on a different website or domain.

  • INPUT:

  •       <!DOCTYPE html>
      <html>
      <head>
          <title>Internal Link Example</title>
      </head>
      <body>
          <p>Click on the following link</p>
          <a href="https://jalajsinghal3.hashnode.dev/html-css">Jalaj hashnode</a>
      </body>
      </html>

  • OUTPUT:

  • An internal link is a type of hyperlink whose target or destination is a resource, such as an image or document, on the same website or domain.
<!DOCTYPE html>
<html>
<head>
    <title>Internal Link Example</title>
</head>
<body>
    <p>
        <a href="./index2.html">
            GeeksforGeeks Contribute
        </a> <br>
        It is a link to the contribute
        page on GeeksforGeeks' website.
    </p>
</body>
</html>

  • Different types of links appear in different formats, such as:

    • An unvisited link appears underlined and blue in color by default.

    • A visited link appears underlined and purple in color by default.

    • An active link appears underlined and red in color by default.

  • We will do inline styling here.

  • INPUT:

  •       <!DOCTYPE html>
      <html>
      <head>
          <style>
              a:link {
                  color: red;
                  background-color: transparent;
              }
              a:visited {
                  color: green;
                  background-color: transparent;
              }
              a:hover {
                  color: blue;
                  background-color: transparent;
              }
              a:active {
                  color: yellow;
                  background-color: transparent;
              }
          </style>
      </head>
      <body>
          <p>Changing the default colors of links</p>
          <p>Visited Link</p>
          <a href="https://jalajsinghal3.hashnode.dev/html-css">
              Haahnode
          </a>
          <p>Link</p>
          <a href="https://www.linkedin.com/in/ jalaj-singhal-2a7574287">
              Linkedin
          </a>
          <p>hovering effect</p>
          <a href="https://github.com/jalaj-25">
              Github
          </a>
      </body>
      </html>

  • OUTPUT:

  • The target attribute is used to specify the location where the linked document is opened.

  • The various options that can be used in the target attribute are listed below in the table:

  • INPUT:

  •       <!DOCTYPE html>
      <html>
      <head>
          <title>Target Attribute Example</title>
      </head>
      <body>
          <h3>Various options available in the Target Attribute</h3>
          <p>If you set the target attribute to "_blank",
              the link will open in a new browser window or tab.
          </p>
          <a href="https://www.geeksforgeeks.org"target="_blank">
              GeeksforGeeks
          </a>
          <p>If you set the target attribute to "_self",
              the link will open in the same window or tab.
          </p>
          <a href="https://github.com/jalaj-25"target="_self">Githhub
          </a>

          <p>If you set the target attribute to "_top",
              the link will open in the full body of the window.
          </p>
          <a href="https://jalajsinghal3.hashnode.dev/html-css"target="_top">Hashnode
          </a>

          <p>If you set the target attribute to "_parent",
              the link will open in the parent frame.
          </p>
          <a href="https://www.linkedin.com/in/ jalaj-singhal-2a7574287"target="_parent">Linkedin
          </a>
      </body>
      </html>

  • OUTPUT:

  • An image can be used to create a link to a specified URL.

  • When the viewer clicks on the link, it redirects them to another page.

  • INPUT:

  •   <!DOCTYPE html>
  <html>
  <body>
      <h3>Using Image as a link</h3>
      <a href="https://www.geeksforgeeks.org">
          <img src="https://th.bing.com/th/id/OIP.gJZXQTpDcaEeFzYnMV8bnQHaEc?rs=1&pid=ImgDetMain"
              alt="Jalaj logo"
              style="width:80px;height:80px;border:0">
      </a>
  </body>
  </html>

  • OUTPUT:

Creating a Book Mark:

  • A bookmark is a link that can be used to jump to a specified portion of a webpage.

  • This is very useful if a webpage is quite long.

  • INPUT:

  •   <!DOCTYPE html>
  <html>
  <body>
      <p><a href="#T11">Jump to Topic 11</a></p>
      <p><a href="#T17">Jump to Topic 17</a></p>
      <p><a href="#T20">Jump to Topic 20</a></p>

      <h2>Topic 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique magnam illo praesentium excepturi, consequuntur sed corrupti quas eaque at doloremque nisi veniam sunt, amet placeat in. Aspernatur doloremque aliquid animi.</p>

      <h2>Topic 2</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem rerum ut voluptas? Magni nisi quibusdam labore a ex eius ea animi sint nihil. Laboriosam quos similique illo debitis dolorem cumque.</p>

      <h2>Topic 3</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam in beatae eveniet omnis dolorum. Dolorum a tenetur modi suscipit, provident alias, excepturi laboriosam maiores dolorem minima repellat ut. Dolore, ex.</p>

      <h2>Topic 4</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, debitis laboriosam. Exercitationem accusamus quia distinctio dolorem odio in facere atque adipisci tempora delectus, excepturi inventore ut et, nobis asperiores non?</p>

      <h2>Topic 5</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, obcaecati? Officiis laboriosam distinctio vel fuga expedita veritatis id delectus quasi iusto, eius quis omnis? Inventore ullam unde impedit ipsa est.</p>

      <h2>Topic 6</h2>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto molestiae eaque voluptate vel quam id praesentium impedit enim eos modi accusantium facilis doloribus, suscipit optio molestias vitae officiis repellat est?</p>

      <h2>Topic 7</h2>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis fugit veniam obcaecati. Nihil quisquam eius, tempore consectetur voluptatem animi possimus, quidem rerum blanditiis, delectus reprehenderit incidunt maxime debitis hic neque!</p>

      <h2>Topic 8</h2>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate, sit amet pariatur natus officia debitis, eligendi dolores ipsam ipsa eos quasi sint dolorum qui repudiandae quod sequi impedit? Vitae, hic.</p>

      <h2>Topic 9</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi beatae cupiditate nemo veritatis reprehenderit! Delectus earum ea accusamus non, saepe a unde obcaecati iure ex vero blanditiis ipsam! Officia, nemo!</p>

      <h2>Topic 10</h2>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates odio quo ab, quisquam nesciunt architecto porro aliquam culpa voluptas minus repudiandae itaque accusamus, commodi maiores est. Quam culpa accusamus ab.</p>

      <h2 id="T11">Topic 11</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae totam ipsam illum cum accusantium, beatae tempora magnam et obcaecati, dolor ab ducimus quaerat. Maiores expedita possimus assumenda deserunt iure cumque?</p>

      <h2>Topic 12</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic recusandae corporis voluptate inventore dolorem eveniet, dignissimos quod illum sequi totam nihil ducimus ipsa itaque quo non in possimus esse quis.</p>

      <h2>Topic 13</h2>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus doloribus unde recusandae culpa laudantium eaque id? Nihil sunt qui ipsa vitae dolor, perspiciatis labore iste nulla impedit a quia ad.</p>

      <h2>Topic 14</h2>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis ullam ut quia dignissimos impedit iste ad rem eius, repellat itaque! Expedita qui sint ducimus id sapiente accusamus sequi ad eum.</p>

      <h2>Topic 15</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea accusantium, numquam impedit voluptate consequuntur adipisci animi ipsa quod ipsum placeat ipsam perferendis dicta nesciunt minus magni qui consectetur quae quia!</p>

      <h2>Topic 16</h2>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam laborum ratione quo id libero quasi debitis error earum optio odit omnis repellat, placeat veniam quaerat quos pariatur, impedit possimus labore!</p>

      <h2 id="T17">Topic 17</h2>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium atque quas, distinctio facere, qui perferendis molestiae eum doloremque odit delectus aperiam quisquam deleniti saepe itaque eius at amet enim provident?</p>

      <h2>Topic 18</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet ad harum veritatis! Iusto provident, voluptatibus dolorem excepturi, perferendis dolores cumque consequatur, vero eius assumenda earum expedita nesciunt! Esse, nobis minima.</p>

      <h2>Topic 19</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, deserunt odit! Quasi distinctio reiciendis fugit reprehenderit sunt asperiores, ipsam soluta perferendis quae quis. Obcaecati voluptates tenetur deserunt fugiat, nobis consequatur.</p>

      <h2 id="T20">Topic 20</h2>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. In aliquid quae autem voluptates, magnam minima, error rerum soluta porro cupiditate provident repellendus vitae excepturi sed. Atque aspernatur laboriosam voluptatum maxime.</p>
  </body>
  </html>

  • Showing the output is not easy with this code, but you can try it on VSCode to see the results.

  • A text link can be created to download a pdf, doc, or zip file.

  • INPUT:

  •   <!DOCTYPE html>
  <html>
  <h3>Creating a download link</h3>
  <body>
      <a href="GeeksforGeeks.pdf">
          Download PDF File
      </a>
  </body>
  </html>

  • For this, we need to take care of something while making it for our use, as follows:

    • Google Chrome 1 and above

    • Microsoft Edge 12 and above

    • Firefox 1 and above

    • Opera 2 and above

    • Safari 1 and above

Did you find this article valuable?

Support Jalaj Singhal by becoming a sponsor. Any amount is appreciated!

web dsignlinksWeb DevelopmentBookmark