New HTML5 Attributes for Hyperlinks: download, media, and ping

Hyperlinks have been around since the dawn of the Web. But with the dawn of HTML5, three new attributes have been added to the humble <a> tag to keep existing attributes like href, rel, and others company.

The new attributes are: download, media, and ping. In this article, we’ll take a quick look at what these new attributes are, and how they can be used once browser support improves.

The download Attribute

The download attribute is new in HTML5. It supplements the existing href attribute by telling the browser that the resource the href points to should be downloaded directly, instead of visited (which could happen with a file that the browser can open, like a PDF). The value of the download attribute is used for the name of the file that is downloaded.

The download attribute can be the same as the file referenced in the href attribute, but it doesn’t have to be. Being able to have different values for href and download can come in handy. For example, you might need to generate unique files dynamically on the server for monthly or yearly reports on a per user basis, but still present the user with a meaningful filename for when they download a file. Because the download attribute can be different to the href, this is pretty easy to do:

<a href="files/eid987jdien2i.pdf"
   download="Monthly Report for March 2014.pdf">Download March 2014 Report</a>

When a user clicks the download link, they’ll download Monthly Report for March 2014.pdf rather than the endearingly named eid987jdien2i.pdf.

In theory there aren’t any restrictions on what you can enter for the download attribute. In practice this isn’t quite true, as you’ll need to bear in mind the restrictions operating systems impose on which characters can’t be used in filenames — such as the backslash ‘\’ on Windows, or the forward slash ‘/’ on *nix and OS X — and that the browser may adjust the download attribute’s value accordingly. It’s also worth noting that the download attribute’s value can be overridden by the Content-Disposition HTTP header’s filename parameter.

The download attribute can be used with blob and data URI’s, which makes it useful where users need to be able to save dynamic content they’ve created through your web application (e.g. drawing applications).

Typically you would set the href attribute to the blob or data URI, then, as with the monthly report example earlier, set the download attribute to a more meaningful file name. The following example shows how you can do this when using the Canvas API.

Here is our HTML:

<section>
    <canvas id="c" width="400" height="400"></canvas>
    <footer>
        <a id="download-canvas" href="#">Download</a>
    </footer>
</section>

And the JavaScript:

(function() {
    var canvas = document.getElementById('c'),
        cxt = canvas.getContext('2d'),
        downloadLink = document.getElementById('download-canvas');

    cxt.fillRect(100, 100, 200, 200);
    cxt.clearRect(150, 150, 100, 100);

    downloadLink.href = canvas.toDataURL();
    downloadLink.download = "squares.png";
})();

And here’s a live demo:

JS Bin

Note that in a real-world application, it is likely that the download attribute would not be hard coded, but would instead be added after input by the user ahead of downloading the image.

Browser Support for the download Attribute

While you may be thinking that the download attribute heralds the end of you having to implement file download logic on the server, unfortunately it isn’t fully supported across all major browsers. At the time of writing, Safari and IE (both desktop and mobile) do not support this attribute.

The media Attribute

If you’ve worked with CSS, then you’ve come across the media attribute before, and you’ve probably used it on the link tag. In HTML5 the media attribute can now also be applied to a hyperlink. It works in the same way, and its value can be any valid media query.

When applied to the <a> tag, the media attribute is used in a purely advisory capacity. It could be useful, for example, in situations where you provide device-specific downloads, such as for desktop and mobile wallpapers:

<ul>
    <li>
        <a href="download/320" media="min-width: 320px">
            <img src="files/320.jpg" alt="">
        </a>
    </li>
    <li>
        <a href="download/1382" media="min-width: 1382px">
            <img src="files/1382.jpg" alt="">
        </a>
    </li>
</ul>

It could also be applied to those ‘Print’ links you often see on long, multi-page articles, where you follow the link to get the whole article on one page formatted for printing:

<footer>
    <p>Page 1 of 6 <a href="/print/1234" media="print">Print All</a></p>
</footer>

Browser Support for the media Attribute

As of this writing, it doesn’t seem that there is much support, if any, for this attribute on hyperlinks. It’s listed as an HTML5 attribute on MDN’s HTML reference but it’s not listed as a valid attribute on the WHATWG spec or on W3C.

The ping Attribute

Finally, let’s look at the new ping attribute. This attribute takes a space-separated list of URL’s that are to be pinged should the user successfully navigate to the href of the hyperlink. Or, to put it another way, it provides native support for click and link tracking:

