This page was translated from English by the community.Learn more and join the MDN Web Docs community.
<a> - элемент ссылки
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
* Some parts of this feature may have varying levels of support.
HTML-элемент<a> (илиякорь), с атрибутомhref определяет гиперссылку на страницу в Интернете, файл, адрес электронной почты, определённое место на странице или на что-либо ещё, на что может указывать URL-адрес.
Содержимое каждого элемента<a> должно описывать место назначения ссылки. Если присутствует атрибутhref и фокус на элементе<a>, то нажатие клавишиВвод активирует его.
<p>Связаться с Иваном можно следующими способами:</p><ul> <li><a href="https://example.com">Веб-сайт</a></li> <li><a href="mailto:ivan@example.com">Электронная почта</a></li> <li><a href="tel:+123456789">Телефон</a></li></ul>li { margin-bottom: 0.5rem;}| Категории контента | Основной поток,текстовый контент,интерактивный контент, скрытый контент. |
|---|---|
| Разрешённый контент | Логический контент, содержащий либоосновной поток (исключаяинтерактивный контент), либозаголовочный контент. |
| Опускание тегов | Открывающий и закрывающий теги обязательны. |
| Разрешённые родительские элементы | Любые элементы, в которых разрешёнтекстовый контент или элементы, в которых разрешёны элементыосновного потока. |
| DOM-интерфейс | HTMLAnchorElement |
In this article
Атрибуты
Этот элемент включает в себяобщие атрибуты.
downloadЭтот атрибут сообщает о том, что эта ссылка должна быть использована для скачивания файла, и, когда пользователь нажимает на ссылку, ему будет предложено сохранить файл как локальный. Если у этого атрибута есть значение, оно будет использовано как заполненное название файла в Окне сохранения, которое открывается, когда пользователь нажимает на ссылку (пользователь может поменять название перед сохранением файла). Ограничений на позволенные значения нет (хотя оно будет конвертировано в нижние подчёркивания, предотвращая специфичные пути), но стоит обратить внимание, что у большинства файловых систем есть ограничения на то, какие знаки препинания поддерживаются файловой системой, и браузеры регулируют названия согласно ограничениям.
Примечание:
- Атрибут может быть использован вместе сblob: URLs и
data: URLs, чтобы пользователи могли проще скачать контент, который сгенерирован с помощью JavaScript (например, картинка, созданная с помощью онлайн-сайта для рисования). - Если представлен HTTP-заголовок
Content-Disposition:,и он содержит иное название, у HTTP-заголовка есть преимущество над атрибутом. - Если этот атрибут установлен и
Content-Disposition:установлен наinline, Firefox отдаёт преимуществоContent-Disposition, но в тоже время Chrome отдаёт преимущество атрибутуdownload. - Этот атрибут соблюдается только на ресурсах с тем же доменом.
- Атрибут может быть использован вместе сblob: URLs и
hrefЕдинственный обязательный атрибут для определения ссылки в HTML4, но больше необязательный в HTML5. Упущение этого атрибута создаёт ссылку-заполнитель. Атрибут
hrefуказывает ссылку: либо URL, либо якорь. Якорь — это название после символа#, который указывает на элемент (ID) на текущей странице. URL не ограничены только ссылками на HTTP, они могут использовать любой протокол, поддерживающийся браузером. Например,file,ftpиmailtoработают в большинстве браузеров.
Примечание:Вы можете использовать специальное значение «top», чтобы создать ссылки в начало страницы, например:<a href="#top">Вернуться наверх</a>.Это поведение указано в Спецификациях HTML5.
hreflangЭтот атрибут сообщает язык документа по ссылке. Это чисто контрольная информация. Разрешённые значения определены вBCP47 для HTML5 иRFC1766 для HTML4. Используйте этот атрибут, только если задан
href.pingЭтот атрибут уведомляет указанные в нём 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Определяет, где показать содержимое связанного документа. Это ключевое слово или имяконтекста отображения (вкладка, окно или
<iframe>). Следующие ключевые слова имею специальные значения:_self: Текущий контекст отображения (это значение по умолчанию)._blank: Новая вкладка или новое окно в зависимости от настроек браузера._parent: Родительский контекст отображения. Если родителя нет, то поведение аналогично_self._top: Самый верхний контекст просмотра, то есть контекст самого первого предка. Если предков нет, то поведение аналогично_self._unfencedTop: позволяет встроеннымизолированным фреймам обращаться к фрейму верхнего уровня (т.е. выходить за пределы изолированного фрейма). Обратите внимание, что навигация будет работать, если она используется вне контекста изолированного фрейма, но она не будет действовать как зарезервированное ключевое слово.Примечание:Использование
target="_blank"на элементах<a>неявно приводит к такому же поведениюrel, как при указании значенияrel="noopener", которое не устанавливаетwindow.opener.
typeЭтот атрибут определяетMIME-тип для документа по ссылке. Обычно это используется как контрольная информация, но в будущем браузеры могут добавлять маленькую иконку для медиафайлов. Например, браузер может добавить маленькую иконку мегафона, если тип файла установлен как
audio/wav.Используйте этот атрибут только если указанhref.
Устаревшие
charsetЭтот атрибут определяет кодировку документа по ссылке. Значением является разделённый пробелами или запятымисписок кодировок. Значением по умолчанию является ISO-8859-1.
Предупреждение:Этот атрибут является устарелым в HTML5 ине должен использоваться. Чтобы достичь такого же эффекта, используйте HTTP-заголовок
Content-Typeна ссылающемся ресурсе.coordsДля использования с формой объекта, этот атрибут использует разделённый запятыми список чисел для определения координат объекта на странице.
nameЭтот атрибут обязателен в определении якоря на странице. Значение имени схоже со значением
idи должен быть уникальным идентификатором и состоять из букв и цифр. Согласно спецификации HTML 4.01, иid, иnameмогут быть использованы с элементом<a>, пока у них идентичные значения.revЭтот атрибут определяет обратную ссылку, обратные отношения атрибута
rel. Это полезно, чтобы отобразить, откуда пришёл объект как автор или документ.shapeЭтот атрибут используется, чтобы определить выбранный регион для ссылок на источник гипертекста, которые соединены с фигурой для создания изображения-карты. Значения для атрибута —
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для форм требует, чтобы полностью закрытая территория, например, изображение, было использовано.
Нестандартные
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Не стандартноЭтот атрибут, предложенный Microsoft, определяет отношения уникального названия ресурса (URN) с ссылкой. Хотя он основан на стандартах работы нескольких лет назад, значение URN всё ещё не определено полностью, поэтому этот атрибут не имеет значения.Значения
urn(MSDN).
Примеры
>Ссылка на внешний сайт
<a href="http://www.mozilla.com/">Внешняя ссылка</a>Результат
Создание кликабельной картинки
<a href="https://developer.mozilla.org/ru/"> <img src="mdn_logo.png" alt="MDN logo" /></a>Результат
Создания ссылки для написания письма
<a href="mailto:nowhere@mozilla.org">Отправить сообщение в никуда</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/.
Спецификации
| Specification |
|---|
| HTML> # the-a-element> |
Совместимость с браузерами
Примечания
HTML 3.2 включает в себя толькоname,href,rel,rev иtitle.
Атрибутtarget не работает в браузерах, не поддерживающих фреймы, таких как Netscape 1 generation. Кроме того,target не допускается в «строгих» вариантахXHTML, но разрешён в формах frameset или «переходных» формах.
Рекомендации по JavaScript
Часто якорь используется с событиемonclick. Для избежания обновления страницы,href часто устанавливается на#, либо на#"смотрите_также" >Смотрите также