Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке посилання (hyperlink) в HTML?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Посилання (hyperlink)** - це елемент HTML, створюваний тегом `<a>` з атрибутом `href`, який дає змогу переходити на іншу сторінку, файл, e-mail чи телефон або виконувати іншу дію. **Ключове:** атрибут `href` вказує адресу призначення, а атрибути `target`, `rel` і `download` керують тим, як і де ця адреса відкривається.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Посилання (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>` - це **місток** між сторінками. Він каже браузеру: > «Якщо користувач натисне сюди, перейди ось за цією адресою.»Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.