You can set hyperlinks to e-mail addresses. Before I show you how this works, here are a few tips. Personally, I'm not a fan of these e-mail links. Forms are more suitable. If no e-mail client is installed or not configured for the current user, the e-mail links will not work properly. Ultimately, however, you must of course decide for yourself whether you want to use e-mail links or forms. Detailed information on forms will of course follow later in this series.
If an email link is clicked, an email window usually opens for the visitor.
However, this is not guaranteed. The user must actually have made the appropriate settings. Once again: the e-mail link solution is therefore not ideal. Nevertheless, you may of course need such a link from time to time. Here is the syntax:
<a href="mailto:kontakt@psd-tutorials.de">kontakt@psd-tutorials.de</a>
As you can see, this is initially a classic hyperlink.
However, the decisive factor here is what is assigned to the href attribute as a value. The link target always begins with mailto, followed by a colon. This is followed by the desired email address.
Incidentally, you should be careful what you enter as the link text for email links. It is best to always enter the e-mail address again. This way, even users who do not click on the hyperlink or for whom no e-mail client opens can copy the address and still send you an e-mail.
If you define e-mail links, you also have more options than just specifying the recipient address. Please note that the things described here are not HTML standard, but are largely supported by browsers.
First of all, you can specify a CC recipient directly.
<a href="mailto:kontakt@psd-tutorials.de?cc=info@psd-tutorials.de">kontakt@psd-tutorials.de</a>
Note a question mark after the actual recipient address. This is followed by CC and an equals sign, followed by the address to which a visible email copy should be sent. As an alternative to CC, you can also enter bcc. In this case, the specified address is copied into the bcc field and the e-mail is sent to this address as an invisible copy.
If you want to specify a predefined subject, this is also possible.
<a href="mailto:kontakt@psd-tutorials.de?subject=Post%20an%20PSD-Tutorials.de">kontakt@psd-tutorials.de</a>
Write the desired subject after subject. To ensure that the whole thing actually works, you should not use any spaces in the subject or mask them using the character string %20.
If you wish, you can also enter the email text or part of it. The parameter body is used for this.
<a href="mailto:kontakt@psd-tutorials.de?body=Hallo%20PSD-Tutorials.de">kontakt@psd-tutorials.de</a>
The same things that have already been described in connection with subject apply here.
Offer files for download
If you want to offer files for download on your website, you can of course do so. (I will leave the legal aspects aside at this point). This is very easy to implement. You define a hyperlink and specify the corresponding file as the link target.
<a href="book.zip">The downloads for the book</a>
In this case, the link target is a zip file. If you click on the hyperlink, the browser will normally offer a download dialog or download the file directly.
You can then use this to download the file. Ultimately, however, the browsers decide how to proceed with the specified files.
Browsers normally display PDF files directly when the corresponding link is clicked. In most cases, this is of course perfectly fine. However, it may well be that you also want to offer PDF files for download. (Of course, users could click on the link with the right mouse button and download the file. However, you should not necessarily assume that all website visitors are aware of this possibility).
In HTML5, you can actually mark hyperlinks as download links. The download attribute is used for this.
<a href="ebook.pdf" download>Download</a>
A link with this attribute will download the file, provided that the browser supports the attribute.
By default, the file is saved under the name it has in the original. This is also usually fine. However, it may well be that you want to assign a different name to the downloaded file. This is also possible without any problems. The download attribute is used again. This attribute is assigned the desired name as a value.
<a href="ebook.pdf" download="dk.pdf">Download</a>
If the browser supports this option, it will use the name assigned to the download attribute when downloading.
Specifying logical relationships
An attribute that can be very interesting in connection with the definition of hyperlinks is rel. This is because this attribute can be used to specify the logical relationship between the hyperlink and the link target. Browsers could use this information, for example, to display corresponding icons when hovering over the links with the mouse. However, they do not do this at the moment. The rel attribute therefore has no visible effect.
<a href="two.htm" rel="next">further</a>
The following values are available for the rel attribute
- alternate - Link to an alternative version of the document.
- author - Link to the author of the document.
- bookmark - Permanent link of the document that can be used as a bookmark.
- help - Link to a help file.
- license - Link to the copyright information.
- next - Link to the next document.
- nofollow - This can be used to specify that search engines should not follow the link.
- noreferrer - The browser does not send an HTTP referrer header.
- prefetch - The document should be loaded into the cache.
- prev - Link to the previous document.
- search - Link to a search tool for the document.
- tag - A keyword that describes the document.
In this way, the relationship between the reference target and hyperlinks can be described in more detail.
