Оригінальна публікація: How to Create Links in HTML – Tutorial with Examples
Посилання — це невіддільна частина всесвітньої павутини, оскільки вони об’єднують вебсторінки, документи та ресурси всього інтернету.
Посилання в HTML (скорочено від Hypertext Markup Language) відіграють важливу роль у створенні мережі взаємопов’язаного контенту, що дозволяє користувачам безперешкодно переміщатися між різними сторінками та вебсайтами.
У цій статті ми розглянемо основи посилань в HTML, включно з їхніми типами, атрибутами та найкращими практиками.
Що таке посилання в HTML?
Посилання в HTML (також відоме як гіперпосилання) — це елемент, який дозволяє користувачам переміщатися з однієї сторінки на іншу. Воно також дозволяє користувачам переходити до зовнішніх ресурсів (наприклад, документів, зображень, відео тощо).
HTML пропонує декілька типів посилань, кожен з яких має свою конкретну мету. У наступних розділах розглянемо, як вони працюють.
Як створити текстове посилання
Текстові посилання є найпоширенішим типом посилань. Щоб створити таке посилання, оточіть текст елементом посилання <a>. Коли користувач натисне на текст, його буде перенаправлено на адресу, вказану в атрибуті href:
<a href="https://www.pryklad.com">Перейти на pryklad.com</a>
Текстові посилання універсальні та можуть використовуватися для різних цілей, таких як посилання на інші сторінки, зовнішні вебсайти чи навіть конкретні розділи в межах сторінки за допомогою тегів посилання.
Як створити посилання-зображення
Зображення можна зробити активним посиланням, оточивши його елементом посилання. Це корисно для створення навігації на основі зображень або посилання на більші версії зображень:
<a href="https://www.pryklad.com">
<img src="image.jpg" alt="Зображення pryklad">
</a>
Посилання-зображення є візуально привабливими і часто використовуються для елементів (наприклад, логотипів, банерів чи маленьких зображень), які при натисканні перенаправляють користувача на відповідну сторінку.
Як створити посилання-емейл
Щоб створити посилання, яке відкриває електронну пошту з вже заповненою адресою отримувача, використайте схему mailto:
<a href="mailto:contact@pryklad.com">Надіслати лист</a>
Посилання-емейл зручно використовувати для того, щоб дозволити користувачам зв’язуватись лише одним натисканням. Його часто використовують для контактної інформації на вебсайтах.
Як створити зовнішні посилання
Зовнішні посилання вказують на інші вебсайти. Важливо вказати, що посилання є зовнішнім, використовуючи атрибут target="_blank", щоб відкрити пов’язану сторінку в новій вкладці або вікні. Це забезпечує, що вебсайт залишається відкритим в поточній вкладці користувача, а пов’язаний вміст відображається в окремій вкладці чи вікні:
<a href="https://www.zovnishniy-sayt.com" target="_blank">Перейти на зовнішній сайт</a>
Зовнішні посилання — це спосіб надати додаткові ресурси, посилання або джерела, дозволяючи користувачам легко повернутися на вебсайт.
Як створити внутрішні посилання
Внутрішні посилання використовують для навігації на тому ж вебсайті. Зазвичай вони перенаправляють на інші сторінки вебсайту, використовуючи відносні посилання:
<a href="/about">Дізнайтесь більше про нас</a>
Внутрішні посилання є важливими для навігації по вебсайту, оскільки вони допомагають користувачам знаходити відповідний вміст або переходити між різними розділами вебсайту.
Пояснення атрибутів посилання
Для створення функціональних та зручних для користувача посилань важливо розуміти ключові атрибути, які можна використовувати з елементами посилання (<a>).
Як використовувати атрибут href
Атрибут href вказує адресу або ресурс, на які веде посилання. Таке посилання може бути абсолютним (починається з http:// чи https://) або відносним (належить до поточної сторінки).
Ось так виглядає створення абсолютного посилання:
<a href="https://www.pryklad.com">Перейти на pryklad.com</a>
А так відносного:
<a href="/about">Дізнайтесь більше про нас</a>
Використання відносних посилань часто переважає при створенні посилань в межах одного вебсайту, оскільки це робить посилання адаптованими до змін в структурі домену.
Як використовувати атрибут target
Атрибут target визначає, як відтворювати пов’язаний ресурс при натисканні. До загальних значень належать:
_self(за замовчуванням): відкриває посилання в тій же вкладці або вікні;_blank: відкриває посилання в новій вкладці або вікні;_parent: відкриває посилання в батьківському фреймі або вікні;_top: відкриває посилання у повному вікні, замінюючи будь-які фрейми.
<a href="https://www.zovnishniy-sayt.com" target="_blank">Перейти на зовнішній сайт</a>
_blank часто використовують для зовнішніх посилань, щоб користувачі досі залишались на вебсайті.
Як використовувати атрибут rel
Атрибут rel вказує на відносини між поточним документом і пов’язаним ресурсом. Наприклад, rel="noopener" часто використовують з метою безпеки при відкритті посилань у новій вкладці:
<a href="https://www.pryklad.com" rel="noopener">Перейти на pryklad.com</a>
Значення noopener допомагає захиститися від можливих вразливостей безпеки, пов’язаних з відкриттям нових вкладок або вікон.
Найкращі практики посилань в HTML
Щоб забезпечити відмінний досвід користувача і дотриматись стандартів вебдоступності та оптимізації для пошукових систем (SEO), використовуйте найкращі практики, коли працюєте з посиланнями в HTML.
Використовуйте описовий текст
Текст, який використовується для посилань, має бути описовим і передавати користувачам суть. Уникайте загальних фраз, таких як «натисніть тут».
Не рекомендовано: <a href="https://www.pryklad.com">Натисніть тут</a>
Рекомендовано: <a href="https://www.pryklad.com">Перейти на pryklad.com</a>
Описовий текст покращує досвід користувача і допомагає йому зрозуміти, куди веде посилання.
Надавайте контекст
При посиланні на зовнішні ресурси подумайте над тим, щоб додати короткий опис або атрибут title, щоб проінформувати користувачів про зміст, на який вказує посилання:
<a href="https://www.pryklad.com" title="Перейти на pryklad.com">Pryklad.com</a>
Надання контексту покращує зручність використання та доступність, особливо для користувачів з порушеннями, які користуються асистентами.
Тестуйте посилання
Регулярно перевіряйте всі посилання на своєму вебсайті, щоб переконатися, що вони працюють правильно. Зламане посилання може засмутити користувача і пошкодити репутації вебсайту.
Подумайте над тим, щоб використовувати автоматизовані інструменти для перевірки посилань. Такі інструменти сканують вебсайт на наявність зламаних посилань і дозволяють їх вчасно виправити.
Оптимізуйте доступність
Використовуйте семантичний HTML і надавайте альтернативний текст для зображень у межах посилань, щоб вміст був доступним для користувачів з порушеннями.
<a href="/about">
<img src="zobrazhennya-pro-nas.jpg" alt="Про нас">
</a>
Доступні посилання забезпечують, що всі користувачі, незалежно від своїх можливостей, можуть взаємодіяти з вебсайтом.
Враховуйте SEO
При посиланні на внутрішні сторінки використовуйте текст, який містить відповідні ключові слова. Це може покращити позицію вебсайту в результатах пошуку.
Не рекомендовано: <a href="/product123">Натисніть тут для детальної інформації</a>
Рекомендовано: <a href="/product123">Дізнатись більше про продукт XYZ</a>
Текст посилання, який містить ключові слова, допомагає пошуковим системам розуміти вміст та контекст посилань, що може покращити видимість вебсайту в результатах пошуку.
Використовуйте відносні посилання
При посиланні в межах власного вебсайту надавайте перевагу відносним посиланням, а не абсолютним. Це робить вебсайт зручнішим для обслуговування і адаптованим до змін структури домену.
<a href="/about">Дізнайтесь більше про нас</a>
Відносні посилання менш схильні до зламу, коли ви вносите зміни у структуру вебсайту або переносите його на інший домен.
Використовуйте індикатори для зовнішніх посилань
При посиланні на зовнішні вебсайти повідомляйте користувачів, що вони покидають вебсайт. Це допоможе побудувати довіру і прозорість.
Подумайте над тим, щоб додати іконки або текст (наприклад, «Зовнішнє посилання») поруч зі зовнішніми посиланнями.
Висновок
Посилання — це основа мережі, оскільки саме вони забезпечують безперешкодну навігацію та дослідження онлайн-вмісту. Розуміючи типи посилань в HTML, їхні атрибути та найкращі практики їх використання, ви можете створити приємний та доступний досвід користувача, тим самим покращуючи видимість та довіру вебсайту в інтернеті.
Завдяки правильному використанню посилань, ви можете познайомити свою аудиторію з цінними ресурсами, забезпечити хороший досвід користувача та сприяти загальному успіху вебсайту.