<a> HTML-элемент привязки

Элемент <a> HTML (или элемент привязки) с атрибутом href создает гиперссылку на веб-страницы, файлы, адреса электронной почты, места на той же странице или любые другие ресурсы, на которые может указывать URL.

Содержимое каждого элемента <a> должно указывать на назначение ссылки. Если присутствует атрибут href, нажатие клавиши Enter, когда фокус установлен на элементе <a>, активирует его.

Попробуйте

<p>You can reach Michael at:</p>

<ul>
  <li><a href="https://example.com">Website</a></li>
  <li><a href="mailto:m.bluth@example.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

li {
  margin-bottom: 0.5rem;
}

Атрибуты

Атрибуты этого элемента включают глобальные атрибуты.

attributionsrc

Указывает, что браузеру следует отправить заголовок Attribution-Reporting-Eligible. На стороне сервера он используется для отправки в ответе заголовка Attribution-Reporting-Register-Source, регистрирующего источник атрибуции на основе навигации.

Браузер сохраняет данные источника, связанные с источником атрибуции на основе навигации (переданные в заголовке ответа Attribution-Reporting-Register-Source), когда пользователь нажимает ссылку. Подробнее см. в документации Attribution Reporting API.

Можно задать две версии этого атрибута:

• Логическое значение, то есть только имя attributionsrc. Оно указывает, что заголовок Attribution-Reporting-Eligible нужно отправить на тот же сервер, на который указывает атрибут href. Это подходит, если регистрация источника атрибуции выполняется на том же сервере.

• Значение, содержащее один или несколько URL, например:

  attributionsrc="https://a.example/register-source
  https://b.example/register-source"
  

  Этот вариант полезен, если запрашиваемый ресурс находится на сервере, которым вы не управляете, или если вы хотите регистрировать источник атрибуции на другом сервере. В этом случае в качестве значения attributionsrc можно указать один или несколько URL. При запросе ресурса заголовок Attribution-Reporting-Eligible будет отправлен на URL, указанные в attributionsrc, а также на источник ресурса. Затем эти URL могут отправить заголовок Attribution-Reporting-Register-Source для завершения регистрации.

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

Элементы <a> нельзя использовать в качестве триггеров атрибуции, только в качестве источников.

download

Заставляет браузер обрабатывать связанный URL как загружаемый файл. Атрибут можно использовать как со значением filename, так и без него:

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

  • HTTP-заголовок Content-Disposition
  • Последний сегмент в URL — путь
  • Тип MIME (из заголовка Content-Type, начала URL data: или значения Blob.type для URL blob:)

• filename: указанное значение предлагается в качестве имени файла. Символы / и \ заменяются символами подчеркивания (_). Файловые системы могут запрещать использование других символов в именах файлов, поэтому при необходимости браузеры изменят предлагаемое имя.

Примечание:

• download работает только с URL того же источника или схемами blob: и data:.
• Поведение загрузки в браузерах зависит от браузера, настроек пользователя и других факторов. Перед началом загрузки браузер может запросить подтверждение, сохранить файл автоматически или открыть его автоматически во внешнем приложении либо в самом браузере.
• Если заголовок Content-Disposition содержит сведения, отличающиеся от атрибута download, поведение может различаться:
  • Если в заголовке указано значение filename, оно имеет приоритет над именем файла, заданным в атрибуте download.
  • Если в заголовке указано значение inline, Chrome и Firefox отдают приоритет атрибуту и обрабатывают ресурс как загружаемый файл. Старые версии Firefox (до 82) отдают приоритет заголовку и отображают содержимое в браузере.

href

URL, на который указывает гиперссылка. Ссылки не ограничены URL на основе HTTP — они могут использовать любые схемы URL, поддерживаемые браузерами:

• Номера телефонов с URL tel:
• Адреса электронной почты с URL mailto:
• Текстовые сообщения SMS с URL sms:
• Исполняемый код с URL javascript:
• Хотя веб-браузеры могут не поддерживать другие схемы URL, веб-сайты могут работать с ними с помощью registerProtocolHandler()

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

