How To Create An Email Link In HTML

7 Ultimate steps to create an Email link in HTML

Hello friends, earlier I had discussed what is a blog and what are its benefits?, How to set up a blog in Google Blogger?, Blogging Niche, Free, and Premium Template. While writing these posts I felt the need to contact my visitors under certain circumstances. My visitors can contact me either through the contact form on my site or by knowing my email directly, but all these things need to be borne and I think users used to be very lazy. So, I decided to create an email link directly in my HTML code, anywhere I need to contact my visitors, I simply put a clickable email link that will bring users directly to their device email service.

How to create an email link inn HTML

Being a blogger, you may face similar situations. So in this post, I will explain you how I created an Email link with or without a specific Subject in HTML

Visitors to your website would always have a better experience if they have anything that allows them to quickly connect with you about any issues or questions they might have. This is unquestionably a useful feature for every website. Let's go over how to add an email link to a web page using a simple HTML code snippet step by step.

Steps
how to create an email link in HTML - step1

#1. For any type of link in HTML we need to write anchor tag. So here for email link also we need to write anchor tag <a href= in your HTML code block. Anchor tag gemerally tells the browser that the following text or item is a link.

how to create an email link in HTML - step2

#2. Now after anchor tag you need to tell the browser that this link is to an email address rather than a web page. For this write mailto after anchor tag.

how to create an email link in HTML - step3

#3. Now in third step write users Email-id. A well formatted command upto now would look like < a href="mailto:support@blogearns.com" .

how to create an email link in HTML - step4

#4. The fourth step is purely optional ie. whether you want to add a specific subject for the email or not is totally upto you. But I need to expalin this also, So Add a specific subject-line(Optional). If you want to add a specific subject automatically type a question mark after the users email address, followed by the word "subject", followed by an equals sign, and then add the specific subject after "equal sign". The whole steps so-far would look like <a href="mailto:support@blogearns.com?subject=Subject text here"

how to create an email link in HTML - step5

#5. Now add a closing bracket >. Till now our HTML commands tell the browser which email address to link to and to add a subject. The closing bracket ">" at the end tells the browser that no more commands to execute when the link is clicked.

how to create an email link in HTML - step6

#6. Now after the closing bracket Write the visible link text this can be a word, an image, a phrase, or even a duplicate the user's email address to which the email is being sent to.

how to create an email link in HTML - step7

#7. Now it's time to close the anchor tag </a>. This closes the HTML command. In HTML every opening tag must have a closing tag this represent better coding practice. So-far we wrote command <a href="mailto:support@blogearns.com?subject=Subject text here">Mail ME!</a>

Don't forget to save the file and open the HTML file in your browser and check the result now.

Summery of the post
Email without Subject <a href="mailto:support@blogearns.com"> Mail me here </a>
Email with subject <a href="mailto:support@blogearns.com?subject=Subject text here"> Mail me here </a>
Source code Download

Let's see this in action in the video below

Thanks for reading How to create an Email link in HTML post. I hope you guys understood this topic very well now. For any question regarding this write us in the comments or you can send me an email at karunasingh@blogearns.com.
Karuna Singh

Greetings to everyone. I am Karuna Singh, I am a writer and blogger since 2018. I have written 250+ articles and generated targeted traffic. Through this blog blogEarns, I want to help many fellow bloggers at every stage of their blogging journey and create a passive income stream from their blog.

Thank you for your valuable comments. We like to hear from you.

Post a Comment (0)
Previous Post Next Post