MakeW3web

HTML links

HTML links, also known as hyperlinks, allow users to navigate from one web page to another, access resources, or perform actions such as sending emails. The `<a>` element, short for "anchor", is used to create hyperlinks in HTML.

Here are some concepts related to HTML links, along with examples:

  1. Basic hyperlink: To create a basic hyperlink, you need to set the `href` attribute of the `<a>` element to the URL (Uniform Resource Locator) of the destination page or resource.

Example:

<a href="https://www.example.com">Visit Example.com</a>
  1. Relative and absolute URLs: You can use both relative and absolute URLs in the `href` attribute of a hyperlink. Absolute URLs include the full web address, including the protocol (e.g., `https://`). Relative URLs are shorter and reference a destination page or resource within the same website.

Example:

<!-- Absolute URL -->
<a href="https://www.example.com/about.html">About Us</a>

<!-- Relative URL -->
<a href="about.html">About Us</a>
  1. Opening a link in a new tab or window: To open a hyperlink in a new tab or window, you can set the `target` attribute of the `<a>` element to `_blank`.

Example:

<a href="https://www.example.com" target="_blank">Visit Example.com in a new tab</a>
  1. Linking to an email address: To create a hyperlink that opens the user's email client with a pre-filled recipient, you can use the `mailto`: protocol in the `href` attribute.

Example:

<a href="mailto:example@example.com">Email Us</a>
  1. Linking to a specific part of a page: You can create links that navigate to a specific part of a web page by using the `id` attribute and the `#` symbol in the `href` attribute.

Example:

<!-- Create a link to the "section2" part of the page -->
<a href="#section2">Go to Section 2</a>

<!-- Add an id attribute to the target element -->
<h2 id="section2">Section 2</h2>

Here's an example that combines different types of hyperlinks:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Links Example</title>
</head>
<body>
    <h1>Using HTML Links</h1>
    
    <p><a href="https://www.example.com">Visit Example.com</a></p>
    
    <p><a href="about.html">Go to the About page (relative URL)</a></p>
    
    <p><a href="https://www.example.com/contact.html" target="_blank">Open the Contact page in a new tab (absolute URL)</a></p>
    
    <p><a href="mailto:example@example.com">Email Us</a></p>
    
    <p><a href="https://www.example.com/documents/report.pdf">Download the report (link to a PDF)</a></p>
    
    <p><a href="#section2">Go to Section 2</a></p>
    
    <h2 id="section2">Section 2</h2>
</body>
</html>

By using the `<a>` element and its attributes, you can create various types of links that allow users to navigate between web pages, access resources, and perform actions. Links are a fundamental part of the web, enabling users to explore and interact with content across different websites and resources.

Was this page helpful?