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 📖

Trying out native dialog modals

8 Aug, 2022 · 3 min read

Trying out native dialog modals

HTML fallback images on error

6 Aug, 2022 · 2 min read

HTML fallback images on error

Join 1832 devs and subscribe to my newsletter