Links in HTML

  • Last updated Apr 25, 2024

In HTML, a link is a clickable text or image or any other HTML element that has a reference to other HTML page. A link is defined by the <a> tag. An HTML link allows users to navigate between pages, connecting different pieces of content seamlessly.

Types of HTML Links
  1. Anchor Links:

    2. Anchor links are used to navigate within the same webpage. They are particularly useful for long articles or pages, allowing users to jump to specific sections effortlessly. From an SEO perspective, well-structured internal links contribute to a better user experience and help search engines understand the content hierarchy of a website. For example:

    <a href="#section1">Go to Section 1</a>
<h2 id="section1">Section 1 Content</h2>
  2. Absolute Links:

    3. Absolute links contain the complete URL, including the protocol (http/https) and domain name. These links are commonly used when connecting to external resources or pages. For example:

    <a href="https://www.somedomain.com">Visit Some Website</a>
  3. Relative Links:

    4. Relative links specify the path to the linked resource relative to the current page's location. They are commonly used when linking to pages within the same website. For example:

    <a href="/page2.html">Go to Page 2</a>
  4. Mailto Links:

    5. Mailto links open the default email client with a pre-filled email address. They are often used for contact information. For example:

    <a href="mailto:contact@some-email.com">Contact Us</a>
HTML Link Attributes
  1. Target Attribute:

    2. The target attribute determines how the linked resource will open. Common values include _blank (opens in a new tab/window) and _self (opens in the same tab/window). For example:

    <a href="https://www.some-domain.com" target="_blank">Visit Some Website</a>
  2. Title Attribute:

    3. The title attribute provides extra information about the linked resource. Search engines may use this information to understand the context of the link. For example:

    <a href="https://www.some-domain.com" title="About Some">Visit Some Website</a>
Example

Here's an example of an image with a link. It is done by wrapping the <img> tag within the <a> tag:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Link with Image Example</title>
</head>
<body>

  <h1>Link with Image Example</h1>

  <a href="https://www.some-domain.com" target="_blank">
    <img src="some-image.png" alt="Visit example website">
  </a>

  <p>Click on the image to explore our website.</p>

</body>
</html>