Адреса електронної пошти пишеться у форматі vlad@webref.ru, де vlad — це ім'я користувача, а webref.ru — ім'я домену. Для створення посилання використовується елемент <a>, в атрибуті href спершу пишеться ключове слово mailto :, потім без пробілу вказується адреса електронної пошти користувача.
<a href="mailto:vlad@webref.ru">Текст посилання</a>
При натисканні на таке посилання відкривається поштова програма за замовчуванням. Якщо такі посилання ще не відкривалися, то операційна система виведе вікно зі списком програм (мал. 1).
Мал. 1. Список програм для відкриття адреси електронної пошти
На свій вигляд таке посилання нічим не відрізняється від звичайних посилань на сайти. Щоб користувач їх якось розрізняв, можна використовувати такі рекомендації.
У тексті посилання дати адресу.
<a href="mailto :vlad@webref.ru">vlad@webref.ru</a>
Написати пояснення в тексті.
<code data-language="html"><p>З усіх питань <a href="mailto:vlad@webref.ru">пишіть листи</a></p>
Додати символ пошти до або після тексту посилання за допомогою властивості content та псевдоелемента ::before або ::after, як показано на прикладі 1. Щоб іконка працювала лише з потрібними посиланнями, ми використовуємо селектор a[href^="mailto"], він буде застосовувати стиль лише до елементів < ;a>, у яких атрибут href починається з mailto.
Приклад 1. Іконка після адреси
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Поштова адреса</title> <style> a {text-decoration: none; /* Забираємо підкреслення */
}
a[href^="mailto"]::after { content: '\1F4E9'; /* Іконка */
padding-left: 5px; /* Відстань від іконки до тексту */
vertical-align: text-bottom; /* Вирівнювання по вертикалі */
font-size: 0.8em; /* Розмір іконки */
}
</style>
</head>
<body> <p>З усіх питань пишіть на адресу <a href="mailto:vlad@webref.ru">vlad@webref.ru</a></p>
</body>
</html>Результат цього прикладу показаний на рис. 1. Іконка взята з сайту utf8icons.com.
Мал. 1. Іконка після адреси пошти