Эта статья нуждается в редакционном обзоре. Как вы можете помочь.
HTML-элемент <a>
определяет гиперссылку для перехода на определённое место на странице или на другую страницу в Интернете. Также он может быть использован (в устаревшем варианте) для создания якоря — это место назначения для гиперссылок внутри страницы: так ссылки не ограничены только в перемещении между страницами.
<a href="https://developer.mozilla.org">MDN</a>
Категории контента | Основной поток, текстовый контент, интерактивный контент, скрытый контент. |
---|---|
Разрешённый контент | Логический контент, содержащий либо основной поток (включая интерактивный контент), либо заголовочный контент. |
Опускание тегов | Открывающий и закрывающий теги обязательны. |
Разрешённые родительские элеметны | Любые элементы, в которых разрешён текстовый контент или элементы, в которых разрешёны элементы основного потока. |
DOM-интерфейс | HTMLAnchorElement |
Атрибуты
Этот элемент включает в себя общие атрибуты.
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) на текущей странице. URL не ограчены только ссылками на HTTP, они могут использовать любой протокол, поддерживающийся браузером. Например,file
,ftp
иmailto
работают в большинстве браузеров.
Примечание: Вы можете использовать специальное значение «top», чтобы создать ссылки в начало страницы, например: <a href="#top">Вернуться наверх</a>
. Это поведение указано в Спецификациях HTML5.
hreflang
- Этот атрибут сообщает язык документа по ссылке. Это чисто контрольная информация. Разрешённые значения определены в BCP47 для HTML5 и RFC1766 для HTML4. Используйте этот атрибут, только если задан
href
. ping
HTML5- Этот атрибут уведомляет указанные в нём URL, что пользователь перешёл по ссылке.
referrerpolicy
- Этот атрибут сообщает, какую информацию передавать ресурсу по ссылке:
-
"no-referrer"
не отправляет заголовокReferer
."no-referrer-when-downgrade"
не отправляет заголовокReferer
ресурсу без TLS (HTTPS). Это стандартное поведение браузера, если не указана иная политика."origin"
отправляет такую информацию о текущей странице, как адрес, протокол, хост и порт."origin-when-cross-origin"
отправляет другим ресурсам только протокол, хост и порт, а внутри ресурса также отправляет путь."unsafe-url"
отправляет только ресурс и адрес (но не пароли или никнеймы). Это значение небезопасно, так как могут утечь ресурс и адрес с TLS-защищённых ресурсов на небезопасные.
rel
- Для ссылок, которые содержат атрибут
href
, этот атрибут устанавливает отношения между ссылками. Значением является список значений, разделённый пробелами. Значения и их семантика будут зарегистрированы другими сайтами, которые могут иметь произвольное значение к документу автора. Значением по умолчанию являетсяvoid
, если не задано иное. Используйте этот тег, только если задан атрибутhref
.
target
- Этот атрибут определяет, где показать содержимое по ссылке. В HTML4, это название и ключевое слово фрейма. В HTML5, это название или ключевое слово в браузере (например, вкладка, окно или iframe). У следующих ключевых слов специальные значения:
-
_self
загружает документ в текущем фрейме в HTML4 (или текущей вкладке в HTML5) как текущий. Это значение по умолчанию, если не указано иное значение._blank
загружает документ в новой окне в HTML4 или вкладке в HTML5._parent
загружает документ в родительском фрейме в HTML4 или в родительской вкладке в HTML5. Если нет родителя, параметр будет вести себя как_self
: 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- Этот атрибут обязателен в определении якоря на странице. Значение имени схоже со значением
id
и должен быть уникальным идентификатором и состоять из букв и цифр. Согласно спецификации HTML 4.01, иid
, иname
могут быть использованы с элементом<a>
, пока у них идентичные значения. rev
HTML 4 Вышла из употребления с версии HTML5- Этот атрибут определяет обратную ссылку, обратные отношения атрибута
rel
. Это полезно? чтобы отобразить, откуда пришёл объект как автор или документ.
shape
HTML 4 Вышла из употребления с версии HTML5- Этот атрибут используется, чтобы определить выбранный регион для ссылок на источник гипертекста, которые соединены с фигурой для создания изображения-карты. Значения для атрибута —
circle
,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
- Этот атрибут определяет назание столбца из объекта исходных данных, который принимает связанные данные.
Предупреждение: Этот атрибут нестандартный и не должен использоваться. Для достижения такого же эффекта, используйте скрипты и такие механизмы, как XMLHttpRequest, чтобы динамично заполнять страницу.
Поддержка | Gecko | Presto | WebKit | Trident |
Не реализована | Не реализована | Не реализована | IE4, IE5, IE6, IE7 (Убрана в IE8) | |
Нормативный документ | Microsoft's Data Binding: dataFld Property (MSDN) |
datasrc
- Этот атрибут сообщает ID объекта исходных данных, который принимает связанные данные с этим элементом.
Предупреждение: Этот атрибут нестандартный и не должен использоваться. Для достижения такого же эффекта, используйте скрипты и такие механизмы, как XMLHttpRequest, чтобы динамично заполнять страницу.
Поддержка | Gecko | Presto | WebKit | Trident |
Не реализована | Не реализована | Не реализована | IE4, IE5, IE6, IE7 (Убрана в IE8) | |
Нормативный документ | Microsoft's Data Binding: dataSrc Property (MSDN) |
methods
- Значение этого атрибута предоставляет информацию о функциях, которые могут быть выполнены на объекте. Обычно значения даны HTTP-протоколом, когда он использован, но может (для похожих целей, как для атрибута
title
) быть полезным для включения контрольной информации в ссылке. Например, браузер может выбрать другой тип рендеринга для ссылки как функцию определённых методов; что-то, что может быть найдено, может иметь другую иконку, или внешняя ссылка может получить индикатор перехода с текущего сайта. Этот элемент не понимается или не поддерживается полностью даже браузером Internet Explorer 4, который определил этот атрибут. Значенияmethods
(MSDN). urn
- Этот атрибут, предложенный Micosoft, определяет отношения уникального названия ресурса (URN) с ссылкой. Хотя он основан на стандартах работы нескольких лет назад, значение URN всё еще не определено полностью, поэтому этот атрибут не имеет значения. Значения urn (MSDN).
Примеры
Ссылка на внешний сайт
<!-- Ссылка на внешний файл --> <a href="https://www.mozilla.com/">Внешняя ссылка</a>
Результат:
Создание кликабельной картинки
<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="mailto:[email protected]">Отправить сообщение в никуда</a>
Результат выглядит примерно так: Отправить сообщение в никуда.
Для дополнительных деталей использования mailto
, таких как тема, текст или другое, смотрите Email-ссылки или RFC 6068.
Создание ссылки с номером телефона
С телефонами, способными выходить в Интернет и ноутбуками, которые привязаны к телефонам, ссылки с номером телефона становятся всё больше и больше полезными.
<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/.
Спецификации
Спецификация | Статус | Примечание |
---|---|---|
Referrer Policy Определение 'referrer attribute' в этой спецификации. |
Рабочий черновик | Добавлен атрибут referrer . |
WHATWG HTML Living Standard Определение '<a>' в этой спецификации. |
Живой стандарт | |
HTML5 Определение '<a>' в этой спецификации. |
Рекомендация | |
HTML 4.01 Specification Определение '<a>' в этой спецификации. |
Рекомендация |
Совместимость в браузерах
Функция | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Основная поддержка | (Да) | 1.0 (1.7 или ранее) [1] | (Да) | (Да) | (Да) |
href="#top" |
(Да) | 10.0 (10.0) | (Да) | (Да) | (Да) |
download |
14 | 20.0 (20.0) | Edge 13 [5] | 15 | Нет |
ping |
(Да) | Нет [2] | Нет | (Да) | Нет |
referrerpolicy |
46.0 [3] | 45 (45) [4] | Нет | Нет | Нет |
Функция | Android | Android Webview | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Основная поддержка | (Да) | (Да) | 1.0 (1.0) [1] | (Да) | (Да) | (Да) | (Да) |
href="#top" |
(Да) | ? | 10.0 (10.0) | (Да) | (Да) | (Да) | ? |
download |
(Да) | ? | 20.0 (20.0) | Нет | ? | Нет | ? |
ping |
? | ? | Нет [2] | ? | ? | ? | ? |
referrerpolicy |
Нет | 46.0 [3] | 45.0 (45.0) [4] | Нет | Нет | Нет | 46.0 [3] |
[1] Начиная с Gecko 41 (Firefox 41.0 / Thunderbird 41.0 / SeaMonkey 2.38), <a>
без атрибута href
больше не классифицируется как интерактивный элемент. Нажатие внутри <label>
активирует контент с ярлыком (баг 1167816).
[3] Реализовано под флагом.
[4] С помощью параметра network.http.enablePerElementReferrer, по умолчанию
false
. С Firefox 42 до Firefox 44 атрибут был назван referrer
.
[5] Попытка скачать data: URLs
приводит к падению до версии 14.14357.
Нажатие и фокус
Нажатие на <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>
,<cite>
,<q>
,<dfn>
,<time>
,<code>
,<var>
,<samp>
,<kbd>
,<sub>
,<sup>
,<b>
,<i>
,<mark>
,<ruby>
,<rp>
,<rt>
,<bdo>
,<span>
,<br>
,<wbr>
.