Тег <a>
Тег <a> створює гіперпосилання на інший документ, розділ сторінки, файл, email-адресу чи будь-який інший URL.
Syntax
<a href="https://example.com">текст посилання</a>Attributes
| href | URL, на який веде посилання. Може бути абсолютним, відносним, якорем (#id) або mailto:/tel:. |
| target | "_blank" відкриває посилання в новій вкладці. Разом з target="_blank" варто додавати rel="noopener". |
| rel | Тип зв'язку з цільовим документом: noopener, noreferrer, nofollow тощо. |
| download | Підказує браузеру завантажити файл замість переходу, замість імені файлу можна вказати значення. |
Example
<a href="/pricing">Тарифи</a>
<a href="https://example.com" target="_blank" rel="noopener">Зовнішнє посилання</a>
<a href="#section-2">До другого розділу</a>
Notes
- target="_blank" без rel="noopener" дає новій сторінці доступ до window.opener — це потенційний ризик, тому rel="noopener" варто додавати завжди.
- Порожній href або href="#" робить елемент клікабельним, але без реального переходу — для дій без навігації краще використовувати <button>.
Accessibility
- Текст посилання має описувати призначення ("Детальніше про тарифи", а не просто "Тут").
- Посилання-іконки без тексту потребують aria-label з описом дії.
Схожі інструменти
Атрибут href
Атрибут href елементів a та link: URL, на який веде посилання чи ресурс.
Атрибут target
Атрибут target тегу a та form: у якому контексті (вкладці/фреймі) відкрити результат.
Тег <img>
Атрибути src, alt, loading та srcset тегу <img> з прикладами.
URL Encode/Decode
Кодування та декодування URL-компонентів (percent-encoding) у браузері.