Adding a 'share by email' link to a website

User-friendly with visual cue

Enhance usability with a clickable email icon. Incorporate an img tag with alternative text for accessibility. Don't forget Rosie, the screen reader! 😄

<a href="mailto:?subject=Interesting%20Article&body=Check%20out%20this:%20URL_HERE">
  <img src="email-icon.png" alt="Share by Email" /> <!-- "An eye for an eye, an email for an email" 😜 -->
</a>


Pick an icon matching your site's aesthetics. Size does matter, adjust accordingly! 📏

SEO and personalization

Craft your subject line and message body to provide an apt presentation of your content. Add rel="nofollow noreferrer" to follow SEO best practices. Robots need love too! 🤖

<a href="mailto:?subject=Interesting%20Read!&body=Thought%20you%20might%20like%20this:%20URL_HERE" 
   rel="nofollow noreferrer">Email this Page</a>


Functionality test

Don't forget to test! Make sure the mailto: link triggers the default email client with prefilled information. Some email clients might give you a curveball; be ready with cross-browser testing. 🚀

<!-- And it's a home run! Or maybe it's cricket? I get my sports confused 😁 -->


User experience and accessibility

Ensure alternatives for visually impaired users. Alternative text for the email icon is a small step for developers, but a giant leap for accessibility. 🦾 Warn users of possible pop-up blockers potentially hindering the mailto: action. Not everyone appreciates unexpected pop-ups! 😓

Advanced personalization

Use HTML entities to encode special characters; they can be quite the characters messing the link. Special characters: the uninvited party crashers! 🎊

<a href="mailto:?subject=Look%20what%20I%20found!&body=Hey!%20You'd%20absolutely%20love%20this:%20URL_HERE">Share via Email</a>


With advanced personalization, the email's body can hold much more room for creativity!