Creating an Email Link in HTML: 8 Steps (with Pictures)

Table of contents:

Creating an Email Link in HTML: 8 Steps (with Pictures)
Creating an Email Link in HTML: 8 Steps (with Pictures)
Anonim

Visitors to your website like to be able to email questions and feedback to you as easily as possible. This is an absolute plus for any website. That's why we explain step-by-step how to put a mail link on your site with a simple piece of HTML code.

Steps

Create an Email Link in HTML Step 1

Step 1. Type the anchor tag <a href= in your HTML document

The '<a href=' attribute is the start of the link in your HTML document. The '<a href=' tag communicates to the internet browser that a link will now follow.

Your HTML code should be complete up to this point

Create an Email Link in HTML Step 2

Step 2. Type 'mailto:

after the '=' sign. The browser now knows that there is no web address, but an email address.

Create an Email Link in HTML Step 3

Step 3. Then type the email address where the email should be sent

An example of a good piece of code is: <a href='mailto:[email protected]'.

Create an Email Link in HTML Step 4

Step 4. Add a fixed subject line if necessary

To do this, first type a question mark (?) after the email address, followed by the word 'subject' (without the quotes). After this comes another '=' sign, followed by the subject.

  • If you choose a subject line, your code will look something like this: <a href='mailto:[email protected]?subject=subject text'
  • Use only alphabetical characters in your subject line. When you use numbers or other characters, your browser gets confused and thinks it needs to execute other commands.
  • Not many developers fill in the subject line using the 'mailto' syntax. However, this technique is often used when the mail is forwarded to an internal server where bots handle the mail further. The e-mail can then be processed automatically thanks to the subject line.
  • With approximately the same syntax you add text in the mail ('body') or a recipient for the 'cc' or 'bcc'. Make sure you use a question mark after 'body', 'cc', or 'bcc'. After this comes another '=' sign followed by the text.
Create an Email Link in HTML Step 5

Step 5. Type > before the closing parenthesis

The piece of code so far tells the browser which e-mail address is being linked to and what the other attributes of the mail, if any, are. The closing parenthesis '>' tells the browser that this is the end of the commands that are executed when the link is clicked.

Create an Email Link in HTML Step 6

Step 6. Type the text of the link

This is the text the user clicks to activate the link. You write this after the closing parenthesis. Type a word or phrase here, or simply copy the email address where the email will go. Very often you will see 'here' or 'send an email' in this place.

Create an Email Link in HTML Step 7

Step 7. Type after the link text

This ends the HTML command. You should always close an HTML anchor tag, otherwise the browser will think the rest of the document belongs to the command. Then it doesn't work properly.

The whole HTML email link looks something like this: Click here to send us an email

Create an Email Link in HTML Step 8

Step 8. Continue with the rest of your HTML document

Save your work and optionally continue with your other HTML code.

Tips

  • The anchor HTML tag is used in several ways. When you learn this, you can use this tag as effectively as possible.
  • Anchor tags must be placed within the 'body' (…) element of the HTML document. You cause errors when you place the tag in another section. For example, the visitor gets error messages or his or her mail program is opened immediately without your website ever being loaded.

Warnings

  • In connection with spamming, it is not without risk to put an e-mail address on your website. There are tons of people who run programs to collect email addresses especially for junk mail. Anyone who posts their email address on a public website should therefore set up spam filters or take other anti-spam measures to limit junk mail.
  • Please check the recipient's name before sending the email.
  • If users don't have a mail program on their computer, they can't send you mail.

Popular by topic