The_MAK Pro

HTML Links

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

A link or hyperlink is a connection from one web resource to another. Links allow users to move seamlessly from one page to another, on any server anywhere in the world.

A link has two ends, called anchors. The link starts at the source anchor and points to the destination anchor, which may be any web resource, for example, an image, an audio or video clip, a PDF file, an HTML document or an element within the document itself, and so on.

By default, links will appear as follows in most of the browsers:

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

Links are specified in HTML using the <a> tag.

A link or hyperlink could be a word, group of words, or image.

<a href="url">Link text</a>

Anything between the opening <a> tag and the closing </a> tag becomes the part of the link that the user sees and clicks in a browser. Here are some examples of the links:

Example

<!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="/examples/images/kites.jpg">
        <img src="/examples/images/kites-thumb.jpg" alt="kites" />
      </a>
    </p>
    <p><a href="https://www.themakpro.com/">The_MAK Pro</a></p>
  </body>
</html>

The href attribute specifies the target of the link. Its value can be an absolute or relative URL.

An absolute URL is the URL that includes every part of the URL format, such as protocol, host name, and path of the document, e.g., https://www.google.com/, https://www.example.com/form.php, etc. While, relative URLs are page-relative paths, e.g., contact.html, images/smiley.png, and so on. A relative URL never includes the http:// or https:// prefix.

The target attribute tells the browser where to open the linked document. There are four defined targets, and each target name starts with an underscore(_) character:

  • _blank — Opens the linked document in a new window or tab.
  • _parent — Opens the linked document in the parent window.
  • _self — Opens the linked document in the same window or tab as the source document. This is the default, hence it is not necessary to explicitly specify this value.
  • _top — Opens the linked document in the full browser window.

Try out the following example to understand how the link’s target basically works:

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Setting the HTML Link's Target</title>
  </head>
  <body>
    <p><a href="/about-us.php" target="_top">About Us</a></p>
    <p>
      <a href="/examples/images/sky.jpg" target="_parent">
        <img src="/examples/images/sky-thumb.jpg" alt="Cloudy Sky" />
      </a>
    </p>
    <p><a href="https://www.google.com/" target="_blank">Google</a></p>
  </body>
</html>

Tip: If your web page is placed inside an iframe, you can use the target="_top" on the links to break out of the iframe and show the target page in full browser window.

Creating Bookmark Anchors

You can also create bookmark anchors to allow users to jump to a specific section of a web page. Bookmarks are especially helpful if you have a very long web page.

Creating bookmarks is a two-step process: first add the id attribute on the element where you want to jump, then use that id attribute value preceded by the hash sign (#) as the value of the href attribute of the <a> tag, as shown in the following example:

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Creating Bookmarks in HTML</title>
    <style>
      h2 + p {
        line-height: 75px; /* increase height between lines */
      }
    </style>
  </head>
  <body>
    <p><a href="#sectionA">Jump to Section A</a></p>
    <p><a href="#sectionB">Jump to Section B</a></p>
    <p><a href="#sectionC">Jump to Section C</a></p>

    <h2 id="sectionA">Section A</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem
      tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis
      vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum
      scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis.
      In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu
      in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo,
      blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit
      suscipit, id interdum neque porttitor. Integer faucibus ligula. Quis quam
      ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit
      tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at
      mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis
      gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis
      justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget
      mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat.
      Maecenas mattis lectus enim, quis tincidunt dui molestie euismod.
      Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.
    </p>

    <h2 id="sectionB">Section B</h2>
    <p>
      Pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales
      eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem
      porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus
      sed nunc ac sem malesuada condimentum. Etiam in aliquam lectus. Nam vel
      sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattis
      augue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse
      tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus
      lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl
      semper tortor, vel sagittis lacus est consequat eros. Sed id pretium nisl.
      Curabitur dolor nisl, laoreet vitae aliquam id. Fusce enim arcu, interdum
      vel metus dignissim, venenatis feugiat purus. Nulla posuere orci ut leo
      sodales, sed cursus dolor ornare. Cum sociis natoque penatibus et magnis
      dis parturient montes, nascetur ridiculus mus. Etiam sit amet quam orci.
      Nulla sollicitudin lectus eget posuere venenatis. Sed vestibulum elementum
      sagittis. Quisque tristique tortor quis feugiat sollicitudin. Ut
      pellentesque luctus vulputate. Ut at odio ac erat blandit vehicula ut eget
      urna. In hac habitasse platea dictumst. Nullam ut iaculis nibh, eget
      eleifend elit.
    </p>

    <h2 id="sectionC">Section C</h2>
    <p>
      Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis
      lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci.
      In dapibus velit blandit pharetra tincidunt. Quisque non sapien nec lacus
      condimentum facilisis ut iaculis enim. Sed viverra interdum bibendum.
      Donec ac sollicitudin dolor. Sed fringilla vitae lacus at rutrum.
      Phasellus congue vestibulum ligula sed consequat.Enim arcu, interdum vel
      metus dignissim, venenatis feugiat purus. Nulla posuere orci ut leo
      sodales, sed cursus dolor ornare. Cum sociis natoque penatibus et magnis
      dis parturient montes, nascetur ridiculus mus. Etiam sit amet quam orci.
      Nulla sollicitudin lectus eget posuere venenatis. Sed vestibulum elementum
      sagittis. Quisque tristique tortor quis feugiat sollicitudin. Ut
      pellentesque luctus vulputate. Ut at odio ac erat blandit vehicula ut eget
      urna. In hac habitasse platea dictumst. Nullam ut iaculis nibh, eget
      eleifend elit. Curabitur ligula justo, dapibus non ligula tristique,
      dapibus tristique nulla. Aliquam pulvinar dapibus eros, rutrum pretium
      urna iaculis ut. Nam est est, tempus id egestas et, viverra in dui.
      Aliquam gravida orci tortor, sed congue justo ornare vel. Cras in quam
      consectetur eros varius scelerisque. Ut vel fermentum purus. Nullam
      interdum blandit turpis, id pellentesque massa feugiat at. Ut sed lectus
      lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
      posuere cubilia Curae; Nulla rutrum, ante quis convallis ultricies, magna
      quam rhoncus erat, in lacinia libero magna a ipsum.
    </p>
  </body>
</html>

Tip: You can even jump to a section of another web page by specifying the URL of that page along with the anchor (i.e. #elementId) in the href attribute, for example, <a href="mypage.html#topicA">Go to TopicA</a>.

You can also create the file download link in exactly the same fashion as placing text links. Just point the destination URL to the file you want to be available for download.

In the following example we’ve created the download links for ZIP, PDF and JPG files.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML Download Links</title>
  </head>
  <body>
    <p><a href="/examples/downloads/test.zip">Download Zip file</a></p>
    <p><a href="/examples/downloads/masters.pdf">Download PDF file</a></p>
    <p><a href="/examples/downloads/sample.jpg">Download Image file</a></p>
  </body>
</html>

Note: When you click a link that points to a PDF or image file, the file is not downloaded to your hard drive directly. It will only open the file in your web browser. Further you can save or download it to your hard drive on a permanent basis.

© 2024 All rights reserved. | Made With 🤍 By The_MAK Team