Subscribe

HTML a href Download Attribute

โœ๏ธ

Did you know you can use the download attribute on an a href?

24 May, 2020 ยท 1 min read

Did you know the a href element comes with a download attribute?

We can put this download attribute on our a href

HTML Structure

<a
  href="https://images.unsplash.com/photo-1589923189710-aa8f494ab9ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
  download
  >Download here</a
>

This will download the image directly.

We can also pass a value to the download attribute; this will be the name that the downloaded file will have.

<a
  href="https://images.unsplash.com/photo-1589923189710-aa8f494ab9ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
  download="flowers"
  >Download here</a
>

Unfortunately, this does not work 100% in Codepen but feel free to get the code from Codepen.

See the Pen HTML a href Download Attribute by Chris Bongers (@rebelchris) on CodePen.

Browser Support

The download attribute doesn't work in IE or Opera.

Download

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

Moving from GIF to video format

27 Jun, 2021 ยท 3 min read

Moving from GIF to video format

Common HTML Element Types

3 May, 2021 ยท 4 min read

Common HTML Element Types

Join 1372 devs and subscribe to my newsletter