Как привязать ссылку к тексту или другому элементу сайта?

В настройках вы можете выбрать один из трёх видов ссылки:

• Внешняя — ссылка на сторонний сайт.
• На страницу — ссылка на страницу вашего сайта, которую вы можете выбрать из списка.
• На всплывающее окно — при клике на элемент будет открываться всплывающее окно, которое вы можете выбрать из списка.

Примечание

Возможность установить ссылку на всплывающее окно доступна не для всех виджетов.

Также вы можете выбрать способ открытия ссылки при клике на неё: в текущем или в новом окне. Управление настройкой осуществляется переключателем «Открывать в новом окне».

Сохраните изменения после установки ссылки.

Как привязать ссылку к тексту

Нажмите на нужный элемент сайта или выделите часть текста. Щелкните по кнопке «Ссылка», которая появляется над элементом или текстом.

Для виджета «Текст» доступны дополнительные типы ссылок, которые вы можете установить. Помимо внешней ссылки, ссылки на страницу вашего сайта, якорь или всплывающее окно, вы также можете установить ссылку на телефон, чтобы при клике на него с мобильного устройства посетитель мог вам позвонить, а также есть возможность разместить ссылку на E-mail.

Как привязать ссылку к виджету «Картинка»

Нажмите на изображение, в левой панели кликните на обведенный на скриншоте значок и установите настройки для ссылки:

Как привязать ссылку к виджету «Галерея»

Нажмите на виджет «Галерея», затем на изображение в нем, на которое хотите установить ссылку, после этого кликните на иконку цепи и установите ссылку.

Как привязать ссылку к виджету «Слайдер»

В слайдере вы можете назначить ссылку на текст в подложке и на кнопку. Для назначения ссылки на текст выделите часть текста и нажмите на иконку установки ссылки.

Для установки ссылки на кнопке в слайдере кликните на неё, затем нажмите на иконку карандаша, чтобы указать свою ссылку.

Как привязать ссылку к виджету «Кнопка»

Чтобы привязать ссылку к кнопке, нажмите на виджет, а затем на иконку цепи в панели настроек над ним. В открывшемся окне выберите, куда будет вести ссылка, укажите её и сохраните изменения.

Как привязать ссылку к виджету «Иконка»

Нажмите на иконку, кликните на значок цепи над виджетом и установите настройки для ссылки:

Для иконки доступна установка ссылки на внешнюю страницу, страницу сайта, якорь, всплывающее окно, а также возможность поставить специальную ссылку для телефона или e-mail.

Как привязать ссылку к виджету «Цитата»

В виджете «Цитата» вы можете установить ссылку на текст и на автора цитаты. Выделите текст и кликните на иконку установки ссылки.

Как привязать ссылку к виджету «Карточка»

Нажмите на виджет, после чего появится всплывающая подсказка, на ней кликните на значок карандаша. В открывшемся окне укажите, на какую внешнюю ссылку или страницу сайта будет происходить переход, а также вариант открытия ссылки в текущем/новом окне. Также здесь можно установить ссылку на всплывающее окно.

В тонких настройках в левой панели можно выбрать, какие элементы виджета будут кликабельны:

Как привязать ссылку к виджету «Таблица»

В этом виджете можно установить ссылку на любой текст в любой ячейке. Для установки ссылки выделите текст и кликните на иконку цепи для выбора ссылки.

Как привязать ссылку к виджету «PRO таблица»

Привязать ссылку в «PRO Таблице» можно только к типу ячейки «Кнопка». Кликните на виджет, чтобы открылись его настройки, затем нажмите правой клавишей мыши на ячейку, которая должна быть ссылкой, и выберите «Тип ячейки» — «Кнопка».

Двойным нажатием на кнопку откройте её настройки, нажмите на иконку карандаша и установите ссылку.

Как привязать ссылку к виджету «Этапы»

В виджете «Этапы» установка ссылки возможна на заголовок этапа. Выделите текст, нажмите на иконку цепи во всплывающей панели и установите ссылку.

Как привязать ссылку к виджету «Таймлайн»

В виджете «Таймлайн» вы можете установить ссылку на заголовок этапа. Для установки ссылки выделите текст и нажмите на иконку цепи.

Как привязать ссылку к виджету «Прайс-лист»

