HTML Hyperlinks

This post covers something I meet for the first time or have forgotten about HTML hyperlinks after reading Creating hyperlinks on MDN.

It’s the hyperlinks that makes the Web a Web.

Document Fragments

It is 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. It normally makes sense to link to a specific heading.

To link to that specific id, you’d include it at the end of the URL, preceded by a hash symbol.

You can even use the document fragment reference on its own to link to another part of the same document.

Best Practice

  • Add title attribute to your links, this is intended to contain supplementary useful information about the link, such as what kind of information the page contains, or things to be aware of.
  • Don’t say “link” or “links to” in the link text — it’s just noise. Screen readers tell people there’s a link. Visual users will also know there’s a link, because links are generally styled in a different colour and underlined (this convention generally shouldn’t be broken, as users are so used to it.)

    1
    2
    3
    4
    <p>
    <a>The <em>best</em> website</a>
    </p>
    <p><a>Click here</a> to visit the <em>worst</em> website</p>

    Output:

    The best website

    Click here to visit the worst website

  • Don’t repeat the URL as part of the link text — URLs look ugly, and sound even uglier when a screen reader reads them out letter by letter.

  • Keep your link label as short as possible — long links especially annoy screen reader users, who have to hear the whole thing read out.
  • Minimize instances where multiple copies of the same text are linked to different places. This can cause problems for screenreader users, who will often bring up a list of the links out of context — several links all labelled “click here”, “click here”, “click here” would be confusing.

Linking to Non-HTML Resources — Leave Clear Signposts

When linking to a resource that will be downloaded (like a PDF or Word document) or streamed (like video or audio) or has another potentially unexpected effect (opens a popup window, or loads a Flash movie), you should add clear wording to reduce any confusion. It can be quite annoying for example:

  • If you are on a low bandwidth connection, click a link and then a multiple megabyte download starts unexpectedly.
  • If you haven’t got the Flash player installed, click a link and then suddenly get taken to a page that requires Flash.

Best practice examples:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<p>
<a href="http://www.example.com/large-report.pdf">
Download the sales report (PDF, 10MB)
</a>
</p>

<p>
<a href="http://www.example.com/video-stream/" target="_blank">
Watch the video (stream opens in separate tab, HD quality)
</a>
</p>

<p>
<a href="http://www.example.com/car-game">
Play the car game (requires Flash)
</a>
</p>

Use the Download Attribute When Linking to a Download

Use the download attribute to provide a default saved filename.

1
2
3
4
5
6
<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>

Email

To specify details in email sending:

1
2
3
4
5
<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>

Use ? to seperate the main URL from the field values, use & to seperate each field. cc stands for Carbon Copy while bcc stand for Blind Carbon Copy.