HTML - Creating hyperlinks

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.

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

This gives us the following result:

I'm creating a link to the Google homepage.

• title attribute 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. Hovering over the link displays the title.

  <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>

• download attribute 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. Here's an example with a download link to the latest Windows version of Firefox:

  <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:
Download Latest Firefox for Windows (64-bit) (English, US)

• E-mail links 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.

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

This results in a link that looks like this: Send email to nowhere
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".

  <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.

Document fragments

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(#).

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