В виджете «Прайс-лист» возможна привязка ссылки к кнопке. Кликните на неё, нажмите на иконку карандаша и укажите ссылку.

Как привязать ссылку к виджету «Базовая кнопка»

Нажмите на кнопку, после чего появится всплывающая подсказка, на ней кликните на значок карандаша.

Примечание:

Если кнопка «Ссылка» не появляется, значит сделать элемент или текст кликабельным невозможно.

Попробуйте прямо сейчас!

Создание гиперссылок

Гиперссылки действительно важны — они делают Интернет Интернетом. В этой статье представлен синтаксис, необходимый для создания ссылки, а также обсуждаются лучшие практики обращения со ссылками.

Предварительные требования:	Базовое знакомство с HTML, описанное в статье Начало работы c HTML. Форматирование текста в HTML, описанное в статье Основы редактирования текста в HTML.
Задача:	Научиться эффективно использовать гиперссылки и связывать несколько файлов вместе.

Что такое гиперссылка?

Гиперссылки — одно из самых интересных нововведений Интернета. Они были особенностью Сети с самого начала, но именно они превращают Интернет в Интернет. Они позволяют нам связывать наши документы с любым другим документом (или ресурсом), с которым мы хотим. С их помощью мы также можем связывать документы с их конкретными частями, и мы можем сделать приложения доступными на простом веб-адресе (сравните это с локальными приложениями, которые должны быть установлены, и другими такими же вещами). Почти любой веб-контент может быть преобразован в ссылку, так что когда вы кликаете по ней (или иным образом активируете), она заставляет веб-браузер перейти на другой веб-адрес (URL.)

Примечание: URL-адрес может указывать на файлы HTML, текстовые файлы, изображения, текстовые документы, видео и аудиофайлы и все остальное, что может жить в Интернете. Если веб-браузер не знает, как отображать или обрабатывать файл, он спросит вас, хотите ли вы открыть файл (в этом случае обязанность открытия или обработки файла передаётся в соответствующее локальное приложение на устройстве) или загрузить файл (в этом случае вы можете попытаться разобраться с ним позже).

Например, домашняя страница BBC содержит большое количество ссылок, которые указывают не только на множество новостей, но и на различные области сайта (меню), страницы входа / регистрации (пользовательские инструменты) и многое другое.

Анатомия ссылки

Простая ссылка создаётся путём обёртывания текста (или другого содержимого, смотрите Ссылки-блоки), который вы хотите превратить в ссылку, в элемент , и придания этому элементу атрибута href (который также известен как гипертекстовая ссылка, или цель), который будет содержать веб-адрес, на который вы хотите указать ссылку.

p> Я создал ссылку на a href="https://www.mozilla.org/ru/">домашнюю страницу Mozillaa>. p> 

Это дало нам следующий результат:

Добавляем информацию через атрибут title

Другим атрибутом, который вы можете добавить к своим ссылкам, является — title . Он предназначен для хранения полезной информации о ссылке. Например, какую информацию содержит страница или другие вещи, о которых вам нужно знать. Например:

p> Я создал ссылку на a href="https://www.mozilla.org/ru/" title="Лучшее место для поиска дополнительной информации о миссии Mozilla и о том, как внести свой вклад" >домашнюю страницу Mozilla a >. p> 

Вот что получилось (описание появится, если навести курсор на ссылку):

Примечание: Описание из атрибута title отображается только при наведении курсора, значит люди, полагающиеся на клавиатурные элементы управления для навигации по веб-страницам, будут испытывать трудности с доступом к информации, которую содержит title. Если информация заголовка действительно важна для удобства использования страницы, то вы должны представить её таким образом, который будет доступен для всех пользователей, например, поместив её в обычный текст.

Активное изучение: создаём собственную ссылку

Время упражнения: мы хотели бы, чтобы вы создали любой HTML-документ в текстовом редакторе на своём компьютере (наш базовый пример подойдёт.)

• Попробуйте добавить в тело HTML один или несколько абзацев или другие элементы, о которых вы уже знаете.
• Теперь превратите некоторые фрагменты документа в ссылки.
• Добавьте ссылкам атрибут title .

Ссылки-блоки

Как упоминалось ранее, вы можете превратить любой элемент в ссылку, даже блочный элемент. Если у вас есть изображение, которые вы хотели бы превратить в ссылку, вы можете просто поместить изображение между тегами .

