HTML Ссылки

Ссылки (hyperlinks) — это один из самых важных элементов веб-страниц. Они позволяют пользователям переходить от одной страницы к другой, делая навигацию по сайтам удобной и интуитивно понятной.

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

Ссылки — это элементы, которые позволяют пользователям переходить на другие страницы или ресурсы.

Когда вы кликаете на ссылку, браузер открывает заданный URL-адрес.

Когда вы наводите указатель мыши на ссылку, стрелка мыши превращается в маленькую руку.

Ссылки могут быть текстовыми, изображениями или любыми другими HTML-элементами.

Синтаксис ссылок в HTML

Ссылки в HTML создаются с помощью тега <a>, который имеет следующий синтаксис:

<a href="url">Текст ссылки</a>

href: Атрибут, указывающий на URL-адрес, куда ведет ссылка. Это самый важный атрибут тега <a>.
Текст ссылки: Текст, который будет отображаться на странице и по которому можно кликнуть.

Нажав на текст ссылки, посетитель перейдёт по указанному адресу URL.

Пример:

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

По умолчанию ссылки отображаются во всех браузерах следующим образом:

Непосещённая ссылка подчеркнута и синего цвета
Посещённая ссылка подчеркнута и фиолетового цвета
Активная ссылка подчеркнута и красного цвета

Совет: Чтобы придать другой внешний вид, ссылки можно стилизовать с помощью CSS.

Атрибуты ссылок

1. href — основной атрибут ссылки

Атрибут href указывает на URL-адрес, куда будет перенаправлен пользователь при клике на ссылку. Это может быть как абсолютный URL (полный адрес), так и относительный URL (адрес относительно текущей страницы).

Пример абсолютного URL:

<a href="https://www.example.com">Пример абсолютного URL</a>

Пример относительного URL:

<a href="page.html">Пример относительного URL</a>

2. target — где открыть ссылку

Атрибут target определяет, где будет открыт связанный документ.

Он может принимать следующие значения:

_self: Открывает документ в том же окне/вкладке (по умолчанию).
_blank: Открывает документ в новом окне или вкладке.
_parent: Открывает документ во фрейме родителя.
_top: Открывает документ во всем окне браузера.

Пример:

<a href="https://www.example.com" target="_blank">Открыть в новой вкладке</a>

3. title — дополнительная информация о ссылке

Атрибут title предоставляет дополнительную информацию о ссылке, которая обычно отображается как всплывающая подсказка при наведении курсора мыши на ссылку.

Пример:

<a href="https://www.example.com" title="Перейти на сайт Example.com">Пример ссылки с title</a>

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

Вы можете использовать изображение в качестве ссылки, поместив тег <img> внутри тега <a>:

Пример:

<a href="https://www.example.com">
  <img src="image.jpg" alt="Пример изображения-ссылки">
</a>

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

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

Пример:

<a href="mailto:example@example.com">Написать письмо</a>

Кнопка как ссылка

Чтобы использовать кнопку в качестве ссылки, вам нужно добавить немного JavaScript-кода.

JavaScript позволяет определить, что должно происходить при определенных событиях, таких как нажатие кнопки:

Пример:

<button onclick="window.location.href='https://www.example.com'">Перейти на Example.com</button>

Абсолютные и относительные URL

Абсолютные URL: Полный адрес, включающий протокол (например, https://).
Относительные URL: Адрес относительно текущей страницы.

Пример абсолютного URL:

<a href="https://www.example.com/page.html">Абсолютный URL</a>

Пример относительного URL (Ссылка на локальную страницу в каталоге html текущего сайта):

<a href="/html/page.html">Относительный URL</a>

Пример относительного URL (Ссылка на локальную страницу в том же каталоге, что и текущая страница):

<a href="page.html">Относительный URL</a>

Краткое содержание главы

Используйте элемент <a> для определения ссылки.
Применяйте атрибут href, чтобы задать адрес ссылки.
Атрибут target используется для задания места открытия связанного документа.
Элемент <img> внутри элемента <a> позволяет использовать изображение в качестве ссылки.
Схема mailto: внутри атрибута href создаёт ссылку, открывающую почтовую программу пользователя.