Things you can do with a simple anchor tag
HTML
—
2021-02-13
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>
