Spec-Zone.ru › HTML

<a>: Элемент ссылки

Базовая Широкодоступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

  • Подробнее
  • Полная совместимость
  • Отправить отзыв

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

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

Попробуйте

Атрибуты

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

attributionsrc Экспериментальный

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

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

Вы можете задать два варианта этого атрибута:

  • Булево значение, т.е. только имя attributionsrc. Это указывает, что вы хотите отправить заголовок Attribution-Reporting-Eligible на тот же сервер, что и href. Это подходит, когда вы обрабатываете регистрацию источника атрибуции на том же сервере.
  • Значение, содержащее один или несколько URL-адресов, например:
    html
    attributionsrc="https://a.example/register-source
https://b.example/register-source"
    Это полезно в случаях, когда запрашиваемый ресурс находится не на сервере, которым вы управляете, или вы просто хотите обработать регистрацию источника атрибуции на другом сервере. В этом случае вы можете указать один или несколько URL-адресов в качестве значения attributionsrc. При запросе ресурса заголовок Attribution-Reporting-Eligible будет отправлен на указанные URL-адреса в attributionsrc помимо источника ресурса. Эти URL-адреса могут затем ответить заголовком Attribution-Reporting-Register-Source для завершения регистрации.

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

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

download

Принуждает браузер обрабатывать связанный URL-адрес как загрузку. Может использоваться с или без значения filename.

  • Без значения браузер предложит имя файла/расширение, сгенерированное из различных источников:
    • Заголовок HTTP Content-Disposition
    • Последний сегмент в URL-адресе путь
    • Тип медиа (из заголовка Content-Type, начала data: URL-адреса, или Blob.type для blob: URL-адреса)
  • filename: определение значения предполагает его как имя файла. / и \ символы преобразуются в нижнее подчеркивание (_). Файловые системы могут запрещать другие символы в именах файлов, поэтому браузеры будут корректировать предложенное имя при необходимости.

Примечание:

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

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

  • Разделы страницы с фрагментами документа
  • Конкретные части текста с фрагментами текста
  • Части файлов мультимедиа с фрагментами мультимедиа
  • Номера телефонов с tel: URL-адресами
  • Электронные адреса с mailto: URL-адресами
  • SMS-сообщения с sms: URL-адресами
  • Хотя веб-браузеры могут не поддерживать другие схемы URL, веб-сайты могут с registerProtocolHandler()
hreflang

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

ping

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

referrerpolicy

Как много информации о ссылке-источнике отправлять при переходе по ссылке.

  • no-referrer: Заголовок Referer не будет отправлен.
  • no-referrer-when-downgrade: Заголовок Referer не будет отправлен в источники без 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> для карт изображений вместо него.

Доступность

Ясный текст ссылок

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

Недоступный, слабый текст ссылки

Частая ошибка — использование только слов «нажмите здесь» или «здесь»:

html
<p>Learn more about our products <a href="/products">here</a>.</p>
Результат

Ясный текст ссылки

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

html
<p>Learn more <a href="/products">about our products</a>.</p>
Результат

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

События onclick

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

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

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

Внешние ссылки и ссылки на ресурсы, не являющиеся HTML

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

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

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

html
<a target="_blank" href="https://www.wikipedia.org">
  Wikipedia (opens in new tab)
</a>
Результат

Ссылка на ресурс, не являющийся HTML

html
<a href="2017-annual-report.ppt">2017 Annual Report (PowerPoint)</a>

Если для обозначения поведения ссылки используется значок, убедитесь, что у него есть альтернативный текст:

html
<a target="_blank" href="https://www.wikipedia.org">
  Wikipedia
  <img alt="(opens in new tab)" src="newtab.svg" />
</a>

<a href="2017-annual-report.ppt">
  2017 Annual Report
  <img alt="(PowerPoint file)" src="ppt-icon.svg" />
</a>
Результат
  • WebAIM: Ссылки и гипертекст — Гипертекстовые ссылки
  • MDN / Понимание WCAG, Руководство 3.2
  • G200: Открытие новых окон и вкладок из ссылки только при необходимости
  • G201: Предоставление пользователям предварительного предупреждения об открытии нового окна

Спусковые ссылки

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

html
<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>
css
.skip-link {
  position: absolute;
  top: -3em;
  background: #fff;
}
.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

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

Результат

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

HTML

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>

Результат

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

html
<!-- <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>

Результат

Примечание: Вы можете использовать href="#top" или пустой фрагмент (href="#") для ссылки на начало текущей страницы, как определено в спецификации HTML.

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

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

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

Результат

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

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

html
<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.
  • Другие действия могут включать сохранение номера в контакты или отправку номера на другое устройство.

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

Использование атрибута download для сохранения как PNG

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

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

