Ссылка на E-mail или Mailto в HTML
Ссылка на E-mail в HTML делается как обычно: с помощью элемента <a> , только вместо пути, который указывается в качестве значения атрибута href , пишется слово «mailto» и, через двоеточие (:), адрес электронной почты:
Если кликнуть по такой ссылке, то откроется почтовая программа, заданная по умолчанию для обработки ссылок-mailto, в которой, в шаблоне письма, поле Кому будет уже заполнено соответствующим адресом.
Адрес электронной почты указывать необязательно; в этом случае поле Кому останется пустым; однако двоеточие пишется всегда.
Параметры
Помимо простого указания адресата, в ссылках-mailto можно использовать параметры, с помощью которых почтовой программе сообщаются тема и содержание письма, а также кому отправить обычную и скрытую копию.
| Параметр | Значение |
|---|---|
| subject | тема письма |
| body | содержание письма |
| cc | кому отправить обычную копию |
| bcc | кому отправить скрытую копию |
Синтаксис
То есть, сначала указывается слово «mailto»; затем — двоеточие (:); затем — адрес электронной почты (необязательно); затем — вопросительный знак (?); затем — пары «параметр=значение», разделённые амперсандом (&).
Адресов почты можно указывать несколько, разделяя их запятой или пробелом.
Пример
В примере амперсанды (&) заменены на соответствующие мнемоники (&), так как иначе документ не пройдёт валидацию.
Mailto в формах
В качестве обработчика формы, путь к которому указывается в атрибуте action элемента <form> , можно использовать адрес электронной почты. Это делается по аналогии с обычными ссылками на E-mail.
По некоторым причинам пример не работает в браузере Google Chrome.
Вместе с адресом электронной почты после двоеточия можно указывать дополнительную информацию (например, имя получателя); при этом, для корректного определения адреса почты, его лучше заключить в угловые скобки (%3C и %3E) как показано в примере ниже:
HTML элементы. Тег <a>
Тег <a> определяет гиперссылку, которая используется для перехода с одной страницы на другую.
Наиболее важным атрибутом элемента <a> является атрибут href, который указывает на назначение ссылки.
По умолчанию ссылки будут выглядеть следующим образом во всех браузерах:
- Непосещенная ссылка подчёркнута и синим цветом
- Посещённая ссылка подчёркнута и фиолетовым цветом
- Активная ссылка подчёркнута и красным цветом
Поддержка браузерами
| Элемент | |||||
|---|---|---|---|---|---|
| <a> | Yes | Yes | Yes | Yes | Yes |
Советы и заметки
Совет: Следующие атрибуты: download, hreflang, media, rel, target и type не могут присутствовать, если отсутствует атрибут href.
Совет: Связанная страница обычно отображается в текущем окне браузера, если вы не укажете другую цель.
Совет: Используйте CSS для стилизации ссылок: CSS Учебник. Ссылки и CSS Учебник. Кнопки
Различия между HTML 4.01 и HTML5
В HTML 4.01 тег <a> может быть гиперссылкой или якорем. В HTML5 тег <a> является всегда гиперссылкой, но если он не имеет атрибута href, он является только заполнителем для гиперссылки.
HTML5 имеет некоторые новые атрибуты, а некоторые атрибуты HTML 4.01 больше не поддерживаются.
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| charset | char_encoding | Не поддерживается в HTML5. Определяет набор символов связанного документа |
| coords | coordinates | Не поддерживается в HTML5. Определяет координаты ссылки |
| download | filename | Указывает, что цель будет загружена, когда пользователь нажимает гиперссылку |
| href | URL | Определяет URL страницы, на которую идет ссылка |
| hreflang | language_code | Определяет язык связанного документа |
| media | media_query | Указывает, для какого носителя/устройства оптимизирован связанный документ |
| name | section_name | Не поддерживается в HTML5. Используйте глобальный id атрибут вместо этого. Определяет имя якоря |
| ping | list_of_URLs | Определяет разделенный пробелами список URL-адресов, по которым при переходе по ссылке браузер будет отправлять запросы на отправку сообщений с помощью основного текста (в фоновом режиме). Обычно используется для отслеживания. |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url |
Указывает, какой реферер отправить |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag |
Определяет связь между текущим документом и связанным документом |
| rev | text | Не поддерживается в HTML5. Определяет связь между связанным документом и текущим документом |
| shape | default rect circle poly |
Не поддерживается в HTML5. Определяет форму ссылки |
| target | _blank _parent _self _top framename |
Указывает, где открыть связанный документ |
| type | media_type | Определяет тип мультимедиа связанного документа |
Глобальные атрибуты
Атрибуты события
Попробуйте сами — Примеры
Создать кликабельное изображение
Как использовать изображение в качестве ссылки.
Открыть ссылку в новом окне браузера
Как открыть ссылку в новом окне браузера, чтобы посетителю не пришлось покидать ваш веб-сайт.
Создать ссылку на электронную почту
Как сделать ссылку на почтовое сообщение (будет работать, только если у вас установлена программа — почтовый клиент).
Создать телефонную ссылку
Как сделать ссылку на номер телефона.
Ссылка на другой раздел на той же странице
Как создать ссылку на элемент с указанным идентификатором на странице (атрибут name не поддерживается в HTML5).
Ссылка на JavaScript
Как добавить JavaScript внутри атрибута href.
Связанные страницы
HTML DOM справочник: Объект Anchor
Настройки CSS по умолчанию
Большинство браузеров будут отображать элемент <a> со следующими значениями по умолчанию:
a:link, a:visited <
color : (внутреннее значение) ;
text-decoration : underline ;
cursor : auto ;
>
a:link:active, a:visited:active <
color : (внутреннее значение) ;
>
Ссылки на почту mailto и номер телефона tel
Современный язык разметки HTML позволяет ставить ссылки не только на страницы сайта, их элементы или файлы для скачивания, но и на номер телефона, электронную почту.
Сегодня мы обсудим такие URI схемы как mailto и tel или, другими словами, как поставить на сайте ссылку на электронную почту и номер телефона.
Ссылка mailto (гиперссылка на электронную почту)
Ссылка на электронную почту действует по следующему принципу:
При клике на ссылку mailto браузер вызывает почтовую программу, которая установлена на компьютере или в браузере пользователя по умолчанию.
Если у вас установлены расширения браузера Gmail или Яндекс.Почта, переход может быть выполнен на один из этих почтовых клиентов. На Windows, при установленном Office пакете это может быть также Microsoft Outlook.
При переходе по ссылке mailto откроется страница написания письма. В строку адреса получателя («Кому» в Gmail) будет автоматически вписан электронный адрес, указанный в href атрибуте mailto ссылки.
Как поставить ссылку на электронную почту
Чтобы установить ссылку на email используют тег <a> с указанием атрибута href=»mailto. » . То есть, в значении атрибута пишем mailto: и дальше адрес электронной почты без пробелов.
Вот пример ссылки на почтовый ящик:
Ссылка tel на номер телефона
Прекрасное решение по облегчению набора номера телефона с сайта для пользователей использующих смартфоны — ссылка tel . Она позволяет пользователю осуществить звонок в прямом смысле в 2 клика (клик по ссылке и клик по кнопке «Вызов»), не прибегая к копированию телефона либо запоминанию номера, что было бы весьма неудобно.
Гиперссылка tel действует по схожему принципу с mailto , только вместо почтовой программы вызывает приложение набора номера на смартфонах и программу для звонков на компьютере (если установлена).
В поле «номер» автоматически вписывается номер телефона указанный в атрибуте href .
Как поставить ссылку на номер телефона
Чтобы установить ссылку на телефонный номер используют тег ссылки <a> с указанием атрибута href=»tel. » . В значении атрибута пишем tel: и дальше номер телефона в международном формате без пробелов, тире, скобок и прочего. Только «+» и цифры за ним.
Как сделать ссылку на почту в html
In this article, we are going through step by step process to create an HTML Mailto and call link. When a user clicks on the mailto link, it opens a default email client in the user’s system. You can make these types of clickable links easily with the anchor tag.
Mailto link: Users can easily contact website owners or anyone with the help of a mailto link. Mailto link redirects the user to the email client and creates the new mail, addressing the email in the mailto link. Furthermore, we can specify the subject and default body text inside the mailto link which saves the time of users.
The following queries and parameters into the mailto link:
- mailto: It accepts the recipient’s email address.
- cc: It is an optional parameter. It accepts another email address that will receive the carbon copy.
- bcc: It is also an optional parameter. It accepts one or more email addresses that will receive the blind carbon copy.
- subject: In this parameter, you can assign a default subject of the mail.
- body: It allows you to set default body text. However, it is optional.
- ?: It is a first parameter delimiter.
- &: It allows you to separate more than one query.
Syntax:
Moreover, users can add default subjects to the mailto link. If users want to add a little bit more information like CC emails, BCC emails, and body text then we can do it easily. We have to add all queries after user email followed by a question mark. If users want to add multiple queries then they can use & operator to separate two queries.