Just Frontend Things

Things you can do with a simple anchor tag



The <a> tag can be used for more than just linking to other pages, you can for example start downloading a file or open an email application.

Use mailto: to create a link which will open the user's email application of choice, pre-filled with the provided email address. You can also add a subject, CC/BCC and body text.

<a href="mailto:hello@example.com">Send an email</a> // With subject <a href="mailto:hello@example.com?subject=Example subject">Send an email</a> // With CC and BCC <a href="mailto:hello@example.com?cc=copy@example.com&bcc=blindcopy@example.com">Send an email</a> // With body text <a href="mailto:hello@example.com?body=Example body">Send an email</a>

By adding tel: inside an anchor tag a click by your user should open the device's phone application. While many devices will recognize phone numbers and link them anyway, this should cover up in those cases it wont.

<a href="tel:+123456789">Make a call</a>

You can also open the text message application by using sms:, with a possiblity to add a pre-filled body text.

<a href="sms:+123456789">Send a text message</a> // With body text <a href="sms:+123456789?body=Example text">Send a text message</a>

The download will start a download of the specified file. You can also rename the file by adding a string as the value of the download attribute.

<a href="/public/example-file.pdf" download>Download PDF</a> // Name the downloaded file <a href="/public/example-file.pdf" download="important-file">Download PDF</a>

Add target="_blank" to open the link in a new window/tab automatically. Also remember to add rel="noopener noreferrer" at the same time to prevent a phishing attack vulnerability.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Open link</a>