HTML
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
css
html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}
JavaScript
js
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". Подробности см. в разделе совместимость браузеров.

Техническое описание

Категории контента Контент потока, фразовый контент, интерактивный контент, осязаемый контент.
Разрешённый контент Прозрачный, за исключением того, что ни один потомок не может быть интерактивным контентом или элементом <a>, и ни один потомок не может иметь указанный атрибут tabindex.
Пропуск тега Нет, и открывающий, и закрывающий теги обязательны.
Разрешённые родительские элементы Любой элемент, который принимает контент потока, но не другие элементы <a>.
Неявная роль ARIA link, когда присутствует атрибут href, в противном случае generic
Разрешённые роли ARIA

Когда присутствует атрибут href:

  • button
  • checkbox
  • menuitem
  • menuitemcheckbox
  • menuitemradio
  • option
  • radio
  • switch
  • tab
  • treeitem

Когда атрибут href отсутствует:

  • любой
Интерфейс DOM HTMLAnchorElement

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

Спецификация
Стандарт HTML
# the-a-element

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

Настольный Мобильный
Chrome Edge Firefox Opera Safari Chrome Android Firefox для Android Opera Android Safari на IOS Samsung Internet WebView Android
a 1 12
1Начиная с Firefox 41, <a> без атрибута href больше не классифицируется как интерактивный контент: щелчок по нему внутри <label> активирует помеченный контент (bug 1167816).
 15 1 18
4Начиная с Firefox 41, <a> без атрибута href больше не классифицируется как интерактивный контент: щелчок по нему внутри <label> активирует помеченный контент (bug 1167816).
 14 1 1.0 4.4
attributionsourceid Нет Нет Нет Нет 14.1 Нет Нет Нет 14.5 Нет Нет
attributionsrc 117 117 Нет 103 Нет 117 Нет 78 Нет 24.0 117
charset 1 12 1 15 1 18 4 14 1 1.0 4.4
coords 1 79
1–58Вы больше не можете вкладывать элемент <a> внутри элемента <map> для создания области активной зоны - поддержка атрибутов coords и shape удалена.
 15 1 18
4–58Вы больше не можете вкладывать элемент <a> внутри элемента <map> для создания области активной зоны - поддержка атрибутов coords и shape удалена.
 14 1 1.0 4.4
download
14Начиная с Chrome 65, кросс-доменные загрузки не поддерживаются в элементе <a>.
18Начиная с Edge 79, кросс-доменные загрузки не поддерживаются в элементе <a>.
13["До Edge 14 (сборка 14357) попытка загрузки URI данных приводила к сбою Edge (bug 7160092).", "Edge 17 или более старые версии не следовали значению атрибутов для определения имени файла (bug 7260192)."]
 20
15Начиная с Opera 52, кросс-доменные загрузки не поддерживаются в элементе <a>.
10.1
18Начиная с Chrome 65, кросс-доменные загрузки не поддерживаются в элементе <a>.
20
14Начиная с Opera 47, кросс-доменные загрузки не поддерживаются в элементе <a>.
13
1.0Начиная с Samsung Internet 9.0, кросс-доменные загрузки не поддерживаются в элементе <a>.
4.4Начиная с Chrome 65, кросс-доменные загрузки не поддерживаются в элементе <a>.
href 1 12 1 15 1 18 4 14 1 1.0 4.4
hreflang 1 12 1 15 1 18 4 14 1 1.0 4.4
implicit_noopener 88 88 79 74 12.1 88 79 63 12.2 15.0 88
name 1 12 1 15 1 18 4 14 1 1.0 4.4
ping 12 17
1Это свойство доступно, но не оказывает никакого влияния, если параметр browser.send_pings не установлен в true. См. bug 951104.
 15 6 18
4Это свойство доступно, но не оказывает никакого влияния, если параметр browser.send_pings не установлен в true. См. bug 951104.
 14 6 1.0 ≤37
referrerpolicy 51 79 50 38 14 51 50 41 14 7.2 51
rel 1 12 1 15 1 18 4 14 1 1.0 4.4
rev 1 12 1 15 1 18 4 14 1 1.0 4.4
shape 1 79
1–58Вы больше не можете вкладывать элемент <a> внутри элемента <map> для создания области активной зоны - поддержка атрибутов coords и shape удалена.
 15 1 18
4–58Вы больше не можете вкладывать элемент <a> внутри элемента <map> для создания области активной зоны - поддержка атрибутов coords и shape удалена.
 14 1 1.0 4.4
target 1 12 1 15 1 18 4 14 1 1.0 4.4
text_fragments 80 80 Нет 67 16.1 80 Нет 57 16.1 13.0 80
type 1 12 1 15 1 18 4 14 1 1.0 4.4

См. также

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

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API