<ul>
    <li>
        <a href="/products/blaster" ping="/track/products/blaster">Blasters</a>
    </li>
    <li>
        <a href="/products/light-sabres" ping="/track/products/light-sabres">Light sabres (choice of colours)</a>
    </li>
</ul>

However, there’s a word of warning from the WHATWG spec:

The ping attribute is redundant with pre-existing technologies like HTTP redirects and JavaScript in allowing Web pages to track which off-site links are most popular or allowing advertisers to track click-through rates.

So, if the ping attribute is redundant with pre-existing technologies, what’s the point of it? Well, the idea is that it gives users greater transparency in seeing what other requests may be made as a result of them clicking on a certain link. It’s this greater transparency that is why authors are being encouraged to use this attribute.

It’s been suggested that browsers should allow users to configure how ping notifications are handled e.g. by blocking some URL’s, only allow same origin URL’s, or disabling ping altogether. Browsers could also display the ping URL alongside the link location in the browser’s status bar.

Browser Support for the ping Attribute

Current browser support for ping is mixed. Safari and Chrome do support it, Firefox has support for it but by default it is disabled, and IE and Opera do not support it. It’s also worth noting that the ping attribute is not in the current W3C HTML5 draft spec, but it is in the WHATWG HTML5 spec.

Summary

So that’s 3 new attributes that were added to the <a> element in HTML5 — download, media, and ping.

As you can see, when these gain better browser support, they will be quite useful and have lots of potential use cases.

If you can think of any unique ways these can be used, we’d love to hear your thoughts in the comments.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.joezimjs.com Joe Zimmerman

    The author’s bio says “talking photos” instead of “taking photos”.

    • ianoxley

      Good spot – typo fixed :)

    • MJ

      Imagine if you could have not only talking photos, but moving photos aswell! Wouldn’t that be great ;o)

      • dgiebe

        How about videos? ;)

  • http://webplatformdaily.org Šime Vidas

    Hm, the download attribute demo does not work in Firefox/Windows for some reason.

    • LouisLazaris

      Šime Vidas

      Hmm… it looks like that’s a CodePen bug, because here is the exact same code in JS Bin:

      http://jsbin.com/buhoreli/1/edit

      And it works fine in Firefox on Windows for me. I will update the article to use the JS Bin version instead, and I’ll check with the guys at CodePen to see if that is in fact a bug. Thanks!

  • Jacek Smolak

    This is neat, thanks!

  • boen_robot

    About the media attribute… if a browser supports it, what is it supposed to do when the anchor does NOT match the given media query? Hide the link (and not process the contents within it)? If so, wouldn’t the “print” example be completely out of place? I mean, you have the “print” link only appearing when the media is ALREADY print, i.e. appear on paper, but not on screen.

    • ianoxley

      The media attribute on an anchor tag is advisory only, so isn’t shown / hidden based on the media query. It’is used to describe for which media the href the anchor points to was designed for. So, for the ‘print all’ link, it would be used to indicate the ‘print all’ page was designed for printing.

      Hope that helps.

      • http://www.svachon.com/ Steven Vachon

        Should be in CSS. Redundant attribute, in my opinion.

  • jokeyrhyme

    The main attraction for the “ping” attribute is that network transactions on mobile are high-latency. This means that going through 3 redirects actually adds 3 unnecessary seconds to a hyperlink, or worse. Good use of “ping” means that the user gets an optimal experience and the analytics tracker still gets the required data.

  • http://camgould.com/ Cam

    Nice. The download and ping attributes seem especially useful to me.

  • Christian Heilmann

    The “download canvas as PNG” example is kind of contrived. A link pointing to “#” is really JavaScript dependent. Might make more sense to create it with JS or use a button.

  • http://www.mathewporter.co.uk/ Mathew Porter

    We adopted the use of the download attribute a while back when we first started using html5 on projects, it definitely gives a better experience for users, especially when files are supported to open in browser, a personal pet hate of mine.

  • Facundo Chambo

    Is there any way to set wether I want to download the file or open it inline?

    In HTML 4 the server should set ‘Content-Disposition: inline, filename=name.pdf’ or’Content-Disposition: attachment, filename=name.pdf’

    Is any way to use the download attribute to decide wether to open or download it?

  • http://www.mathewporter.co.uk/ Mathew Porter

    The download attribute is great for triggering the download action and again is another accessible piece of markup.

  • Frann Leach

    I tried adding the download attribute to some pdf links, but it tried to download something called “viewer.html” rather than “filename.pdf”. This is on Chrome 35.0.1916.153 running under Ubuntu 12.04