A small javascript file to find email addresses in web pages and turn them into clickable <a href=mailto.../> links.
It is common to avoid using <a href=mailto...> in web pages to prevent spammers from harvesting your email address. If you put your email address in plain text on the page and add markup to identify it, the javascript file will add additional <a> markup to turn it into a normal "clickable" anchor element.
It is just one file which you'll find in the root directory of the create-mailto repo. Or load the raw version content of create-mailto.js in your browser and save it.
Copy the javascript file to your webserver and add it to your page with a script element:
<script src="create-mailto.js">
Then, in the web page, add markup to your email addresses:
<span class="email">[email protected]</span>
| plain html | html with create-mailto.js |
|---|---|
<span class="email">[email protected]</span> |
<span class="email"><a href="mailto:[email protected]">[email protected]</a></span> |
That's it!
If you use microformats or microdata, create-mailto will convert email addresses without any additional markup:
| markup type | plain html | html with create-mailto.js |
|---|---|---|
| microformats hCard 1.0 | <span class="email">[email protected]</span> |
<span class="email"><a href="mailto:[email protected]">[email protected]</a></span> |
| microformats2 hcard | <span class="p-email">[email protected]</span> |
<span class="p-email"><a href="mailto:[email protected]">[email protected]</a></span> |
| schema.org microdata | <span itemprop="email">[email protected]</itemprop> |
<span itemprop="email"><a href="mailto:[email protected]">[email protected]</a></span> |
You can also use this script in situations where the email address does not appear in the web page, by using data-* attributes. Just add a data-email to your element:
| plain html | html with create-mailto.js |
|---|---|
<span data-email="[email protected]">email me</span> |
<span data-email="[email protected]"><a href="mailto:[email protected]">email me</a></span> |
<img src="foo.jpg" alt="email me" data-email="[email protected]"> |
<a href="[email protected]"><img src="foo.jpg" alt="email me" data-email="[email protected]"></a> |
create-mailto will not change any part of a document's <head> element. There are also restrictions on interactive and form elements. For example, it will not add <a> markup inside a <label> element, since clicking a <label> element changes focus to the associated form input. It should not have additional effects, e.g., opening a compose email window, because such behavior would likely be unexpected. In addition, create-mailto will ignore void elements like <col> and <br>. The list below is not exhaustive:
| plain html | html with create-mailto.js (no markup changes) |
|---|---|
<label class="email">[email protected]<label> |
<label class="email">[email protected]<label> |
<label><span class="email">[email protected]</span><label> |
<label><span class="email">[email protected]</span><label> |
<option class="email">[email protected]<option> |
<option class="email">[email protected]<option> |
<textarea class="email">[email protected]</textarea> |
<textarea class="email">[email protected]</textarea> |
<details class="email">[email protected]<details> |
<details class="email">[email protected]<details> |
<audio data-email="[email protected]" controls src="foo.ogg"></audio> |
<audio data-email="[email protected]" controls src="foo.ogg"></audio> |
<button class="email">[email protected]<button> |
<button class="email">[email protected]<button> |
If you are using a create-mailto class for some other reason e.g., you use <span class="email">username@example</span> in your markup, but you don't want that instance turned into a link, you can add ignore-create-mailto to its class attribute. This will work on an element and any of its children.
| plain html | html with create-mailto.js (no markup changes) |
|---|---|
<span class="email exclude-create-mailto">[email protected]</span> |
<span class="email exclude-create-mailto">[email protected]</span> |
<p class="exclude-create-mailto"><span class="email">[email protected]</span></p> |
<p class="exclude-create-mailto"><span class="email">[email protected]</span></p> |
The script create-mailto.js uses modern javascript features. It should work with recent releases of all major browsers. If you need to support legacy browsers (e.g. Internet Explorer), then try the jQuery version create-mailto.jquery.js. You will need to include jQuery in your web page.
There are test web pages to see if create-mailto.js is correctly inserting mailto: links where it should and not creating them where it shouldn't.