Що таке посилання (hyperlink) в HTML?

HTMLJunior~1 хв читання

Посилання (hyperlink) в HTML - це елемент, який дає змогу переходити з однієї сторінки на іншу, або виконувати дію (наприклад, відкрити файл, перейти на e-mail, перейти до якоря тощо).

Посилання створюються за допомогою тега <a> (anchor - «якір»).

1. Найпростіший приклад

html

<a href="https://example.com">Перейти на сайт</a>

Що тут:

<a>: тег посилання;
href: (Hypertext REFerence) адреса, куди веде посилання;
текст усередині (Перейти на сайт): те, на що можна натиснути.

Під час кліку браузер відкриє вказану адресу.

2. Структура посилання

html

<a href="URL">текст або контент</a>

Частина	Призначення
`<a>`	Відкривний тег посилання
`href`	Адреса (URL) призначення
`текст`	Те, що бачить і натискає користувач
`</a>`	Закривний тег

3. Типи посилань

Зовнішнє посилання:

html

<a href="https://google.com">Google</a>

Відкриває іншу сторінку або сайт.

Внутрішнє (на іншу сторінку сайту):

html

<a href="/about.html">Про нас</a>

Якірне (перехід до частини сторінки):

html

<a href="#contacts">Контакти</a>

<section id="contacts">...</section>

Посилання на файл:

html

<a href="files/report.pdf" download>Завантажити звіт</a>

Атрибут download змушує браузер завантажити файл, а не відкрити його.

Посилання на пошту або телефон:

html

<a href="mailto:info@example.com">Написати листа</a>
<a href="tel:+12345678900">Подзвонити</a>

4. Корисні атрибути

Атрибут	Призначення	Приклад
`href`	Вказує адресу посилання	`href="https://example.com"`
`target="_blank"`	Відкриває посилання в новій вкладці	`<a href="..." target="_blank">`
`title`	Підказка при наведенні	`<a title="Перейти на сайт">`
`rel="noopener noreferrer"`	Захист під час відкриття в новій вкладці (рекомендується з `_blank`)	`<a target="_blank" rel="noopener noreferrer">`
`download`	Завантаження файлу	`<a href="file.pdf" download>`

5. Всередині `<a>` можна розміщувати не лише текст

html

<a href="https://example.com">
  <img src="button.png" alt="Кнопка">
</a>

Клікабельною стане сама картинка.

6. Приклад комплексного посилання

html

<a href="https://example.com" target="_blank" rel="noopener noreferrer" title="Відкриється в новій вкладці">
  Перейти на сайт →
</a>

Підсумок:

Параметр	Значення
Тег	`<a>`
Головний атрибут	`href`: адреса переходу
Призначення	Створює гіперпосилання між документами або елементами
Дод. можливості	Відкриття в новій вкладці, завантаження, якорі, e-mail, телефон
Застосування	Навігація, кнопки, посилання, меню, виклики дій

Простими словами: <a> - це місток між сторінками. Він каже браузеру:

«Якщо користувач натисне сюди, перейди ось за цією адресою.»

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.