HTML - Creating hyperlinks
Tags: mdn, html, programming
Published: 2022-05-16 13:16:55

## Creating hyperlinks

#### `<a> element`

A basic link is created by wrapping the text or other content inside an `<a>` element and using the `href`(hypertext Reference) attribute that contains the web address.

```html
<p>I'm creating a link to <a href="www.google.com">the Google homepage</a>.</p>
```

This gives us the following result:

<p>I'm creating a link to
<a href="www.google.com">the Google
homepage</a>.
</p>

- <mark>`title` attribute</mark>
  The title contains additional information about the link, such as which kind of information the page contains, or things to be aware of on the web site. <mark>Hovering over the link displays the title.</mark>

  ```html
  <p>
    I'm creating a link to
    <a href="www.google.com" title="The best place for searching information"
      >the Google homepage</a
    >.
  </p>
  ```

    <p>I'm creating a link to <a href="www.google.com" title="The best place for searching information">the Google homepage</a>.</p>

- <mark>`download` attribute</mark>
  <mark>When you are linking to a resource that's to be downloaded rather than opened in the browser, you can use the `download` attribute to provide a default save filename.</mark> Here's an example with a download link to the latest Windows version of Firefox:

  ```html
  <a
    href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
    download="firefox-latest-64bit-installer.exe"
  >
    Download Latest Firefox for Windows (64-bit) (English, US)
  </a>
  ```

  This gives us the following result:
  <a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US" download="firefox-latest-64bit-installer.exe">Download Latest Firefox for Windows (64-bit) (English, US)</a>

* <mark>E-mail links</mark>
  It's possible to create links or buttons that, when clicked, open a new outgoing email message rather than linking to a resource or page. This is done using the `<a>` element and the `mailto:` URL scheme. In its most basic and commonly used form, a `mailto:` link indicates the email address of the intended recipient.

  ```html
  <a href="mailto:nowhere@gmail.com">Send email to nowhere</a>
  ```

  This results in a link that looks like this: <a href="mailto:nowhere@gmail.com">Send email to nowhere</a>
  In fact, the email address is optional. If you omit it and your `href` is "mailto:", a new outgoing email window will be opened by the user's email client with no destination address.
  Specifying details
  In addition to the email address, you can provide other information. The most commonly used of these are "subject", "cc", and "body".

  ```html
  <a
    href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email"
  >
    Send mail with cc, bcc, subject and body
  </a>
  ```

  `%20` represents space.

#### <mark>Document fragments</mark>

It's possible to link to a specific part of an HTML document, known as a `document fragment`, rather than just to the top of the document. To do this you first have to assign an `id` attribute to the element you want to link to. To link to that specific `id`, you'd include it at the end of the URL, preceded by a hash symbol(`#`).

```html
<h1 id="h1">I am h1</h1>
<a href="#h1">Heading to h1</a>
```