• Разделы страницы с помощью фрагментов документа
• Определенные фрагменты текста с помощью текстовых фрагментов
• Фрагменты медиафайлов с помощью медиафрагментов

hreflang

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

interestfor

Определяет элемент <a> как инициатор интереса. Его значение — это id целевого элемента, который будет изменяться определенным образом (обычно отображаться или скрываться), когда к элементу-инициатору проявляют или теряют интерес (например, при наведении указателя или снятии наведения, а также при получении или потере фокуса). Дополнительные сведения и примеры см. в разделе Использование инициаторов интереса.

ping

Список URL, разделенных пробелами. При переходе по ссылке браузер отправит на эти URL запросы POST с телом PING. Обычно это используется для отслеживания.

referrerpolicy

Какую часть реферера отправлять при переходе по ссылке.

• no-referrer: заголовок Referer не отправляется.
• no-referrer-when-downgrade: заголовок Referer не отправляется источникам origin без TLS (HTTPS).
• origin: отправляемый реферер ограничивается источником страницы, с которой выполняется переход: ее схемой, хостом и портом.
• origin-when-cross-origin: реферер, отправляемый другим источникам, ограничивается схемой, хостом и портом. При навигации в пределах того же источника путь по-прежнему включается.
• same-origin: реферер отправляется для того же источника, но в междоменных запросах сведения о реферере отсутствуют.
• strict-origin: источник документа отправляется в качестве реферера, только если уровень безопасности протокола остается прежним (HTTPS→HTTPS); для менее защищенного назначения (HTTPS→HTTP) он не отправляется.
• strict-origin-when-cross-origin (по умолчанию): при запросе к тому же источнику отправляется полный URL; если уровень безопасности протокола остается прежним (HTTPS→HTTPS), отправляется только источник; для менее защищенного назначения (HTTPS→HTTP) заголовок не отправляется.
• unsafe-url: реферер включает источник и путь (но не фрагмент, пароль или имя пользователя). Это значение небезопасно, так как оно раскрывает источники и пути защищенных TLS-ресурсов незащищенным источникам.

rel

Отношение связанного URL, заданное списком типов ссылок, разделенных пробелами.

target

Место отображения связанного URL, заданное именем контекста просмотра (вкладки, окна или <iframe>). Следующие ключевые слова имеют особое значение и определяют, где загружать URL:

• _self: текущий контекст просмотра. (По умолчанию)
• _blank: обычно новая вкладка, но пользователи могут настроить браузер так, чтобы вместо нее открывалось новое окно.
• _parent: родительский контекст просмотра текущего. Если родителя нет, ведет себя как _self.
• _top: самый верхний контекст просмотра. Точнее, это «самый высокий» контекст, являющийся предком текущего. Если предков нет, ведет себя как _self.
• _unfencedTop: позволяет встроенным ограниченным фреймам перемещать верхнеуровневый фрейм (то есть выходить за пределы корневого фрейма, в отличие от других зарезервированных назначений). Обратите внимание: если использовать это значение вне контекста ограниченного фрейма, навигация все равно выполнится, но значение не будет действовать как зарезервированное ключевое слово.

Примечание: Установка target="_blank" для элементов <a> неявно обеспечивает такое же поведение rel, как при установке rel="noopener", которая не устанавливает window.opener.

type

Подсказывает формат связанного URL с помощью типа MIME. Встроенных функций нет.

Устаревшие атрибуты

charset

Указывал кодировку символов связанного URL.

Примечание: Этот атрибут устарел и не должен использоваться авторами. Используйте HTTP-заголовок Content-Type связанного URL.

coords

Использовался вместе с атрибутом shape. Список координат, разделенных запятыми.

name

Ранее требовался для определения возможного целевого места на странице. В HTML 4.01 атрибуты id и name можно было использовать одновременно в элементе <a>, если их значения совпадали.

Примечание: Вместо него используйте глобальный атрибут id.

rev

Задавал обратную ссылку — противоположность атрибуту rel. Устарел из-за крайней запутанности.

shape

Форма области гиперссылки на карте изображения.

Примечание: Вместо этого используйте элемент <area> для карт изображений.

Доступность

Понятный текст ссылки

