HTML a href Download Attribute

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.