Ссылки HTML

Ссылки есть почти на всех веб-страницах. Ссылки позволяют пользователям переходить со страницы на страницу.

В этом разделе вы узнаете, как создавать гипертекстовые ссылки в HTML. А также, ссылки-картинки, кнопки в качестве ссылок и ссылки на адрес электронной почты.

HTML - ссылки (гиперссылки)

HTML-ссылки являются гиперссылками.

Вы можете кликнуть ссылку и перейти к другому документу.

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

Синтаксис

HTML Тег <a> определяет гиперссылку. У него следующий синтаксис:

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

Наиболее важным атрибутом элемента <a> является атрибут href, который указывает место назначения ссылки.

Текст ссылки — это та часть, которая будет видна читателю.

Кликнув по тексту ссылки, читатель отправится на указанный URL-адрес.

В этом примере показано, как создать ссылку на AppNet.club:

<a href="https://www.appnet.club/">Посетите AppNet.Club!</a>

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

• Непосещенная ссылка подчеркнута и окрашена в синий цвет;
• Посещенная ссылка подчеркнута и окрашена в фиолетовый цвет;
• Активная ссылка подчеркнута и окрашена в красный цвет.

Целевой атрибут

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

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

Целевой атрибут может иметь одно из следующих значений:

• _self — по умолчанию. Открывает документ в том же окне/вкладке, где он был нажат;
• _blank — открывает документ в новом окне или вкладке;
• _parent — открывает документ в родительском фрейме;
• _top — открывает документ во всем теле окна.

Используйте target="_blank", чтобы открыть связанный документ в новом окне или вкладке браузера:

<a href="https://www.appnet.club/" target="_blank">Посетите AppNet.Club!</a>

Абсолютные URL-адреса и относительные URL-адреса

В обоих приведенных выше примерах используется абсолютный URL-адрес (полный веб-адрес) в атрибуте href.

Локальная ссылка (ссылка на страницу того же веб-сайта) указывается с относительным URL-адресом (без части «https://www»):

<h2> Абсолютные URL -адреса </h2>
<p> <a href="https://www.w3.org/">W3C</a> </p>
<p> <a href="https://www.ya.ru/">Яндекс</a> </p>

<h2> Относительные URL </h2>
<p> <a href="/html_images.png">HTML изображение</a> </p>
<p> <a href="/html">HTML раздел</a> </p>

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

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

<a href="/html">
<img src="/htm/smiling.png" alt="Руководство по HTML" style="width:75px;height:75px;">
</a>

Изображение ниже является ссылкой. Попробуйте нажать на него.

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

Используйте mailto: внутри атрибута href, чтобы создать ссылку, которая открывает программу электронной почты пользователя (чтобы позволить ему отправить новое электронное письмо):

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

Нажмите на ссылку ниже, чтобы увидеть, как это работает:

Отправить письмо

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

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

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

<button onclick="document.location='/html'">Руководство по HTML</button>

Нажмите кнопку, чтобы перейти к руководству по HTML:

Заголовки ссылок

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

<a href="https://www.appnet.club/html/" title="Перейти в HTML раздел AppNet.club">Посетите наш раздел по HTML</a>

Посетите наш раздел по HTML

Подробнее об абсолютных и относительных URL-адресах

Используйте полный URL-адрес для ссылки на веб-страницу:

<a href="https://www.appnet.club/html/">Руководство по HTML</a>

Ссылка на страницу, расположенную в папке html на текущем веб-сайте:

<a href="https:/html/html-links">Руководство по HTML</a>

Ссылка на страницу, расположенную в той же папке, что и текущая страница:

<a href="https:"html-links">Руководство по HTML</a>

🔗 Вы можете прочитать больше о путях к файлам в главе Пути к файлам HTML

Использование HTML - атрибутов:

• <a> HTML элемент для определения ссылки;
• href HTML атрибут для определения адреса ссылки;
• target  HTML атрибут чтобы определить, где открыть связанный документ;
• <img> HTML элемент (внутри <a>), чтобы использовать изображение в качестве ссылки;
• Используйте схему mailto: внутри атрибута href, чтобы создать ссылку, открывающую программу электронной почты пользователя.

HTML ссылки, подразделы

• Цвет ссылок в HTML
• Как создать закладку (якорь) в HTML

HTML - теги ссылок

Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

☛ Цвета ссылок HTML

Стили HTML CSS ☚