Содержимое ссылки должно указывать, куда она ведет, даже вне контекста.

Недоступный, неинформативный текст ссылки

К сожалению, часто встречается ошибка, когда ссылкой делают только слова «нажмите здесь» или «здесь»:

<p>Learn more about our products <a href="/products">here</a>.</p>

Результат

Доступный, понятный текст ссылки

К счастью, это легко исправить, и исправленный вариант даже короче недоступного!

<p>Learn more <a href="/products">about our products</a>.</p>

Результат

Вспомогательные программы позволяют быстро вывести список всех ссылок на странице. Однако понятный текст ссылки полезен всем пользователям: сочетание клавиш для вывода «списка всех ссылок» имитирует то, как зрячие пользователи быстро просматривают страницы.

События onclick

Элементы привязки часто неправильно используют в качестве поддельных кнопок: задают для их атрибута href значение # или используют javascript:void(0), чтобы страница не обновлялась, а затем отслеживают их события click.

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

Вместо этого используйте элемент <button>. В целом гиперссылки следует использовать только для перехода по настоящим URL.

Внешние ссылки и ссылки на ресурсы, отличные от HTML

Для ссылок, которые открываются в новой вкладке или окне с помощью target="_blank", а также ссылок на загружаемые файлы следует указывать, что произойдет при переходе по ссылке.

Люди с нарушениями зрения, использующие программы экранного доступа, или испытывающие когнитивные трудности могут растеряться, если неожиданно откроется новая вкладка, окно или приложение. Старые программы экранного доступа могут даже не сообщить об этом.

Ссылка, открывающая новую вкладку или окно

<a target="_blank" href="https://www.wikipedia.org">
  Wikipedia (opens in new tab)
</a>

Результат

Ссылка на ресурс, отличный от HTML

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

<p>
  <a href="https://www.wikipedia.org/" target="_blank">
    Wikipedia
    <img src="new-tab.svg" width="14" alt="(Opens in new tab)" />
  </a>
  <br />
  <a href="2017-annual-report.ppt">
    2017 annual report
    <img src="powerpoint.svg" width="14" alt="(PowerPoint file)" />
  </a>
</p>
<p>
  <a href="https://www.wikipedia.org/" target="_blank">
    Wikipedia
    <img src="missing-icon.svg" width="14" alt="(Opens in new tab)" />
  </a>
  <br />
  <a href="2017-annual-report.ppt">
    2017 annual report
    <img src="missing-icon.svg" width="14" alt="(PowerPoint file)" />
  </a>
</p>

Результат

• WebAIM: ссылки и гипертекст — гипертекстовые ссылки
• MDN / Понимание WCAG, руководство 3.2
• G200: открытие новых окон и вкладок по ссылке только при необходимости
• G201: предварительное предупреждение пользователей об открытии нового окна

Ссылки для пропуска

Ссылка для пропуска — это ссылка, размещенная как можно раньше в содержимом <body> и ведущая к началу основного содержимого страницы. Обычно CSS скрывает такую ссылку за пределами экрана, пока на нее не будет установлен фокус.

<body>
  <a href="#content" class="skip-link">Skip to main content</a>

  <header>…</header>

  <!-- The skip link jumps to here -->
  <main id="content"></main>
</body>

.skip-link {
  position: absolute;
  top: -3em;
  background: white;
}
.skip-link:focus {
  top: 0;
}

Результат

Ссылки для пропуска позволяют пользователям клавиатуры обходить содержимое, повторяющееся на нескольких страницах, например навигацию в заголовке.

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

• WebAIM: ссылки для пропуска навигации
• Практическое руководство: использование ссылок для пропуска навигации
• MDN / Понимание WCAG, объяснения руководства 2.4
• Понимание критерия успеха 2.4.1

Размер и расположение

Размер

Интерактивные элементы, например ссылки, должны иметь достаточно большую область, чтобы их было легко активировать. Это помогает самым разным людям, в том числе тем, у кого есть проблемы с моторным контролем, и тем, кто использует неточные способы ввода, например сенсорный экран. Рекомендуется минимальный размер 44×44 пикселя CSS.

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

