Learn Email Links In Html

Hello!! Welcome to flower brackets blog. In this post we are going to learn email links in html.

We are going to see how we can include email links in our web pages.

Example : learn email links in html

I have an html document here,

<!DOCTYPE html>
<title>Learn Email Links In Html</title>
<a href = "mailto:flowerbrackets@yahoo.com?subject=Great Blog!!&body=Loved it!">
<p>Subscribe by email</p>

I am just going to jump into the body section and in the body section I have opening paragraph tag and closing paragraph tag.

In between I have the text “Subscribe by email”. Around this text I have wrapped around the anchor tag and which has the value “mailto” colon then there is an email address.

Let’s say you have a website and you want to have a link on the website and if user click on that link then their default mail program opens up.

So that it could be Microsoft outlook or it could be Thunderbird or whatever and that program opens up.

Also Read – Learn The Big And Small Tags In Html

Then using that program if they have to configure it and all they can send you emails.

Now this is not very popular actually. Because you know very few people use mail programs and for those who don’t do this is really not useful.

But for those who do this is again very convenient as well. So you could use it or you could not use it. It depends on your users really.

So mailto and then a colon and then email address to which you want the mail to be sent.

Let’s say I want the email to be sent to “flowerbrackets@yahoo.com” and you could just finish the tag there by having your closing quotation mark.

But if suppose you also want a subject line for the mail that you receive on this email address and if you also want some text in the body of the mail.

Then you have to include the text as well. So you type in the words subject after the question mark following the email address.

And then you use the assignment operator or the equal to symbol and write the subject.

You don’t have to put it in single quotes or double quotes. You just have to type it in the same set of double quotation marks as you have used for the value of the href attribute.

Just type in whatever subject you want. I have typed “great” space “blog” and then there’s an exclamation symbol.

The text that I want in the body is “Loved it!” and again I have assigned this value using the assignment operator that you see above in html document.

Also I have included in the ampersand between the subject line and body line. This is important.

This is part of html syntax. It’s a requirement. So you have subject equals value and then the ampersand symbol and then body equals value and then you have the closing double quotation mark of the value.

You know that you have assigned to the “href” attribute and then I have closed the anchor tag after closing the paragraph tag.

I will save above html file and when I open it in google chrome it looks like this,

Learn Email Links In Html

This is how it looks. You can see link and if I click on it then (I actually use Microsoft outlook) you see this,

Learn Email Links In Html

There you go when I clicked on it this opened up and the email address is already there in the “To..” field which is “flowerbrackets@yahoo.com”.

The subject line is already filled “Great Blog!!” and the text is there in the body of the mail “Loved it!”.


So this is how email links work in html. I hope you understood the concept and found this post interesting. You may subscribe to my blog flower brackets if you haven’t already.

Related Posts