9 интересных примеров работы с 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:mail@yandex.ru?сс=copy@yandex.ru.
  • bcc — Если же вы хотите, чтобы кому-то отправлялась скрытая копия письма, то укажите этот параметр: mailto:mail@yandex.ru?bсс=hiddencopy@yandex.ru.

Кстати, параметры эти необязательные.

Теперь будут два весьма изысканных метода использования ссылок в 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>

Источники:

  1. http://html5.by/blog/category/mobile/
  2. http://htmlcssjs.ru/HTML/?13
  3. http://htmlbook.ru/content/tsvet-ssylok
  4. http://dotrb.blogspot.com/2008/11/css-external-links-design.html
Начать проект вместе с нами
Заполните форму и отправьте
нам сообщение!
Если у Вас возникли вопросы, предложения, либо Вы желаете оформить заявку на заказ услуги — Добро пожаловать!
Телефоны и мессенджеры:
Москва: +7 (499) 389-42-40
Санкт-Петербург: +7 (812) 456-72-40