• Понимание критерия успеха 2.5.5: размер цели
• Размер цели и критерий 2.5.5
• Краткая проверка: крупные сенсорные цели

Расположение

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

Промежутки можно создавать с помощью свойств CSS, например margin.

• Дрожание рук и проблема огромной кнопки

Примеры

Ссылка на абсолютный URL

HTML

<a href="https://www.mozilla.com">Mozilla</a>

Результат

Ссылка на относительные URL

HTML

<a href="//example.com">Scheme-relative URL</a>
<a href="/en-US/docs/Web/HTML">Origin-relative URL</a>
<a href="p">Directory-relative URL</a>
<a href="./p">Directory-relative URL</a>
<a href="../p">Parent-directory-relative URL</a>

Результат

Ссылка на элемент на той же странице

<!-- <a> element links to the section below -->
<p><a href="#Section_further_down">Jump to the heading below</a></p>

<!-- Heading to link to -->
<h2 id="Section_further_down">Section further down</h2>

Результат

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

Чтобы создавать ссылки, открывающие почтовую программу пользователя для отправки нового сообщения, используйте схему mailto::

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

Результат

Подробнее об URL mailto:, например о добавлении темы или текста сообщения, см. в разделах Ссылки на адреса электронной почты и RFC 6068.

Ссылка на номера телефонов

<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>

Результат

Поведение ссылок tel: зависит от возможностей устройства:

• Мобильные устройства автоматически набирают номер.
• В большинстве операционных систем есть программы для звонков, например Skype или FaceTime.
• Веб-сайты могут совершать телефонные звонки с помощью registerProtocolHandler, например web.skype.com.
• Другие варианты поведения включают сохранение номера в контактах или отправку номера на другое устройство.

Сведения о синтаксисе, дополнительных возможностях и других особенностях схемы URL tel: см. в RFC 3966.

Использование атрибута download для сохранения <canvas> в формате PNG

Чтобы сохранить содержимое элемента <canvas> как изображение, можно создать ссылку, в которой href — это данные холста в виде URL data:, созданного с помощью JavaScript, а атрибут download задает имя загружаемого PNG-файла:

Пример приложения для рисования со ссылкой для сохранения

HTML

<p>
  Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my painting</a>
</p>

<canvas width="300" height="300"></canvas>

CSS

html {
  font-family: sans-serif;
}
canvas {
  background: white;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #6699cc;
  color: white;
  padding: 5px 10px;
}

JavaScript

const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
c.fillStyle = "hotpink";
let isDrawing;

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI * 2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener("mousemove", (event) =>
  draw(event.offsetX, event.offsetY),
);
canvas.addEventListener("mousedown", () => (isDrawing = true));
canvas.addEventListener("mouseup", () => (isDrawing = false));

document
  .querySelector("a")
  .addEventListener(
    "click",
    (event) => (event.target.href = canvas.toDataURL()),
  );

Результат

Безопасность и конфиденциальность

Элементы <a> могут влиять на безопасность и конфиденциальность пользователей. Дополнительные сведения см. в разделе Заголовок Referer: вопросы конфиденциальности и безопасности.

Использование target="_blank" без rel="noreferrer" и rel="noopener" делает сайт уязвимым для атак с использованием API window.opener. Однако обратите внимание: в новых версиях браузеров установка target="_blank" неявно обеспечивает такую же защиту, как установка rel="noopener". Подробнее см. в разделе Совместимость с браузерами.

Техническая сводка

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

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

См. также

• <link> похож на <a>, но используется для гиперссылок метаданных, невидимых пользователям.
• :link — это псевдокласс CSS, который выбирает элементы <a> с URL в атрибуте href, который пользователь ещё не посещал.
• :visited — это псевдокласс CSS, который выбирает элементы <a> с URL в атрибуте href, который пользователь посещал ранее.
• :any-link — это псевдокласс CSS, который выбирает элементы <a> с атрибутом href.
• Текстовые фрагменты — это инструкции пользовательского агента, добавляемые к URL-адресам. Они позволяют авторам контента создавать ссылки на определённый текст на странице без необходимости использовать идентификаторы.