Tip: Customize the names of downloadable files

Angelos Chalaris · Webdev, HTML, Browser · Jun 12, 2021

HTML5 introduced a variety of convenient features that many of us use every day. As downloadable links aren't something I work with very often, I recently found out that you can use the download attribute on an <a> element for much more than just making it trigger a download. In fact, you can pass it a string value that will act as the name of the downloadable file, effectively allowing you to customize its name:

<!-- The downloaded file will be named 'June-2020.csv' -->
<a href="/data/2020/06/report.csv" download="June-2020.csv">June 2020</a>

Recommended snippets & collections

  • Tips & Tricks

    Snippet collection

    A collection of quick tips and tricks to level up your coding skills one step at a time.

  • Did you know you can use a native HTML attribute to add lazy load to images? Learn all you need to know with this quick tip.

  • Resource prefetching is a great technique to improve perceived page speed on your website and one that requires little to no effort. Learn how to use it today.

  • Did you know there's an easy way to create a descending list of numbered items with pure HTML? Learn how with this handy tip.