a href="https://www.mozilla.org/ru/"> img src="mozilla-image.png" alt="логотип mozilla со ссылкой на их домашнюю страницу" /> a> 

Примечание: вы узнаете гораздо больше об использовании изображений в Интернете в следующей статье.

Краткое руководство по URL-адресам и путям

Чтобы полностью понять адреса ссылок, вам нужно понять несколько вещей про URL-адреса и пути к файлам. Этот раздел даст вам информацию, необходимую для достижения этой цели.

URL-адрес (Uniform Resource Locator, или единый указатель ресурса, но так его никто не называет) — это просто строка текста, которая определяет, где что-то находится в Интернете. Например, домашняя страница Mozilla находится по адресу https://www.mozilla.org/ru/ .

URL-адреса используют пути для поиска файлов. Пути указывают, где в файловой системе находится файл, который вас интересует. Давайте рассмотрим простой пример структуры каталогов (смотрите каталог creating-hyperlinks.)

Корень структуры — каталог creating-hyperlinks . При работе на локальном веб-сайте у вас будет один каталог, в который входит весь сайт. В корне у нас есть два файла — index.html и contacts.html . На настоящем веб-сайте index.html был бы нашей домашней, или лендинг-страницей (веб-страницей, которая служит точкой входа для веб-сайта или определённого раздела веб-сайта).

В корне есть ещё два каталога — pdfs и projects . У каждого из них есть один файл внутри — project-brief.pdf и index.html , соответственно. Обратите внимание на то, что вы можете довольно успешно иметь два index.html файла в одном проекте, пока они находятся в разных местах файловой системы. Многие веб-сайты так делают. Второй index.html , возможно, будет главной лендинг-страницей для связанной с проектом информации.

Тот же каталог: Если вы хотите подключить ссылку внутри index.html (верхний уровень index.html ), указывающую на contacts.html , вам просто нужно указать имя файла, на который вы хотите установить ссылку, так как он находится в том же каталоге, что и текущий файл. Таким образом, URL-адрес, который вы используете — contacts.html :

p> Хотите связаться с конкретным сотрудником? Найдите подробную информацию на нашей a href="contacts.html">странице контактовa>. p> 

p> Посетите мою a href="projects/index.html">домашнюю страницу проектаa>. p> 

p> Ссылка на a href="../pdfs/project-brief.pdf">краткое описание моего проектаa>. p> 

Примечание: вы можете объединить несколько экземпляров этих функций в сложные URL-адреса, если необходимо, например: ../../../сложный/путь/к/моему/файлу.html .

Фрагменты документа

Можно ссылаться на определённую часть документа HTML (известную как фрагмент документа), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут id элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:

h2 id="Почтовый_адрес">Почтовый адресh2> 

Затем, чтобы связаться с этим конкретным id , вы должны включить его в конец URL-адреса, которому предшествует знак решётки, например:

p> Хотите написать мне письмо? Используйте наш a href="contacts.html#Почтовый_адрес">почтовый адресa>. p> 

Вы даже можете использовать ссылку на фрагмент документа отдельно для ссылки на другую часть того же документа:

p> a href="#Почтовый_адрес">Почтовый адрес компанииa> можно найти в нижней части этой страницы. p> 

Абсолютные и относительные URL-адреса

Два понятия, с которыми вы столкнётесь в Интернете, — это абсолютный URL и относительный URL:

Указывает на местоположение, определяемое его абсолютным местоположением в Интернете, включая протокол и доменное имя. Например, если страница index.html загружается в каталог, называемый projects , который находится внутри корня веб-сервера, а домен веб-сайта — http://www.example.com , страница будет доступна по адресу http://www.example.com/projects/index.html (или даже просто http://www.example.com/projects/ ), так как большинство веб-серверов просто ищет целевую страницу, такую как index.html , для загрузки, если он не указан в URL-адресе.).

Абсолютный URL всегда будет указывать на одно и то же местоположение, независимо от того, где он используется.

