HTML тег <a>
Приклад
Посилання на W3Schools.com:
<a href="https://www.w3schools.com">Посетите W3Schools.com!</a>
Спробуйте самі »
Більше прикладів далі "Спробуйте самі".
Визначення й використання
Тег <a> визначає гіперпосилання, яке використовується для переходу з однієї сторінки на іншу.
Найбільш важливим атрибутом елемента <a> є атрибут href, який вказує на призначення посилання.
За замовчуванням посилання будуть виглядати наступним чином в усіх браузерах:
- невідвідуване посилання підкреслене й синім кольором
- відвідуване посилання підкреслене й фіолетовим кольором
- активне посилання підкреслене й червоним кольором
Підтримка браузерами
| Елемент | |||||
|---|---|---|---|---|---|
| <a> | Так | Так | Так | Так | Так |
Всі сучасні браузери підтримують тег <a>.
Поради й примітки
Примітка: Наступні атрибути: download, hreflang, media, rel, target та type не можуть бути присутніми, якщо відсутній основний атрибут href.
Примітка: Пов’язана сторінка зазвичай показується в поточному вікні браузера, якщо ви не вкажете іншу ціль за допомогою атрибута target.
Порада: Для стилізації посилань використовуйте CSS. Дивіться розділи CSS Посилання та CSS Кнопки Підручника CSS на нашому сайті W3Schools українською.
Відмінності між HTML 4.01 та HTML5
В HTML 4.01 тег <a> може бути гіперпосиланням або якорем. В HTML5 тег <a> є завжди гіперпосиланням, але якщо він не має атрибуту href, він є лише заповнювачем для гіперпосилання.
Специфікація HTML5 має деякі нові атрибути для посилань, а деякі атрибуты специфікації HTML 4.01 вже більше не підтримуються.
Атрибути
| Атрибут | Значення | Опис |
|---|---|---|
| charset | char_encoding | Не підтримується в HTML5. Визначає набір символів пов’язаного документа |
| coords | coordinates | Не підтримується в HTML5. Визначає координати посилання |
| download | filename | Визначає, що ціль буде завантажена, коли користувач натискає гіперпосилання |
| href | URL | Визначає URL сторінки, на яку йде посилання |
| hreflang | language_code | Визначає мову пов’язаного документа |
| media | media_query | Визначає, для якого носія/пристрою оптимізований пов’язаний документ |
| name | section_name | Не підтримується в HTML5. Використовуйте глобальний id атрибут замість цього. Визначає ім’я якоря |
| ping | list_of_URLs | Визначає розділений пробілами список URL-адрес, за яким при переході за посиланням браузер буде відправляти запити на відправку повідомлень за допомогою основного тексту (в фоновому режимі). Зазвичай використовується для відстежування |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url |
Визначає, який реферер відправити |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag |
Визначає зв’язок між поточним документом і пов’язаним документом |
| rev | text | Не підтримується в HTML5. Визначає зв’язок між пов’язаним документом та поточним документом |
| shape | default rect circle poly |
Не підтримується в HTML5. Визначає форму посилання |
| target | _blank _parent _self _top framename |
Вказує, де відкрити пов’язаний документ |
| type | media_type | Визначає тип мультимедіа пов’язаного документа |
Глобальні атрибути
Тег <a> також підтримує Глобальні атрибуты в HTML.
Атрибути подій
Тег <a> також підтримує Атрибути подій в HTML.
Більше прикладів
Приклад
Як використовувати зображення в якості посилання:
<a href="https://www.w3schools.com">
<img border="0" alt="W3Schools"
src="logo_w3s.gif" width="100" height="100">
</a>
Спробуйте самі »
Приклад
Як відкрити посилання в новому вікні браузера:
<a href="https://www.w3schools.com" target="_blank">Відвідайте W3Schools.com!</a>
Спробуйте самі »
Приклад
Як зробити посилання на адресу електронної пошти:
<a href="mailto:someone@example.com">Відправити email</a>
Спробуйте самі »
Приклад
Як прив’язати посилання до номеру телефона:
<a href="tel:+4733378901">+47 333 78 901</a>
Спробуйте самі »
Приклад
Як зробити посилання на інший розділ на тій же сторінці:
<a href="#section2">Перейти до розділу 2</a>
Спробуйте самі »
Приклад
Як зробити посилання на JavaScript:
<a href="javascript:alert('Hello World!');">Виконати JavaScript</a>
Спробуйте самі »
Пов’язані сторінки
HTML Підручник: HTML Посилання
HTML DOM Довідник: Об’єкт Anchor
CSS Підручник: Стилізація посилань
Налаштування CSS за замовчуванням
Більшість браузерів будуть показувати елемент <a> з наступними значеннями за замовчуванням:
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);
}
