Skip to content
HTML Course

Email link

In HTML, it’s possible to create links that will open up a user’s default email program with the To: field already filled in.

Steps

After the link to the last section, create a new line and type a and press Tab to generate the anchor tags.

<a href="#last-section">Go to last section</a>
<a href=""></a>

Type the phrase Send email to our help team in between the tags. This will be our link text.

<a href="">Send email to our help team</a>

If you check the preview, you should see a new link appear.

Add value

For the href value, type mailto:. The mailto: part is what makes the computer open up your default program.

<a href="mailto:">Send email to our help team</a>

To get this link to work properly, you will have to click on the hamburger menu button and select Open in Browser. It won’t work in the preview inside VS Code.

Once the page is open in your browser, try clicking on the link to open your default email program. It should open up your default email program, but none of the fields are filled in.

Add an email address

Try adding help@example.com after mailto:.

<a href="mailto:help@example.com">Send email to our help team</a>

Now try clicking on the link again in the preview. It should open up a new email window, but this time the To: field should be filled in with help@example.com.

Final code

<a href="about.html">Internal link</a>
<a href="https://example.com/" target="_blank">External link</a>
<a href="#last-section">Go to last section</a>
<a href="mailto:help@example.com">Send email to our help team</a>


<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<h2 id="">Last section</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>


<a href="#top">Back to top</a>