Указывает расположение относительно файла, с которого вы связываетесь, это больше похоже на случай, который мы рассматривали в предыдущей секции. Для примера, если мы хотим указать со страницы http://www.example.com/projects/index.html на PDF файл, находящийся в той же директории, наш URL может быть просто названием файла — project-brief.pdf — никакой дополнительной информации не требуется. Если PDF расположен в поддиректории pdfs внутри каталога projects , относительная ссылка будет pdfs/project-brief.pdf (аналогичный абсолютный URL был бы http://www.example.com/projects/pdfs/project-brief.pdf .).

Относительный URL будет указывать на различные места, в зависимости от того, где находится файл, в котором он используется, — например, если мы переместим наш файл index.html из каталога projects в корневой каталог веб-сервера (верхний уровень, не в директорию) , то относительный URL pdfs/project-brief.pdf будет вести на http://www.example.com/pdfs/project-brief.pdf , а не на http://www.example.com/projects/pdfs/project-brief.pdf .

Советуем вам основательно разобраться в этой теме!

Практика написания хороших ссылок

При написании ссылок рекомендуется следовать некоторым правилам. Давайте рассмотрим их.

Используйте чёткие формулировки описания ссылок

На вашей странице легко добавить ссылки. Но этого не совсем достаточно. Мы должны сделать наши ссылки доступными для всех читателей, независимо от их возможностей и инструментов просмотра страницы, которые они предпочитают. Например:

• Пользователям программ читающих с экрана нравится переходить по ссылкам на странице, читая адрес ссылки в тексте.
• Поисковые системы используют текст ссылки для индексирования файлов, поэтому рекомендуется включать ключевые слова в текст ссылки, чтобы эффективно описывать, куда ведёт ссылка.
• Пользователи часто бегло просматривают страницу, не читая каждое слово, и их глаза будут привлечены к тексту, который выделяется, например, ссылки. Им будет полезно описание того, куда ведёт ссылка.

Взгляните на этот пример:

Хороший текст ссылки: Скачать Firefox

p>a href="https://firefox.com/"> Скачать Firefox a>p> 

Плохой текст ссылки: Нажми сюда, чтобы скачать Firefox

p>a href="https://firefox.com/"> Нажми сюда a> чтобы скачать Firefoxp> 

• Не пишите URL-адрес как часть текста ссылки. URL-адреса выглядят сложными, а звучат ещё сложнее, когда программы чтения с экрана читают их по буквам.
• Не пишите «ссылка» или «ссылки на» в тексте ссылки — это лишнее. Программы чтения с экрана сами проговаривают, что есть ссылка. На экране пользователи также видят, что есть ссылка, потому что ссылки, как правило, оформлены в другом цвете и подчёркнуты (подчёркивая ссылки, вы соблюдаете правила хорошего тона, поскольку пользователи привыкли к этому).
• Следите за тем, чтобы текст ссылки был как можно короче. Длинный текст ссылки особенно раздражает пользователей программ чтения с экрана, которым придётся услышать всё, что написано.
• Минимизируйте случаи, когда несколько копий одного и того же текста ссылок указывает на разные страницы. Это может вызвать проблемы для пользователей программ чтения с экрана, которые часто вызывают список ссылок — несколько ссылок, помеченных как «нажмите здесь», «нажмите здесь», «нажмите здесь», будут путать.

Используйте относительные ссылки, где это возможно

Из прочитанного выше, вы можете подумать, что всё время использовать абсолютные ссылки — хорошая идея; в конце концов, они не ломаются, когда страница перемещается. Тем не менее, лучше использовать относительные ссылки везде, где это возможно, в пределах одного сайта (при ссылке на другие сайты необходимо использовать абсолютную ссылку):

• Во-первых, гораздо проще прописать в коде относительные URL-адреса, как правило, они намного короче абсолютных URL-адресов, что значительно упрощает чтение кода
• Во-вторых, использование относительных URL-адресов эффективней по следующей причине. Когда вы используете абсолютный URL-адрес, браузер начинает поиск реального местоположения сервера запрашивая адрес у Domain Name System (DNS; также прочтите Как работает web), затем он переходит на этот сервер и находит файл, который запрашивается. С относительным URL-адресом проще: браузер просто ищет файл, который запрашивается на том же сервере. Используя абсолютные URL-адреса вместо относительных, вы постоянно нагружаете свой браузер дополнительной работой.

Создавая ссылки на не HTML ресурсы — добавляйте описание

Когда вы создаёте ссылку на файл, нажав на который можно загрузить документ PDF или Word или открыть просмотр видео, прослушивание аудио файла или перейти на страницу с другим, неожиданным для пользователя результатом (всплывающее окно или загрузка Flash-фильма), добавляйте чёткую формулировку, чтобы уменьшить путаницу. Отсутствие описания может раздражать пользователя. Приведём пример:

• Если вы используете соединение с низкой пропускной способностью и вдруг нажмёте на ссылку без описания, начнётся загрузка большого файла.
• Если у вас нет установленного Flash-плеера и вы нажмёте ссылку, то внезапно перейдёте на страницу с Flash-контентом.

Посмотрите на примеры, чтобы увидеть, как добавить описание:

p> a href="http://www.example.com/large-report.pdf"> Скачать отчёт о продажах (PDF, 10MB) a> p> p> a href="http://www.example.com/video-stream/"> Посмотреть видео (видео откроется в отдельном окне, HD качество) a> p> p> a href="http://www.example.com/car-game"> Играть в гонки (необходим Flash) a> p> 

Используйте атрибут download, когда создаёте ссылку

Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут download , чтобы создать имя файла по умолчанию для сохранения . Приведём пример ссылки для загрузки браузера Firefox 39:

a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US" download="firefox-39-installer.exe"> Скачать Firefox 39 для Windows a> 

Активное изучение: создание меню навигации

Для этого упражнения мы хотим, чтобы вы создали ссылки на страницы в меню навигации в многостраничном сайте. Это один из распространённых способов создания сайта: на каждой странице используется одна и та же структура страниц, включая одно и то же меню навигации, поэтому при нажатии ссылок создаётся впечатление, что вы остаётесь в одном месте: меню остаётся на месте, а контент меняется.

Вам нужно скачать или создать следующие страницы в одном каталоге (Смотрите navigation-menu-start):

1. Добавьте неупорядоченный список в указанном месте в любом html-файле. Список должен состоять из имён страниц (index, projects и т.д.). Меню навигации обычно представляет собой список ссылок, поэтому создание неупорядоченного списка семантически верно.
2. Создайте ссылки каждому элементу списка, ведущие на эти страницы.
3. Скопируйте созданное меню в каждую страницу.
4. На каждой странице удалите только ссылку, которая указывает на эту же страницу (на странице index.html удалить ссылку index и так далее). Дело в том, что, находясь на странице index.html, нам незачем видеть ссылку в меню на эту же страницу. С одной стороны, нам незачем ещё раз переходить на эту же страницу, с другой, такой приём помогает визуально определить, смотря на меню, в какой части сайта мы находимся.

Когда закончите задание, посмотрите, как это должно выглядеть:

Примечание: Если не удаётся сделать, или вы не уверены, что сделали верно, посмотрите наш вариант navigation-menu-marked-up.

Ссылки электронной почты

Можно создавать ссылки или кнопки, которые при нажатии открывают новое исходящее сообщение электронной почты, а не ссылку на ресурс или страницу. Для этого используется элемент и mailto: — адрес почты.

Самыми простыми и часто используемыми формами mailto: являются subject, cc, bcc и body; дальше прописываем адрес электронной почты. Например:

a href="mailto:nowhere@mozilla.org">Отправить письмо для nowherea> 

В результате получим ссылку вида: Отправить письмо для nowhere.

Сам адрес электронной почты не является обязательным для заполнения. Если оставить это поле пустым (в поле href оставить только «mailto:»), откроется новое исходящее сообщение почтовой программой, в поле получателя будет пусто. Это можно использовать для кнопки «Поделиться».

Особенности и детали

Помимо адреса электронной почты, вы можете предоставить другую информацию. Фактически, любые стандартные поля для отправки почты могут быть добавлены к указанному вами адресу mailto . Часто используемыми из них являются «subject», «cc» и «body» (которые не являются истинным полем заголовка, но позволяют указать дополнительную информацию для нового сообщения электронной почты). Каждое поле и его значение задаются в качестве условия запроса.

Вот пример который включает cc(кому отправить копию сообщения, все получатели письма видят список тех кто это письмо получит), bcc(скрытый адрес получателя, никто из получателей не будет видеть полный список получателей письма), subject(тема письма) и body(текст сообщения):

a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email &body=The%20body%20of%20the%20email"> Send mail with cc, bcc, subject and body a> 

Примечание: Значение каждого поля должно быть написано в URL-кодировке (то есть с непечатаемыми символами и пробелами percent-escaped). Обратите внимание на знак вопроса (?) для разделения основного адреса и дополнительных полей, амперсанд (&) для разделения каждого поля mailto: URL. Для этого используется стандартное описание URL запроса. Прочтите о методе GET, чтобы лучше понимать описание URL запроса.

Вот несколько примеров использования mailto URLs:

• mailto:
• mailto:nowhere@mozilla.org
• mailto:nowhere@mozilla.org,nobody@mozilla.org
• mailto:nowhere@mozilla.org?cc=nobody@mozilla.org
• mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject

Заключение

Этой информации достаточно для создания ссылок! Вы вернётесь к ссылкам позже, когда начнёте изучать стили. Дальше вы рассмотрите семантику текста и более сложные и необычные возможности, которые будут полезны при создании контента сайта. В следующей главе будет рассматриваться продвинутое форматирование текста.

В этом модуле

• Начало работы с HTML
• Что такое заголовок? Метаданные в HTML
• Основы редактирования текста в HTML
• Создание гиперссылок
• Углублённое форматирование текста
• Структура документа и веб-сайта
• Отладка HTML
• Разметка письма
• Структурируем страницу

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

:active

Псевдокласс :active соответствует элементу в момент, когда он активируется пользователем. Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью — это, как правило, время между нажатием и отпусканием пользователем кнопки мыши.

/* Любой элемент , который будет активирован */ a:active  color: red; > 

Это свойство может быть переопределено любыми другими псевдоклассами, относящимся к ссылке, такими как :link , :hover и :visited , описанными в последующих правилах. Чтобы стилизировать нужные ссылки, вам нужно ставить правило :active после всех других правил, относящихся к ссылке, как определено правилом LVHA-порядком: :link — :visited — :hover — :active .

Примечание: В системах с много-кнопочными мышами, CSS 3 указывает, что псевдокласс :active должен применяться только к первой кнопке; для праворуких мышей — это обычно самая левая кнопка.

Синтаксис

Error: could not find syntax for this item

Пример

Активные ссылки

HTML

p> Этот абзац содержит ссылку: a href="#">Эта ссылка будет окрашена в красный, когда вы нажмёте на неё.a> У абзаца фон станет серым при нажатии на него или на ссылку. p> 

CSS

/* Непосещённые ссылки */ a:link  color: blue; > /* Посещённые ссылки */ a:visited  color: purple; > /* Ссылки при наведении */ a:hover  background: yellow; > /* Активные ссылки */ a:active  color: red; > /* Активные абзацы */ p:active  background: #eee; > 

Результат

Активные элементы формы

HTML

form> label for="my-button">Моя кнопка: label> button id="my-button" type="button"> Попробуй Нажать Меня или Мою подсказку! button> form> 

CSS

form :active  color: red; > form button  background: white; > 

Result

Спецификации

Specification
HTML Standard # selector-active
Selectors Level 4 # the-active-pseudo

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

• Псевдоклассы, связанные с ссылками: :link , :visited и :hover .

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 11 окт. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Как сделать ссылку на номер телефона в HTML: протокол tel:, оформление и советы

Недавно читал, что объемы мирового мобильного трафика уже превышают десктопных пользователей. В данном блоге этого пока не случилось, но в интернет-магазине одного из моих клиентов бОльшая часть людей заходит именно через планшеты/смартфоны. Поэтому меня попросили сделать продвинутую ссылку на телефон на сайте, которая при нажатии автоматически бы открывала соответствующее приложение с набором номера.

Некоторые устройства без проблем понимают написанные телефоны, например, слышал, что в Android для этого достаточно заключить линк в span:

(098) 555-44-33

При клике по тексту, в теории, весь номер должен выделиться, но на практике у меня это почему-то не получилось.

Лучше использовать в ссылке tel параметр:

Фишка работает с 2011 года, хотя не все браузеры одинаково с ней дружат(жили) — как это часто бывает в верстке, есть определенные нюансы. Поэтому я решил опубликовать немного инфы по теме из интересной англоязычной статьи.

Спецификация и поддержка

По факту tel: — это не опция «А» тега, а протокол (такой же как http: или mailto:, отвечающие за линки на веб-страницы и почтовые адреса соответственно). Конкретного и детального его описания в HMTL5, вроде бы, нет, но после принятия данного стандарта в iOS, он стал использоваться повсеместно.

Даже без спецификации многие браузеры вполне адекватно понимают ссылку на телефон в HTML, однако процесс обработки клика встречается разный: начиная от открытия диалогового окна с выбором приложения и заканчивая банальным игнорированием.

Как реагируют типовые программы:

Увы, не все разработчики браузеров для компьютеров (в том числе и непопулярных) позаботились о должной поддержке tel протокола, вероятно, работа над этим будет продолжаться. Хотя без конкретной спецификации она выглядит несколько абстрактной.

Оформление ссылки tel: в HTML

Поскольку линк находится в теге А, то отображение ссылки номера телефона полностью зависит от его стилей. Например, если для А добавили класс phone-style, то будет:

a.phone-style { color: #3e3a37; text-decoration: none; }

Убираем подчеркивание с text-decoration чтобы элемент выглядел как текст.

Если хотите применить один и тот же стиль всем телефонам на сайте, то пишете:

a[href^="tel:"] { color: #3e3a37; text-decoration: none; }

С помощью псевдо класса before и представления символов в unicode можно добавить небольшую иконку в начале:

a[href^="tel:"]:before { content: "\260e"; margin-right: 0.5em; }

Советы по созданию ссылки на номер телефона

Данная фишка для мобильных устройств — громадное преимущество, т.к. является отличным Call To Action маркетинговым инструментом. Посетителю сайта не надо пытаться выделить весь текст, вводить номер по памяти и т.п., он просто кликает в нужном месте, и активная ссылка телефона сделает свое дело. Однако тут есть нюансы.

Определение мобильных устройств

Как я уже сказал выше, в декстопнах подобный линк срабатывает далеко не всегда, поэтому разумно использовать разный код под разные типы устройств. Чтобы опция функционировала только в мобильных браузерах добавляете в шаблон, например, следующий JavaScript:

 if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) < document.getElementById("header-phone").innerHTML = '(098) 555-44-33'; > else < document.getElementById("header-phone").innerHTML = '(098) 555-44-33 '; > 

Здесь, в зависимости от результата условия в IF, в блоке с создается либо ссылка на телефон с tel:, либо просто HTML текст.

SEO оптимизация

В оригинальной статье есть пример кода контактов для бизнес сайтов, где информация может быть использована в Google выдаче.

 
Beach Bunny Swimwear
 Phone:  850-648-4200  

Теоретически, в линке можно еще указать rel=»nofollow».

Убираем автоопределение

Если вы собираетесь внедрять сегодняшний урок в свой шаблон, то вероятнее всего захотите отключить автоопределение телефона в iOS. Как минимум, чтобы система не переопределила существующие стили. Для этого в HEAD дописываете строку:

Итого. Если вы размещаете контактную информацию на сайте, то по умолчанию ссылки на телефоны не открываются — вам нужно использовать специальный протокол tel: в HTML теге А. Опция не имеет четкой спецификации, и поддерживается браузерами слегка «хаотично» — учитывайте это. В заключительной части я указал 3 пожелания, которые было бы неплохо внести в ваш код: отключить линки на дестопах, отформатировать код для лучшего считывания поисковыми роботами и т.п.

Если будут вопросы, пишите их ниже. А вы добавляете в своих проектах активные ссылки на номера телефонов? Почему да / нет?

1. Как выглядит сайт на разных устройствах с iOS – проверка верстки на iPhone, iPad, Mac
2. Основы CSS Grid — создание сетки сайта и параметры Grid на реальных примерах
3. Обнуление CSS стилей — зачем это делать, типы CSS Reset файлов
4. Валидность HTML – сервисы проверки, валидный noindex
5. CSSFilters — CSS фильтры изображений для сайта

17 Comments
Seoonly 26.11.2017 at 11:04 Сколько запарок изза номера телефона-)))

Tod 26.11.2017 at 13:26 Seoonly, зато очень круто на мобильном кликнуть на телефон и сразу звонить — небольшой wow эффект обеспечен.

Алла 03.01.2018 at 09:11 Как-то действительно чересчур сложно, разве оно того стоит? на всех сайтах по моему обычные телефоны.

Tod 03.01.2018 at 09:14 Алла, веб-разработчик сможет реализовать эту задачу по данной инструкции за пару минут. Звонить прямо с сайта, кликнув на номер, весьма удобно.

Олег 22.05.2018 at 16:33 А можно сделать кнопку, чтоб номер заносился в телефонную книгу клиента?
Tod 22.05.2018 at 21:27 Олег, такого скрипта я не встречал.

Валерий 19.06.2018 at 22:33 Здравствуйте, подскажите пожалуйста, как пс реагируют на такие ссылки, если они не оптимизированы ява скриптом и иными изменениями в коде, которые вы тут упомянули?

Tod 20.06.2018 at 12:52 Валерий, скрипт используется только дабы отделить мобильные устройства от немобильных, в обеих случаях телефон вполне различим для поисковика, тот же Google понимает скрипты. Можете для уверенности продублировать где-то этот номер в самом низу сайта, например, рядом с копирайтом — и в этот раз без скриптов и tel протокола.

Виталий 28.07.2018 at 01:31 Вам на звонок не отвечают по каким-то причинам. Как отменить вызов?

Tod 28.07.2018 at 01:48 Виталий, если честно не совсем понял вопрос.. tel просто позволяет ускорить набор номера, а дальше звонок/сброс — все это обычными функциями/кнопками телефона делается.

Сергей 21.08.2018 at 10:10 Здравствуйте!
Проверял новый шаблон на своем сайте интернет-магазина программой Xenu
Выдала — все ссылки на телефон как «битые».
Телефоны отображены в шапке сайта — т.е. получается, сколько страниц, столько и битых ссылок.
Можете что-то сказать по этой проблеме? — может быть Xenu просто не понимает их?

Tod 21.08.2018 at 14:14 Сергей, сложно сказать по каким алгоритмам проверяет данная программа. Если ссылка на телефон срабатывает, то не вижу с этим проблем. Как вариант, можно добавлять линк только для мобильных устройств — см. последний раздел статьи.

Сергей 21.08.2018 at 14:42 Посмотрел мобильную версию — отображается только номер тлф, размещенный в подвали сайта — оставил его со ссылкой.
В шапке номера прописал просто текстом

Александр 20.02.2020 at 00:36 Привет! Интересная статья! Наткнулся на нее так как сечас делаю кнопку по протоколу tel, НО!
Задача написать код с подменой номера, то есть:
менеджер офрмляет заказ — вносит номер в формате +37529ххх-хх-хх (при таком формате проходит по всем формам)
Однако для дальнейшей работы необходимо увязать звонок с 3CXPhone, (а он выступает как звонилка из под PBX), но так чтобы номер абонента менялся на формат 18029ххх-хх-хх (где 1 — это номер симки) и звонок должен пойти именно так.
Как сделать замену в коде протокола tel ?

Tod 21.02.2020 at 00:39 Александр, с такой задачей на сталкивался, поэтому не подскажу…

Юрий Бедулин 08.03.2020 at 23:46 Александр 20.02.2020 at 00:36 — я тоже из Беларуси — это вопрос не к протоколу тел, а всего лишь замене +375 на 180 и вариантов на любой вкус: — написать в php файле со тороны сервера замену — ява-скриптом на стороне клиента «обойти» все ссылки с тел и заменить одно на другое — ява-скрипт перехватить клик на такую кнопку/ссылку и подменив отправить в событие другое и т.д.

LenaKos 14.07.2021 at 19:19 Интересная статья, спасибо большое!
Добавить комментарий

Tod’s Blog создан для тех, кто хочет научиться зарабатывать в сети и активно интересуется темой монетизации сайтов.

Основные категории блога: партнерки, контекст, биржи ссылок, CPA, веб-разработка и создание сайтов, фриланс, SEO и SMO продвижение, блоггинг и т.п. Информация пригодятся как полным новичкам, так и тем, кто неплохо разбирается в теме онлайн заработка.

Контакты: stod84@gmail.com
Подписка: RSS | Email | Twitter

Где я зарабатываю

• Binance — лучшая международная биржа криптовалюты
• Collaborator — биржа прямой рекламы (ссылки/статьи)
• Freelancehunt — лучшая биржа фриланса