HTML-ссылки

HTML-ссылки, или гиперссылки, необходимы для навигации в Интернете. Они позволяют пользователям перемещаться между страницами, загружать файлы или переходить к разделам страницы.

В этом уроке мы рассмотрим основы создания и использования ссылок в HTML с подробными примерами.

Что такое HTML-ссылки?

В HTML ссылки создаются с помощью тега <a> (анкор). Основной атрибут, используемый с тегом <a> — это href , что означает «Гипертекстовая ссылка». Этот атрибут определяет место назначения ссылки. 

<a href="https://www.example.com">Visit Example</a>

В этом примере «Посетить пример» — это кликабельный текст, который при нажатии направляет пользователя на страницу «https://www.example.com».

Типы ссылок

HTML допускает различные типы ссылок:

  • Внешние ссылки: прямые ссылки на другие веб-сайты.
  • Внутренние ссылки: навигация в пределах одного веб-сайта.
  • Ссылки на электронную почту: откройте почтовый клиент пользователя, чтобы отправить электронное письмо.
  • Якорные ссылки: переход к определенному разделу страницы.

Создание внешних ссылок

Чтобы создать ссылку на внешний веб-сайт, используйте тег <a> с атрибутом href установленным на нужный URL. 

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

Видео

По умолчанию при нажатии на эту ссылку откроется целевой ресурс в той же вкладке. Чтобы открыть ссылку в новой вкладке, добавьте атрибут target со значением _blank . 

<a href="https://www.google.com" target="_blank">Go to Google</a>

Видео

Теперь при нажатии на ссылку откроется Google в новой вкладке.

Создание внутренних ссылок

Внутренние ссылки позволяют перемещаться между страницами одного сайта. Для создания таких ссылок используйте относительные URL-адреса. 

<a href="/about.html">About Us</a>

Эта ссылка направляет пользователя на страницу «about.html» в том же домене.

Для внутренних разделов на одной странице сначала присвойте id целевому элементу: 

<h2 id="contact">Contact Us</h2>

Затем создайте ссылку, которая ссылается на это id : 

<a href="#contact">Go to Contact Section</a>

Нажав на эту ссылку, вы перейдете в раздел «Связаться с нами» на той же странице.

Видео

Лучшие практики для якорных ссылок

  • Уникальные идентификаторы: убедитесь, что каждый id на странице уникален, чтобы избежать конфликтов.
  • Описательные идентификаторы: для ясности используйте содержательные и описательные имена id .
  • Плавная прокрутка: реализуйте CSS для плавной прокрутки, чтобы улучшить пользовательский опыт.

Создание ссылок электронной почты

Чтобы создать ссылку, которая открывает почтовый клиент пользователя по умолчанию с новым сообщением, используйте протокол mailto: в атрибуте href . 

<a href="mailto:someone@example.com">Email Us</a>

При нажатии на эту ссылку откроется новый черновик электронного письма, адресованный «someone@example.com».

Использование изображений в качестве ссылок

Изображения также могут функционировать как ссылки, если поместить тег <img> внутри тега <a> . 

<a href="https://www.example.com">
  <img src="image.jpg" alt="Example Image">
</a>

В этом примере нажатие на изображение приведет к переходу на страницу «https://www.example.com».

Видео