10 интересных примеров работы с HTML-ссылками на сайте
Ссылка в вебе — это, наверное, самый распространенный элемент. Ссылки есть на всех сайтах. Вот, хочу немного поделиться небольшой информацией о том, что можно сделать, используя HTML-разметку и, конечно, тег a. Начнем с определения.
Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от наличия атрибутов name или href, тег <a> устанавливает ссылку или якорь.
Пример №1. Гиперссылка.
<a href="http://site.ru" title="Ссылка на какой-то сайт">Сайт</a>
Все просто, тут мы говорим пользователю, куда будет переход, если кликнуть на ссылку сайт. Не забываем использовать параметр title, он добавляет всплывающую подсказу. В таком виде ссылка будет валидна.
Не забывайте, что внутренние ссылки должны быть относительными, без указания протокола и домена.
Пример №2. Якорь.
<a href="#body" title="Ссылка на какой-то сайт">Сайт</a>или
<a href="http://site.ru#body" title="Ссылка на какой-то сайт">Сайт</a>
При такой ссылке в первом случае браузер проскроллится к элементу сайта с идентификатором id="body" на текущей странице, а во втором случае сначала перейдет на страницу http://site.ru, а потом уже проскроллится к элементу сайта с идентификатором id="body".
Пример №3. Гиперссылка для отправки e-mail.
<a href="malito:mail{at}yandex.ru" title="Ссылка на что-то">Сайт</a>
Этот вариант, конечно, немного сложнее, но зато можно через параметр mailto, пользователю создать уже заполненное письмо. Для этого есть удобные параметры: subject, body, cc и bcc. О них подробнее:
- subject — Тема письма. Следует учесть, что некоторые почтовые программы (The Bat, к примеру) не воспринимают пробелы в значении этого поля. Поэтому нужно заменять знаки пробелов на подчёркивание или %20: mailto:mail{at}yandex.ru?subject=Feedback_from_My_Site или mailtomail{at}yandex.ru?subject=Feedback%20from%20My%20Site
-
body — В этом поле можно задать текст самого письма. Зачастую этот метод используется в ситуации, когда от посетителя сайта требуется сообщить вам об ошибке Error 404. В этом случае вы сами заполняете текст письма, указав, если нужно, страницу, которую запросил пользователь (её можно получить из серверной переменной $REQUEST_URL). Например: mailto:mail{at}yandex.ru?subject=Error404&body=/mypage.php.
Перевод строки можно задать с помощью %0A. - cc — Этот параметр задаёт копию письма. Пример: mailto:[email protected]?сс[email protected].
- bcc — Если же вы хотите, чтобы кому-то отправлялась скрытая копия письма, то укажите этот параметр: mailto:[email protected]?bсс[email protected].
Кстати, параметры эти необязательные.
Теперь будут два весьма изысканных метода использования ссылок в HTML. Первые три метода абсолютно уверенно работают во всех браузерах. Следующие два работают только на мобильных устройствах, которые имеют модуль сотовой связи.
Пример №4. Ссылка «телефонный звонок» в мобильных браузерах.
Некоторые браузеры распознают номера телефонов и подчеркивают их. Если кликнуть, то есть коснуться этой ссылки в телефоне, то произойдет набор номера. К сожалению, я пока не нашел идеального решения для форматирования номера, зато нашел, как можно просто сверстать ссылку типа «телефонный звонок»:
<a href="tel:+1234567890">Звоните нам бесплатно </a>Такая простая ссылка выделит номер телефона в любом виде. К сожалению, десктоп-браузеры не знают такой тег, при этом он еще и не проходит валидацию. Для этого делаем простую проверку с помощью mobiledetect.net.
lt;?php if ($this->params->get("telephone")&& ($deviceType == 'phone')) {?>
<div class="h_telephone">Телефон: <a href="tel:<?= $this->params->get("telephone");?>"><?= $this->params->get("telephone");?></a></div>
<?php } else { ?>
<div class="h_telephone">Телефон: <b><?= $this->params->get("telephone");?></b></div>
<?php } ?>Пример №5. Ссылка «отправить sms» в мобильных браузерах.
Как и в предыдущем примере, отправка смс работает только на мобильных устройствах, имеющих модуль сотовой связи. Сразу перейду к примерам:
<a href="sms:12345678">SMS для 12345678</a>
<a href="sms:12345678?body=Привет мой друг. Как дела?">Отправить sms другу</a>
<a href="sms:123456789,+123456780?body=Привет. Как дела?">Отправить sms нескольким друзьям.</a>Пример №6. CSS-стилизация/оформление ссылок. Псевдоселекторы.
Конечно, без верстки тут тоже не обойдется. У ссылки есть четыре состояния: активная, наведение, клик и посещенная. Каждое из них можно оформить, желательно всегда уделять этому время. Пользователю будет легче перемещаться по сайту.
a {
/* Стиль ссылки по умолчанию. */
&:visited {
/* Стиль для посещенной ссылки. */
}
&:active {
/* Стиль для активной ссылки. Активной ссылка становится при клику или по тапу на нее. */
}
&:hover {
/* Стиль для ссылки при наведении на нее мышью. */
}
}Пример №7. Оформление внешних ссылок на сайте с помощью CSS.
Порою не хочется мучиться с заданием классов для внешних ссылок на сайте. Это можно упростить, используя селекторы:
a[href^="http:"], a[href^="https:"] {
....
}
Этот код означает, что все ссылки с атрибутом href, начинающимся с http или https будут иметь стили, присвоенные в данном правиле. Обратите внимание, что если внутренняя ссылка на какой-нибудь странице сайта будет начинаться с http, то он тоже будет выделена.
Пример №8. Открытие ссылок в новом окне.
<a href="http://site.ru" target="_blank" rel="noopener noreferrer">сайт.ру</a>Ко внешним ссылкам, которые откроются в новом окнке, надо обязательно добавлять свойство rel="noopener". Это больше касается безопасности.
Есть некоторые функции JavaScript, которые позволяют новой вкладке получить контроль над ссылающимся окном. Если вы ссылаетесь на внешний веб-сайт, на котором распространяется вредоносный код, этот веб-сайт может использовать свойство JavaScript window.opener, чтобы изменить исходную страницу (ваш веб-сайт) для кражи информации и внедрения вредоносного кода.
Добавление rel="noopener" не позволяет новой вкладке воспользоваться этой функцией JavaScript. Точно так же атрибут rel="noreferrer" предотвращает передачу информации о реферере на новую вкладку.
Пример №9. Как не передовать SEO вес на другой сайт.
<a href="http://site.ru" target="_blank" rel="nofollow">сайт.ру</a>Многие СЕО-шники любят прятать внешние ссылки, дабы вес не передовался на другой сайт. Так называемая технология nofollow-ссылки. Для этого ссылке прописывают соответствующее свойство. Если взять пример выше, то суммерано получится вот такая конструкция:
<a href="http://site.ru" target="_blank" rel="noopener noreferrer nofollow">сайт.ру</a>Пример №10. Ссылка на ГЕО локацию.
<a href="geo:38.62464092991612,-90.18476128578186">Как добраться</a>По тапу на ссылку на мобильном телефоне или планшеты, открывается навигационный софт и в него передаются координаты пункта назначения. Без пробелов между долготой и широтой.
Источники:
