— HTML | MDN
HTML-элемент <a>
определяет гиперссылку для перехода на определённое место на странице или на другую страницу в Интернете. Также он может быть использован (в устаревшем варианте) для создания якоря — это место назначения для гиперссылок внутри страницы: так ссылки не ограничены только в перемещении между страницами.
<a href="https://developer.mozilla.org">MDN</a>
Этот элемент включает в себя общие атрибуты.
download
HTML5- Этот атрибут сообщает о том, что эта ссылка должна быть использована для скачивания файла, и, когда пользователь нажимает на ссылку, ему будет предложено сохранить файл как локальный. Если у этого атрибута есть значение, оно будет использовано как заполненное название файла в Окне сохранения, которое открывается, когда пользователь нажимает на ссылку (пользователь может поменять название перед сохранением файла). Ограничений на позволенные значения нет (хотя оно будет конвертировано в нижние подчёркивания, предотвращая специфичные пути), но стоит обратить внимание, что у большинства файловых систем есть ограничения на то, какие знаки препинания поддерживаются файловой системой, и браузеры регулируют названия согласно ограничениям.
Примечание:
- Атрибут может быть использован вместе с blob: URLs и
data: URLs
, чтобы пользователи могли проще скачать контент, который сгенерирован с помощью JavaScript (например, картинка, созданная с помощью онлайн-сайта для рисования). - Если представлен HTTP-заголовок
Content-Disposition:,
и он содержит иное название, у HTTP-заголовка есть преимущество над атрибутом. - Если этот атрибут установлен и
Content-Disposition:
установлен наinline
, Firefox отдаёт преимуществоContent-Disposition
, но в тоже время Chrome отдаёт преимущество атрибутуdownload
. - Этот атрибут соблюдается только на ресурсах с тем же доменом.
href
- Единственный обязательный атрибут для определения ссылки в HTML4, но больше необязательный в HTML5. Упущение этого атрибута создаёт ссылку-заполнитель. Атрибут
href
указывает ссылку: либо URL, либо якорь. Якорь — это название после символа#
, который указывает на элемент (ID (en-US)) на текущей странице. URL не ограничены только ссылками на HTTP, они могут использовать любой протокол, поддерживающийся браузером. Например,
,ftp
иmailto
работают в большинстве браузеров.
hreflang
- Этот атрибут сообщает язык документа по ссылке. Это чисто контрольная информация. Разрешённые значения определены в BCP47 для HTML5 и RFC1766 для HTML4. Используйте этот атрибут, только если задан
href
. ping
HTML5- Этот атрибут уведомляет указанные в нём URL, что пользователь перешёл по ссылке.
Это экспериментальное API, которое не должно использоваться в рабочем коде.- Этот атрибут сообщает, какую информацию передавать ресурсу по ссылке:
"no-referrer"
не отправляет заголовокReferer
."no-referrer-when-downgrade"
не отправляет заголовокReferer
ресурсу без TLS (HTTPS). Это стандартное поведение браузера, если не указана иная политика."origin"
отправляет такую информацию о текущей странице, как адрес, протокол, хост и порт."origin-when-cross-origin"
отправляет другим ресурсам только протокол, хост и порт, а внутри ресурса также отправляет путь."unsafe-url"
отправляет только ресурс и адрес (но не пароли или никнеймы). Это значение небезопасно, так как могут утечь ресурс и адрес с TLS-защищённых ресурсов на небезопасные.
rel
- Для ссылок, которые содержат атрибут
href
, этот атрибут устанавливает отношения между ссылками. Значением является список значений, разделённый пробелами. Значения и их семантика будут зарегистрированы другими сайтами, которые могут иметь произвольное значение к документу автора. Значением по умолчанию являетсяvoid
, если не задано иное. Используйте этот тег, только если задан атрибут
.
target
- Этот атрибут определяет, где показать содержимое по ссылке. В HTML4, это название и ключевое слово фрейма. В HTML5, это название или ключевое слово в браузере (например, вкладка, окно или iframe). У следующих ключевых слов специальные значения:
_self
загружает документ в текущем фрейме в HTML4 (или текущей вкладке в HTML5) как текущий. Это значение по умолчанию, если не указано иное значение._blank
загружает документ в новой окне в HTML4 или вкладке в HTML5._parent
загружает документ в родительском фрейме в HTML4 или в родительской вкладке в HTML5. Если нет родителя, параметр будет вести себя как
: Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as_self
._top
в HTML4 загружает документ в новом окне, игнорируя другие фреймы. В HTML5 загружает в окне высшего уровня. Если родителя нет, опция ведёт себя как_self
.
href
.
Примечание: Используя target
, вы должны добавлять rel="noopener noreferrer"
, чтобы избежать эксплуатацию API window.opener
.
type
- Этот атрибут определяет MIME-тип для документа по ссылке. Обычно это используется как контрольная информация, но в будущем браузеры могут добавлять маленькую иконку для медиафайлов. Например, браузер может добавить маленькую иконку мегафона, если тип файла установлен как
audio/wav
. - Используйте этот атрибут только если указан
href
.
Устаревшие
charset
Вышла из употребления с версии HTML5- Этот атрибут определяет кодировку документа по ссылке. Значением является разделённый пробелами или запятыми список кодировок. Значением по умолчанию является ISO-8859-1.
Предупреждение: Этот атрибут является устарелым в HTML5 и не должен использоваться. Чтобы достичь такого же эффекта, используйте HTTP-заголовок Content-Type
на ссылающемся ресурсе.
coords
HTML 4Вышла из употребления с версии HTML5- Для использования с формой объекта, этот атрибут использует разделённый запятыми список чисел для определения координат объекта на странице.
name
HTML 4 Вышла из употребления с версии HTML5- Этот атрибут обязателен в определении якоря на странице. Значение имени схоже со значением
и должен быть уникальным идентификатором и состоять из букв и цифр. Согласно спецификации HTML 4.01, иid
, иname
могут быть использованы с элементом<a>
, пока у них идентичные значения. rev
HTML 4 Вышла из употребления с версии HTML5- Этот атрибут определяет обратную ссылку, обратные отношения атрибута
rel
. Это полезно, чтобы отобразить, откуда пришёл объект как автор или документ.
shape
HTML 4 Вышла из употребления с версии HTML5- Этот атрибут используется, чтобы определить выбранный регион для ссылок на источник гипертекста, которые соединены с фигурой для создания изображения-карты. Значения для атрибута —
,default
,polygon
иrect
. Формат координат зависит от выбранной формы. Дляcircle
—x
,y
,r
, гдеx
иy
— пиксельные координаты центра круга иr
— радиус в пикселях. Для rect —x
,y
,w
,h
, гдеx
иy
— координаты верхнего левого угла прямоугольника, аw
иh
— ширина и высота соответственно. Значениямиpolygon
для координатор формы являютсяx1
y1
,x2
,y2
… Каждая параx
,y
определяет точку в полигоне, с последующей точкой становится прямой линией, и последняя точка объединяется с первой. Значениеdefault
для форм требует, чтобы полностью закрытая территория, например, изображение, было использовано.
Примечание: Желательно использовать атрибут usemap
для элемента <img>
и связанного элемента <map>
, чтобы определить горячие точки вместо атрибутов формы.
Нестандартные
datafld
Это API не было стандартизировано.- Этот атрибут определяет название столбца из объекта исходных данных, который принимает связанные данные.
Предупреждение: Этот атрибут нестандартный и не должен использоваться. Для достижения такого же эффекта, используйте скрипты и такие механизмы, как XMLHttpRequest, чтобы динамично заполнять страницу.
Поддержка | Gecko | Presto | WebKit | Trident |
Не реализована | Не реализована | Не реализована | IE4, IE5, IE6, IE7 (Убрана в IE8) | |
Нормативный документ | Microsoft’s Data Binding: dataFld Property (MSDN) |
datasrc
Это API не было стандартизировано.- Этот атрибут сообщает ID объекта исходных данных, который принимает связанные данные с этим элементом.
Предупреждение: Этот атрибут нестандартный и не должен использоваться. Для достижения такого же эффекта, используйте скрипты и такие механизмы, как XMLHttpRequest, чтобы динамично заполнять страницу.
Поддержка | Gecko | Presto | WebKit | Trident |
Не реализована | Не реализована | Не реализована | IE4, IE5, IE6, IE7 (Убрана в IE8) | |
Нормативный документ | Microsoft’s Data Binding: dataSrc Property (MSDN) |
methods
Это API не было стандартизировано.- Значение этого атрибута предоставляет информацию о функциях, которые могут быть выполнены на объекте. Обычно значения даны HTTP-протоколом, когда он использован, но может (для похожих целей, как для атрибута
title
) быть полезным для включения контрольной информации в ссылке. Например, браузер может выбрать другой тип рендеринга для ссылки как функцию определённых методов; что-то, что может быть найдено, может иметь другую иконку, или внешняя ссылка может получить индикатор перехода с текущего сайта. Этот элемент не понимается или не поддерживается полностью даже браузером Internet Explorer 4, который определил этот атрибут. Значенияmethods
(MSDN). urn
Это API не было стандартизировано.- Этот атрибут, предложенный Micosoft, определяет отношения уникального названия ресурса (URN) с ссылкой. Хотя он основан на стандартах работы нескольких лет назад, значение URN всё ещё не определено полностью, поэтому этот атрибут не имеет значения. Значения urn (MSDN).
Ссылка на внешний сайт
Создание кликабельной картинки
<a href="https://developer.mozilla.org/ru/" target="_blank">
<img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN logo">
</a>
Результат:
Создания ссылки для написания письма
Создание ссылки с номером телефона
С телефонами, способными выходить в Интернет и ноутбуками, которые привязаны к телефонам, ссылки с номером телефона становятся всё больше и больше полезными.
<a href="tel:+491570156">+49 157 0156</a>
Для дополнительных деталей о протоколе tel
, смотрите RFC 2806 и RFC 2396.
Использование
download
для сохранения canvas как PNGЕсли вы хотите позволить пользователю скачивать HTML canvas как картинку, вы можете создать ссылку с атрибутом download
и данные canvas как data: URL
:
var link = document.createElement("a");
link.innerHTML = 'download image';
link.addEventListener("click", function(ev) {
link.href = canvas.toDataURL();
link.download = "mypainting.png";
}, false);
document.body.appendChild(link);
Вы можете посмотреть на это в действии: jsfiddle.net/codepo8/V6ufG/2/.
BCD tables only load in the browser
Нажатие на <a>
приводит (по умолчанию) к фокусировке элемента, но оно может быть разным в зависимости от браузера и ОС.
Настольные | Windows 8.1 | OS X 10.9 |
---|---|---|
Firefox 30.0 | Да | Да |
Chrome ≥39 (Chromium bug 388666) | Да | Да |
Safari 7.0.5 | Нет данных | Только с заданным tabindex |
Internet Explorer 11 | Да | Нет данных |
Presto (Opera 12) | Да | Да |
Мобильные | iOS 7.1.2 | Android 4.4.4 |
---|---|---|
Safari Mobile | Только с заданным tabindex | Нет данных |
Chrome 35 | Неизвестно | Только с заданным tabindex |
HTML 3.2 включает в себя только name
, href
, rel
, rev
и title
.
Атрибут target
не работает в браузерах, не поддерживающих фреймы, таких как Netscape 1 generation. Кроме того, target
не допускается в «строгих» вариантах XHTML, но разрешён в формах frameset или «переходных» формах.
Рекомендации по JavaScript
Часто якорь используется с событием onclick
. Для избежания обновления страницы, href
часто устанавливается на #
, либо на javascript:void(0)
. Оба этих значения могут привести к некоторым неожиданным ошибкам во время копирования ссылки или открытия ссылки в новой вкладке или окне. Помните об этом, чтобы сделать юзабилити удобнее, когда пользователи используют якори и вы не допускаете стандартного поведения.
- Другие элементы:
<abbr>
,<em>
,<strong>
, <small> (en-US),<cite>
, <q> (en-US),<dfn>
,<time>
,<code>
, <var> (en-US), <samp> (en-US),<kbd>
, <sub> (en-US), <sup> (en-US),<b>
, <i> (en-US),<mark>
,<ruby>
, <rp> (en-US), <rt> (en-US),<bdo>
,<span>
,<br>
,<wbr>
.\u0000-\u007F]/, «»))Обратите внимание на знак вопроса.
0
Marc 30 Апр 2012 в 01:38
Вы можете дополнительно указать получателя сообщения первым.
mailto:[email protected]
Затем к первому параметру должен предшествовать
?
:mailto:[email protected]?body=
Любые дополнительные параметры (такие как или тема) должны начинаться с
&
:mailto:[email protected]?body=yourbody&subject=example
mailto:
также должен быть закодирован в URL, что, я полагаю, вы делаете в своей функцииescape()
.Дополнительная информация на About.com
0
Stanley Stuart 30 Апр 2012 в 01:38
Я считаю, что тег mailto делает именно то, что должен, и помещает его в поле «Кому». Существует тег для указания того, что идет в строку темы. Хотя я не знаю синтаксис, я уверен, что простой поиск Google будет включите правильное использование для вас ..
0
Skindeep2366 30 Апр 2012 в 01:33
Как добавить на сайт-портфолио ссылки и изображения
Добавление в разметку ссылок и изображений
На этом шаге мы добавим в разметку изображения и ссылки.
Начнём со списка контактов в шапке страницы. Внутри тега
<div>
с классомcontainer
укажите свой электронный адрес и номер телефона, правильно оформив ссылки:<header> <div> <a href="mailto:[email protected]">[email protected]</a> <a href="tel:+79876543210">+7 987 654 32 10</a> </div> </header>
Теперь добавьте ссылке с адресом класс
Код разметки сайтаheader-email
, а ссылке с номером телефона классheader-phone
.Обновите страницу.
Добавляем ссылки и изображения на сайтЕщё один блок с контактами располагается в подвале страницы. Здесь действуем так же: добавляем электронный адрес и номер телефона и оборачиваем их в ссылки. Только теперь классы будут немного другими:
footer-email
иfooter-phone
соответственно.<footer> <div> <a href="mailto:[email protected]">[email protected]</a> <a href="tel:+79876543210">+7 987 654 32 10</a> </div> </footer>
Теперь добавим фотографию. Она будет находиться под заголовком в блоке с классом
intro
. Добавлять фотографию мы будем с помощью тегаfigure
и вложенного в него тегаimg
. Не забудьте указать размеры изображения и альтернативный текст.<figure> <img src="files/user.jpg" alt="Фотография Неопознанного Енота"> </figure>
Добавьте тегу
Блок с пользовательской картинкойfigure
классuser-image
. Готово!Позже вы сможете заменить фотографию на вашу личную.
А теперь самое интересное — пришла пора добавить на сайт ваш первый проект. Это сайт магазина товаров для дома из первой части тренажёра. На странице портфолио уже есть нужный заголовок, осталось добавить изображение сайта и ссылку на него. Поехали!
Изображение вставим над заголовком. Для этого снова используем тег
figure
(с классомproject-image
) и вложенный в него тегimg
(адрес изображения —files/project.jpg
).<figure> <img src="files/project.jpg" alt="Cайт магазина товаров для дома"> </figure>
Ссылку добавим после описания и используем для неё класс
button
. Для готовых работ на сайте-портфолио у нас есть папкаsource
. Переместим в неё сайт магазина товаров для дома и укажем в ссылке адрес главной страницы.
Добавляем информацию о готовом проекте<a href="source/project/index.html">Открыть страницу</a>
Не забудьте загрузить на хостинг обновлённые файлы.
CSS для ссылок на файлы или e-mail — учебник CSS
Некоторые виды ссылок порой хочется визуально выделить. Но при этом присваивать каждой из них определенный класс будет неудобно и долго. Используя селекторы атрибутов, можно делать выборку ссылок, исходя из того, на какой тип документа она ссылается, на какой домен ведет и т. д.
На позапрошлом уроке мы показывали, как можно обозначить ссылку, которая открывается в новой вкладке (или новом окне). Там мы воспользовались селектором, который выбирает все ссылки, у которых есть атрибут
target
со значением_blank
. Сегодня мы углубимся в тему селекторов атрибутов и покажем, в каких еще ситуациях они могут стать полезными.Ссылки на e-mail и телефон
При клике по ссылке, содержащей адрес электронной почты или номер телефона, обычно запускается почтовый клиент / набор номера.=»https://www.facebook.com»] { … }
Ссылки на файлы
Вы можете определять не только, как начинается ссылка, но и как она заканчивается. Это весьма полезно, когда нужно стилизовать ссылки, которые ведут к определенным файлам. Например, чтобы выбрать ссылки на ZIP-архив, запишите:
a[href$=".zip"] { ... }
Символ
$
, указанный перед символом равенства, можно перевести как «заканчивается на». То есть, мы выбираем элементы<a>
, у которых есть атрибутhref
со значением, заканчивающимся на.zip
.Безусловно, аналогичным способом вы можете находить и стилизовать ссылки на другие файлы, например,
.png
,.pdf
,.mp3
,.xlsx
и так далее.Ссылки с data- атрибутами
В HTML5 есть возможность добавлять пользовательские атрибуты к любому тегу. Эти атрибуты используются для хранения различных значений. Атрибут, который добавляется, обязательно должен начинаться с приставки
data-
, после чего может идти произвольное имя. Одним из практических вариантов применения таких атрибутов является создание всплывающих подсказок с текстом, который как раз и хранится в значении пользовательского атрибута.Позже в книге мы рассмотрим способ использования таких атрибутов, а пока что покажем, как можно выбрать ссылки с
data-
атрибутом через соответствующий селектор. Допустим, что у некоторых ссылок есть пользовательский атрибутdata-description
. Обратиться к ним можно следующим образом:a[data-description] { ... }
Как вы догадываетесь, можно делать подобные выборки не только на основе
data-
атрибутов, а и на основе любых других —rel
,title
,target
,class
и т. д.В следующем уроке мы разберем популярную современную технику хранения и использования фоновых изображений, которая помогает повысить производительность сайта — спрайты CSS.
Тег address
Пример
Контактная информация для Example.com:
Определение и использование
Тег <address> определяет контактные данные автора/владельца документа или статьи.
Если элемент <address> находится внутри элемента <body>, он представляет контактные данные для документа.
Если элемент <address> находится внутри объекта <article> , он представляет контактные данные для этой статьи.
Текст в элементе <address> обычно отображается в italic. Большинство браузеров будут Добавьте разрыв строки до и после элемента Address.
Поддержка браузера
Элемент <address> Да Да Да Да Да Советы и примечания
Совет: Тег <address> не должен использоваться для описания почтового адреса, если только он не является частью контактной информации.
Совет: Элемент <address>, как правило, включается вместе с другими сведениями в <footer> Элемент.
Различия между HTML 4,01 и HTML5
HTML 4,01 не поддерживает тег <статья>, поэтому в HTML 4,01 тег <address> всегда определяет контактные данные document’s Автор/владелец.
Глобальные атрибуты
Тег <address> также поддерживает Глобальные атрибуты в HTML.
Атрибуты события
Тег <address> также поддерживает Атрибуты событий в HTML.
Похожие страницы
Ссылка на HTML DOM: Объект адреса
Параметры CSS по умолчанию
В большинстве обозревателей элемент <address> будет отображаться со следующими значениями по умолчанию:
Пример
address {
Try it Yourself »
display: block;
font-style: italic;
}Как сделать кликабельный номер телефона на сайте
Когда пользователь может в один клик по номеру телефона сделать звонок, это в плюс и ему, и вам. Он тратит минимум усилий и времени, чтобы вам дозвониться, а вы получаете +1 целевой звонок. Естественно, это относится к мобильным устройствам.
В этой статье мы покажем, как сделать кликабельный номер телефона на сайте. Алгоритмы отличаются в зависимости от того, на чем создан ваш сайт.
HTML-код
Обычный номер телефона, который пока является простым текстом, в коде может выглядеть так:
<span>+7(999)888-77-66</span>
Или так (если присвоен класс):
<pnumber» name=»phone_number»>+7(999)888-77-66</p>
За гипертекст (возможность текста в коде HTML включать в себя гиперссылку) отвечает тег <a>…</a>. Атрибут href=”” отвечает за то, куда будет направлен клиент — внутри кавычек указывается адрес страницы или действие.
За автоматический набор номера по клику отвечает параметр tel:ХХХ, где XXX — номер телефона без пробелов и тире.
Таким образом, для первого примера код будет следующим:
<span>
<a href=”tel:+79998887766”>+7(999)888-77-66</a>
</span>
К тексту добавили действие – вызов на конкретный номер.
Сделаем и второй номер кликабельным:
<pnumber» name=»phone_number»>
<a href=”tel:+79998887766”>+7(999)888-77-66</a>
</p>
По этому же принципу вы можете сделать кликабельный email.
Чтобы email стал кликабельным, поставьте атрибут <a href=”mailto:XXX”>.
Сайт на WordPress
Для Вордпресса есть специальный плагин CallPhone’r. Этот модуль выводит на каждой странице сайта иконку, при нажатии на которую мобильное устройство переходит в режим вызова.
Там же есть возможность настройки по времени отображения иконки. Это позволит не получать звонки от клиентов в нерабочее время.
Сайт на mottor (LPmotor)
Этот конструктор дает несколько вариантов.
1) Телефон в виде текста.
В этом случае выделите текст телефона в блоке и нажмите кнопку добавления ссылки в панели редактирования:
2) Переход к набору номера с кнопки. В панели редактирования блока «Кнопка» необходимо выставить «Переход по ссылке» и указать ваш номер телефона в формате «tel:88005555555».
3) Переход к набору номера с иконки/картинки. Здесь в выпадающем меню «Действие» нужно выбрать «Переход по ссылке» и вставить номер в формате «tel:+74957873422».
4) Также можно вставить кликабельный телефон на сайт в виде html блока.
Тогда в поле «Редактирование HTML-кода» нужно вставить
<a href=»tel:+74957873422″>Позвонить 8 (495) 787 34 22</a>.
Сайт на Wix
1) Чтобы создать кликабельный номер телефона:
— Нажмите «Редактировать текст»;
— Введите номер телефона. Не вводите другой текст в том же окне.
2) Чтобы связать текст ссылкой с номером телефона:
— Добавьте текст;
— Нажмите «Редактировать текст»;
— Введите текст, например, «Позвонить сейчас»;
— Выделите текст;
— Нажмите на иконку «Ссылка»;
— Выберите Номер телефона;
— Введите номер телефона в поле «Номер телефона»;
— Нажмите «Готово».
3) Чтобы связать кнопку ссылкой с номером телефона:
— Добавьте кнопку
— Измените текст кнопки
— Нажмите на иконку Ссылка
— Выберите Номер телефона
— Введите номер телефона в поле «Номер телефона»
— Нажмите «Готово».
Сайт на Tilda
Чтобы при клике на номер телефона начинался звонок или при клике на e-mail открывался почтовый клиент, нужно навесить на них ссылки.
1) Ссылка, которую нужно задать тексту с номером телефона: tel:+71234567890 (все без пробела). Будет работать при просмотре сайта на телефоне.
Например, выбираете блок меню ME301, во вкладке Контент в поле Дополнительно указываете номер телефона, затем выделяете его и с помощью выпадающей панели инструментов для текста добавляете ссылку вида tel:+7123456789.
2) Ссылка, которую нужно задать тексту с адресом почты: [email protected]. При добавлении ссылки в Контент блока в поле «Ссылка», нужно указывать ссылку как mailto:[email protected].
Как отслеживать клики по номеру телефона
Это можно делать без вмешательства в код и установки Менеджера тегов Google. В Яндекс.Метрике не так давно появился новый тип цели – «Клик по номеру телефона». Достаточно указать нужные параметры, и данные о звонках будут поступать в Метрику:
Чтобы всё работало, важно указать номер в точности такой же, какой указан в коде сайта. Лучше всего скопировать адрес ссылки прямо с сайта. Для этого:
- Кликните правой кнопкой мыши по номеру на сайте и нажмите в меню «Просмотреть код»;
- В открывшейся консоли разработчика вы увидите нужную ссылку с номером;
- Скопируйте её и вставьте в параметрах цели.
Данные по кликам на номер телефона появятся в отчете «Конверсии» уже через несколько минут после создания цели.
Анкоры и ссылки: как они работают в HTML
Гиперссылки — одна из фундаментальных технологий, которые делают интернет информационной магистралью. Понимание того, как использовать анкоры, является основным аспектов, который нужно освоить в HTML.
Тэгом анкора является <a>. Для него требуются открывающийся и закрывающийся тэги. Все, что расположено между ними, это сам анкор.
Если мы хотим использовать только одно слово в качестве анкора, мы оборачиваем только одно <a>слово</a> в теги анкора.
Чтобы ссылка охватывала весь абзац, нужно обернуть его в теги <a>.
<!-- Мы также можем использовать в качестве элемента анкора изображение --> <a><img src = "http://example.com/image-file.png" /></a>
Приведенные выше примеры мало полезны. Мы не включили в них дополнительных инструкций. Сейчас эти элементы ни к чему не привязаны. Для этого нужно использовать дополнительные атрибуты, которые мы рассмотрим в этой статье.
Для создания гиперссылок необходимы три атрибута: href, target и download.
Атрибут href используется для указания цели или адресата для анкора. Он применяется для определения URL-адреса, к которому должен привязываться анкор.
В этом примере <a href="http://example.com"> текста анкора</a> ссылка ведет на URL-адрес <em> www.example.com </em>.
С помощью атрибута href можно сделать намного больше, чем просто указать ссылку на другой сайт. Например:
- Использовать для создания прямой ссылки на любой элемент веб-страницы, которому был присвоен идентификатор.
- Для связи с ресурсом, используя протокол, отличный от http.
- Для запуска скрипта.
Например:
<a href="#Specify_a_Hyperlink_Target_href">Этот первый элемент анкора</a> ссылается на заголовок этого раздела статьи. Используя <code>id</code>, мы можем назначить для раздела элемент заголовка. Мы можем использовать протокол <code>mailto</ code>, чтобы создать ссылку, которая будет пытаться запустить на вашем компьютере почтовую программу, используемую по умолчанию. Давайте попробуем! Нам бы хотелось, чтобы вы <a href="mailto:[email protected]">связались</a> с нами! Если вы нажмете ссылку ниже, появится окно оповещения JavaScript. <a>Нажмите ссылку, чтобы увидеть, что произойдет </a>.
Элемент href прост в использовании. Но можно получить намного больше, познакомившись с атрибутом target.
Рассмотрим ссылку mailto, которую мы создали в предыдущем примере. Ее исходный код:
Нам бы хотелось, чтобы вы <a href="mailto:[email protected]">связались</a> с нами!
Ссылка полезна, но способ ее открытия не идеален. В зависимости от настроек браузера и ПК гиперссылка может перенаправить пользователей на сайты таких почтовых сервисов, как Gmail или Yahoo! Mail. Но из-за этого они посетители покинут наш ресурс.
Чтобы решить эту проблему, используйте атрибут target со значением _blank.
Мы будем рады, если вы <a href="mailto:[email protected]" target="_blank" rel="noopener">свяжетесь</a> с нами!
С его помощью мы заставляем браузер открывать ссылку в новой вкладке или новом окне браузера.
Атрибут download используется для идентификации ссылки, которая должна инициировать загрузку. Значение, присвоенное атрибуту download , это имя загружаемого файла.
Атрибут href также применяется при создании анкора, который инициирует загрузку. Он указывает на место размещения загружаемого файла.
Пример реализации:
Чтобы создать ссылку, которая указывает браузеру <a href="http://example.com/file.ext" download="Example_File">скачать файл</a>, используйте атрибут <code>href</ code>, чтобы идентифицировать файл для скачивания и атрибут <code>download</code>, чтобы указать имя скачиваемого файла.
Атрибут href в приведенном выше примере указывает на реальный файл. Когда загрузка будет завершена, его имя будет Example_File.ext, где .ext — это формат файла. Нет необходимости включать расширение файла в значение, присваиваемое атрибуту download. Оно будет идентифицировано и добавлено к имени загруженного файла.
Существует два типа гиперссылок: внутренние и внешние. Внутренние ссылки — это те, которые указывают на другие страницы сайта. Внешние ссылки указывают на веб-страницы, которые не являются частью сайта.
Создание внутренних ссылок важно по нескольким причинам:
- Они используются для создания меню навигации сайта.
- Внутренние ссылки используются в контенте сайт, чтобы помочь пользователям найти связанные публикации.
- Они используются поисковыми роботами при анализе содержимого сайта.
При создании внутренних ссылок убедитесь, что вы не переусердствовали. Ссылочный вес любой веб-страницы передается через ссылки, размещенные на ней. Чем больше ссылок вы размещаете на странице, тем больше ссылочного веса уходит через эти ссылки. Рекомендуется размещать не более 100 ссылок на одной странице.
Внешние ссылки важны по нескольким причинам:
- Внешние ссылки позволяют ссылаться на полезный для посетителей сайта сторонний контент.
- Когда другие площадки публикуют ссылки, которые указывают на наш сайт, они становятся обратными ссылками. Они позволяют передавать вашему сайту ссылочный вес и улучшать его ранжирование.
При использовании внешних ссылок не ссылайтесь на прямых конкурентов. И не забывайте применять атрибут target=»_ blank». Открывая внешние ссылки в новой вкладке браузера, пользователи продолжают оставаться на вашем сайте.
Конечно, вы видели и ссылки, которые выглядят примерно так:
Чтобы узнать больше <a href="http://example.com">нажмите здесь</a>!
Но лучше не использовать такие анкоры. Для этого существует несколько причин:
- Пользователям потребуется несколько секунд, чтобы исследовать текст вокруг ссылки и получить представление о том, куда она ведет.
- Поисковые роботы связывают текст анкора с URL-адресом ссылки. Правильно подобранный анкор помогает поисковым системам определять релевантность веб-страницы ключевикам.
Текст анкора должен быть кратким и идентифицировать ключевые слова, относящиеся к веб-странице. Два примера правильно выбранного текста ссылки:
Если хотите, чтобы ваш сайт получал больше трафика из <a href="http://www.google.com/" target="_blank" rel="noopener"> поисковых систем</a>, ознакомьтесь с нашим <a href="/seo/">руководством по SEO</a>, в котором вы найдете советы по улучшению ранжирования сайта.
Первая ссылка сообщает поисковым роботам и пользователям, что сайт http://www.google.com имеет отношение к ключевому слову «поисковые системы». Вторая ссылка сообщает, что страница, расположенная по относительному URL-адресу /seo/, связана с ключевым словом «руководство по SEO».
Абсолютные URL-адреса — это те, которые содержат полное (абсолютное) описание адреса ссылки. Они включают в себя протокол (http), полное имя домена и путь к файлу.
Относительные URL-адреса, ссылаясь на веб-страницу, описывают ее положение относительно текущей веб-страницы. При создании внутренних ссылок, указывающих на другие страницы одного и того же сайта, можно использовать относительные URL-адреса, а не абсолютные.
Например, если мы находимся по адресу: http://example.com/products/red-product/, и хотим сослаться на страницу синего товара, можно использовать любой из следующих анкоров:
<a href="/products/blue-product/">Перейти к странице синего товара!</a> <a href="../blue-product/">Перейти к странице синего товара!</a>
Первый синтаксис говорит следующее: «Перейдите на самый нижний уровень дерева, найдите в нем каталог product, а в нем откройте папку blue-product. Второй синтаксис говорит следующее: «Перейдите в родительский каталог для red-product и в нем вы найдете папку blue-product». Оба анкора указывают на URL-адрес: http://example.com/products/blue-product/.
Предположим, что нужно разместить ссылку на страницу «About Us», которая является прямым потомком главной. Вот как можно это сделать:
<a href="/about-us/">Узнайте больше о нас.</a>
В этом примере говорится следующее: «Вернитесь к самому нижнему уровню дерева каталогов, а затем найдите папку about-us».
Предположим, что мы снова находимся по адресу http://example.com/products/red-product/, и хотим разместить ссылку на страницу подкатегории. Она располагается в каталоге /red-products /category.
<a href="large.php">Смотреть все красные товары, доступные в большом размере!</a>
Приведенный выше URL-адрес заставляет браузер искать в текущей папке файл large.php и преобразовать его в URL-адрес — http://example.com/products/red-product/large.php.
Главное об относительных URL:
- Если URL-адрес начинается с «/», то мы заставляем браузер искать указанный файл или папку на самом нижнем уровне дерева каталогов.
- Если URL-адрес начинается с «../», то мы указываем браузеру на необходимость вернуться на один уровень вверх в дереве каталогов.
- Если URL-адрес начинается с имени файла или папки, то мы указываем браузеру искать ресурсы в текущем файле.
Существуют дополнительные атрибуты, которые можно использовать при работе с анкорами гиперссылок.
Этот необязательный атрибут сообщает браузеру язык документа, на который ведет ссылка. Например, если нужно сообщить браузеру, что целевой источник написан на испанском, мы будем использовать в качестве значения hreflang соответствующий код языка в формате ISO 639-1.
Чтобы сообщить браузеру, что <a href="http://example.com" hreflang="es">ссылка</a> ведет на ресурс на другом языке, можно использовать атрибут <code> hreflang </ code>.
Атрибут rel используется для описания отношений между анкором и целевым источником. Например:
Эта статья была написана <a href="https://plus.google.com/+AuthorName" rel="author">Отличным автором</a>.
Существует несколько значений, которые принимает атрибут rel:
- rel=»nofollow»: используйте это значение, если ссылаетесь на ресурс, но не хотите передавать ему ссылочный вес своего сайта. Например, если ссылаетесь на спамовый сайт в качестве примера того, чего не нужно делать.
- rel=»alternate»: если сайт имеет больше одной версии, используйте это значение для идентификации связанного ресурса в качестве альтернативной версии текущей страницы.
- rel=»bookmark»: это значение используется для определения URL-адреса, который является постоянным и может использоваться для закладки.
- rel=»help»: идентифицирует связанный ресурс как файл справки для страницы с этим значением.
- rel=»license»: используйте этот атрибут для ссылки на лицензию авторских прав.
- rel=»next»: используйте это значение для ссылки на следующий документ из серии.
- rel=»prev»: используйте это значение для ссылки на предыдущий документ из серии.
- rel=»noreferrer»: если хотите разместить ссылку на внешний сайт, но не хотите, чтобы целевой источник знал, кто на него ссылается, используйте это значение.
Необязательный атрибут type используется для идентификации типа интернет-носителя или MIME типа целевого документа. Например, при создании ссылки на сайт можно добавить атрибут type=»text/html», чтобы сообщить браузеру, что ссылка указывает на HTML-документ.
Сейчас этот атрибут не имеет большого значения. Но в будущем он будет сообщать пользователю сайта тип контента еще до нажатия на ссылку.
Значение type должно быть допустимым типом IANA. Некоторые из наиболее часто используемых значений: text/html, text/css, application/javascript и multipart/form-data.
Одним из распространенных способов использования ссылок является создание меню навигации, с помощью которого определяется логическая иерархия структуры сайта.
Название элемента Атрибуты Примечания link href
rel
media
title
typeЭлемент <link> используется для определения отношения между HTML-документом и внешним ресурсом. Он чаще всего применяется для определения взаимосвязи между документом и внешними таблицами стилей CSS. anchor hreflang
download
target
title
href
nameЭлемент <a> используется для создания гиперссылки на другую веб-страницу или другое место на той же веб-странице. base target
hrefЭлемент <base> используется для определения базового адреса, от которого можно создать все относительные URL, отображаемые на веб-странице. Если <base> имеет атрибут target, атрибут target, то он будет использоваться как атрибут по умолчанию для всех гиперссылок, отображаемых в документе. Данная публикация является переводом статьи «Anchors & Links: How They Work In HTML» , подготовленная редакцией проекта.
Все о mailto: Ссылки | CSS-уловки
Вы можете сделать ссылку привязки разнообразия сада (
Базовый функционал
Напишите нам
Работает!
Но мы сразу же сталкиваемся с несколькими проблемами UX. Одна из них заключается в том, что нажатий на эту ссылку удивляют некоторых людей так, как им не нравится. То же самое, если щелкнуть ссылку на PDF, чтобы открыть файл вместо веб-страницы. Ле вздыхает. Мы вернемся к этому чуть позже.
«Открыть в новой вкладке» иногда имеет значение.
Если у пользователя почтовый клиент по умолчанию (например, Outlook, Apple Mail и т. Д.) Настроен как собственное приложение, это не имеет особого значения. Они нажимают ссылку
mailto:
, это приложение открывается, создается новое электронное письмо, и оно ведет себя одинаково независимо от того, пытались вы открыть эту ссылку в новой вкладке или нет.Но если у пользователя настроен почтовый клиент на основе браузера, это имеет значение. Например, вы можете разрешить Gmail быть вашим почтовым обработчиком по умолчанию в Chrome. В этом случае ссылка ведет себя как любая другая ссылка: если вы не откроете новую вкладку, страница будет перенаправлена на Gmail.
Я немного сомневаюсь в этом. Раньше я обращал внимание на открытие ссылок в новых вкладках, но не на открытие писем. Я бы сказал, что немного склоняюсь к использованию
target = "_ blank"
для почтовых ссылок, несмотря на то, что мне кажется, что я использую его в других сценариях.Свяжитесь с нами по электронной почте
Добавление темы и тела
По какой-то причине это довольно редко можно увидеть, но ссылки
mailto:
также могут определять тему и содержание сообщения электронной почты. Это просто параметры запроса!mailto: [адрес электронной почты защищен]? Subject = Важно! & Body = Привет.
Добавить поддержку копирования и скрытого копирования
Вы можете отправить на несколько адресов электронной почты и даже копий, (CC) и слепых копий (BCC) людям по электронной почте.Хитрость заключается в большем количестве параметров запроса и разделении адресов электронной почты запятыми.
mailto: [защита электронной почты] [защита электронной почты], [защита электронной почты], [защита электронной почты] и [защита электронной почты]
Очень удобный сайт
mailtolink.me поможет создать ссылки для электронной почты.Используйте