Узнайте, как создавать гиперссылки в HTML с помощью простых и понятных примеров. От внутренних и внешних ссылок до ссылок на электронную почту и телефонные номера — всё, что нужно знать новичкам для эффективного использования гиперссылок.
Гиперссылка – это элемент веб-страницы, который позволяет перейти к другому документу или ресурсу, будь то другая страница сайта, файл или даже электронная почта. В HTML они создаются с помощью тега <a> (anchor).
7.1. Внешние гиперссылки
Внешняя гиперссылка ведет на другой сайт или ресурс вне текущего домена. Она может быть представлена двумя способами: абсолютной и относительной ссылкой.
7.1.1. Абсолютный URL-адрес
Абсолютный URL содержит полный путь до ресурса, включая протокол (http:// или https://), имя домена и путь к файлу. Например:
<a href="https://example.com/page.html">Посетить Example</a>
Комментарий: Здесь мы создаем ссылку на страницу page.html, которая находится на сайте example.com. Пользователь будет перенаправлен на эту страницу при клике на текст «Посетить Example».
7.1.2. Относительный URL-адрес
Относительная ссылка указывает путь относительно текущей страницы без указания протокола и имени домена. Это удобно, когда все ресурсы находятся внутри одного сайта. Вот несколько примеров:
Файл в соседней папке:
<a href="../other-folder/file.html">Открыть файл в другой папке</a>
Комментарий: Двойные точки .. означают переход на уровень вверх от текущей директории. Таким образом, ссылка ведет к файлу file.html, который находится в папке other-folder, расположенной на уровне выше текущей страницы.
Файл в папке уровнем выше:
<a href="folder/file.html">Открыть файл в подпапке</a>
Комментарий: Здесь мы ссылаемся на файл file.html, находящийся в папке folder, которая расположена на одном уровне с текущей страницей.
7.2. Внутренние гиперссылки
Внутренние гиперссылки ведут на другие части той же самой страницы. Они полезны для создания навигации между различными разделами длинной страницы. Для этого используется якорь (#) и идентификатор элемента.
Якоря внутри документа:
<!-- Якорь -->
<h2 id="contacts">Контакты</h2>
<p>Здесь вы можете найти наши контактные данные.</p>
<!-- Ссылка на якорь -->
<a href="#contacts">Перейти к контактам</a>
Комментарий: В этом примере мы создали заголовок с идентификатором id="contacts" и ссылку, ведущую к этому месту через href="#contacts". При нажатии на ссылку браузер автоматически прокрутит страницу до указанного места.
Якорь в другом документе:
<a href="another-page.html#section">Перейти к разделу на другой странице</a>
Комментарий: Такая ссылка ведет к конкретному разделу (#section) на другой странице (another-page.html). После перехода пользователь сразу увидит нужный фрагмент текста.
7.3. Гиперссылки на адрес электронной почты
Для отправки электронного письма прямо со страницы можно использовать специальный формат ссылки с указанием почтового адреса.
Пример:
<a href="mailto:info@example.com">Напишите нам</a>
Комментарий: Когда пользователь нажмет на такую ссылку, откроется программа для работы с электронной почтой (например, Outlook), готовая отправить письмо на указанный адрес info@example.com.
7.4. Ссылки на телефонный номер
Чтобы предоставить возможность позвонить по телефону прямо с веб-страницы, используется схема tel:.
Пример:
<a href="tel:+1234567890">Позвоните нам</a>
Комментарий: После нажатия на такую ссылку устройство предложит совершить звонок на указанный номер телефона. Этот метод особенно полезен для мобильных устройств.
7.5. Атрибут rel
Атрибут rel определяет отношения между документом, содержащим ссылку, и целевым документом. Он помогает поисковым системам лучше понимать контекст ссылок и улучшает SEO. Вот некоторые популярные значения:
nofollow: Указывает поисковым системам игнорировать ссылку при ранжировании страниц.<a href="https://external-site.com/" rel="nofollow">Ссылка на внешний сайт</a>noopener: Предотвращает открытие нового окна в контексте исходного окна, защищая от атак типа XSS.<a href="https://example.com" rel="noopener">Безопасная ссылка</a>noreferrer: Запрещает передачу информации о реферере (с какой страницы пришла ссылка) при переходе по ссылке.<a href="https://sensitive-info.com" rel="noreferrer">Конфиденциальная ссылка</a>
Эти значения часто используются вместе:
<a href="https://external-site.com/" rel="nofollow noopener noreferrer">Ссылка с несколькими атрибутами</a>
7.6. Атрибут target
Атрибут target определяет, куда будет загружаться документ, на который ссылается тег <a>. Наиболее распространённые значения:
_blank: Открывает ссылку в новом окне или вкладке браузера.<a href="https://example.com" target="_blank">Откроется в новой вкладке</a>_self: Загружает документ в текущем окне или фрейме (это значение используется по умолчанию, если ничего не указано).<a href="https://example.com" target="_self">Загрузится в этом же окне</a>_parent: Загружает документ в родительском фрейме.<a href="https://example.com" target="_parent">Откроется в родительском фрейме</a>_top: Загружает документ в полном размере окна, заменяя любые фреймы.<a href="https://example.com" target="_top">Заменяет всё окно</a>
Использование атрибута target помогает управлять поведением браузера при открытии ссылок, делая интерфейс более удобным для пользователей.
