Гиперссылки и якоря

Для создания ссылок предназначен тег <a>.
Атрибуты тега <a>:

Атрибут Описание
href Указывает адрес назначения. Это может быть абсолютный или относительный URL-адрес или имя якоря. Абсолютный URL - это полный URL-адрес веб-сайта, например http://example.com/. Относительный URL указывает на другой каталог и/или документ внутри одного и того же веб-сайта, например. /about-us/ указывает на каталог "about-us" внутри корневого каталога (/). При указании на другой каталог без явного указания документа, веб-серверы обычно возвращают документ «index.html» внутри этого каталога.
hreflang Указывает язык ресурса по ссылке. Используйте языковые значения из BCP47 для HTML5 и RFC1766 для HTML 4. Используйте этот атрибут, только если задан href.
rel Определяет отношения между текущим документом и документом, на который ведет ссылка, заданная атрибутом href. Для HTML5 значения должны быть определены в спецификации или зарегистрированы в вики-среде Микроформатов.
target Определяет где нужно открыть ссылку, например, в новой вкладке или окне. Возможные значения: _blank (в новом окне), _self (в текущем окне), _parent (во фрейм-родитель), _top (отменяет фреймы и загружает в окно) или имя фрейма (устарело). Принудительное такое поведение не рекомендуется, так оно нарушает управление пользователем веб-сайтом. Используя target, вы должны добавлять rel="noopener noreferrer", чтобы избежать эксплуатацию API window.opener.
title Указывает дополнительную информацию о ссылке. Эта информация чаще всего отображается в виде всплывающей подсказки, когда курсор перемещается по ссылке. Этот атрибут может использоваться почти во всех HTML-тегах.
download Указывает, что документ будет загружаться, а не открываться при переходе по ссылке. Значение атрибута будет именем загруженного файла. Браузер автоматически обнаружит правильное расширение файла и добавит его к файлу (.img, .pdf и т. д.). Если значение опущено, используется исходное имя файла.

Теги <a> обычно используются для связывания отдельных веб-страниц, но их также можно использовать для связи между различными местами в одном документе, в оглавлении и даже при запуске внешних приложений. В этом разделе объясняется реализация и применение тегов гиперссылки HTML в разных ролях.

Это основной способ использования элемента гиперссылки <a>:

<a href="http://example.com/">Ссылка на example.com</a>

Данный код создает гиперссылку на URL http://example.com/, как указано атрибутом href (гипертекстовая ссылка), с текстом «Ссылка на example.com». Это будет выглядеть примерно так:

Чтобы обозначить, что эта ссылка ведет на другой веб-сайт, вы можете указать внешний тип ссылки:

<a href="http://example.com/" rel="external">Сайт example</a>  

Вы можете ссылаться на сайт, который использует протокол, отличный от HTTP. Например, чтобы ссылаться на FTP-сайт, вы можете указать:

<a href="ftp://example.com/">Ссылка на FTP</a>

В этом случае разница заключается в том, что этот элемент гиперссылки указывает, чтобы браузер пользователя подключался к example.com с использованием протокола передачи файлов (FTP), а не протокола передачи гипертекста (HTTP).

Якоря (закладки) используются для перехода к определенным элементам на странице HTML. Тег <a> может указывать на любой элемент с атрибутом id. Подробнее об идентификаторах читайте в документации по классам и идентификаторам. Якоря в основном используются для перехода к подразделу страницы и используются в сочетании с заголовками.

В HTML5 вместо устаревшего атрибута name для определения якоря требуется указывать атрибут id.

Предположим, вы создали страницу (page1.html) с несколькими темами:

<h2>Первая тема</h2>
<p>Содержимое первой темы</p>
<h2>Вторая тема</h2>
<p>Содержимое второй темы</p>

Так как есть несколько разделов, вы можете создать оглавление в верхней части страницы с быстрыми ссылками к определенным разделам. Если вы добавите атрибут id своим темам, вы можете ссылаться на них:

<h2 id="Topic1">Первая тема</h2>
<p>Содержимое первой темы</p>
<h2 id="Topic2">Вторая тема</h2>
<p>Содержимое второй темы</p>

Теперь вы можете использовать якорь в своем оглавлении:

<h1>Содержание</h1>
 <a href='#Topic1'>Щелкните для перехода к первой теме</a>
 <a href='#Topic2'>Щелкните для перехода ко второй теме</a>

Эти якоря также привязаны к веб-странице, на которой они находятся (page1.html). Таким образом, вы можете связывать одну страницу с якорем на другой странице.

Помните, что вы всегда можете <a href="page1.html#Topic1">вернуться в первую тему</a>.  

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

<a href="/page">ссылка</a>  

Вышеприведенный пример ссылается на файл page в корневом каталоге (/) сервера. Если эта ссылка была на сайте http://example.com, следующие две ссылки будут указывать на одно место:

<a href="/page">ссылка</a>
<a href="http://example.com/page">ссылка</a> 

Обе ссылки указывают на файл page в корневом каталоге example.com.

Если значение атрибута href начинается с tel:, ваше устройство будет набирать указанный номер при щелчке на ссылке. Это работает на мобильных устройствах или на компьютерах и планшетах, работающих под управлением программного обеспечения совершающего телефонные звонки, например, Skype или FaceTime. Просто используйте протокол javascript: для запуска текста как JavaScript вместо того, чтобы открывать его как обычную ссылку: Большинство устройств и программ подскажут пользователю каким образом подтвердить номер, который они собираются набрать.

Атрибут target указывает где нужно открыть ссылку. Установив его значение равно _blank, вы сообщаете браузеру открыть ее в новой вкладке или окне.

<a href="example.com" target="_blank">Ссылка</a>

Использование target = "_ blank" позволяет открытому на новой вкладке сайту получить доступ к объекту window.opener через JavaScript, что позволяет затем получить доступ и изменить window.opener.location вашей страницы и потенциально перенаправить пользователей на вредоносные или фишинг-сайты.

Поэтому всегда для таких ссылок на страницы, которые вы не контролируете, добавляйте атрибут rel = "noopener", чтобы предотвратить отправку в запросе объекта window.opener.

В настоящее время Firefox не поддерживает noopener, поэтому для максимального эффекта вам нужно будет использовать rel = "noopener noreferrer".

Просто используйте протокол javascript: для запуска URI как JavaScript-кода вместо того, чтобы открывать его как обычную ссылку:

<a href="javascript:myFunction();">Запустить код</a>

Вы также можете добиться того же, используя атрибут onclick:

<a href="#" onclick="myFunction(); return false;">Запустить код</a>

Строка return false; необходима, чтобы ваша страница не прокручивалась вверх, при переходе на ссылке #. Обязательно введите весь код до этой строчки, т.к. она прекратит выполнение остального кода.
Также можно использовать восклицательный знак ! после знака решетки, чтобы страница не прокручивалась вверх. Это работает, потому что ссылка на любой недопустимый якорь приведет к тому, что страница не будет прокручиваться, так как браузер не может найти элемент, на который он ссылается (элемент с id = "!"). Вообще вы можете использовать любой недопустимый якорь (например, #scrollsNowhere) для достижения такого же эффекта. В этом случае строка return false; не требуется:

<a href="#!" onclick="myFunction();">Запустить код</a>

Ответ наверняка нет. Выполнение JavaScript внутри строки с таким элементом, как приведенный выше, является довольно плохой практикой. Подумайте об использовании чистых JavaScript-решений, которые ищут элемент на странице и привязывают к нему функцию, прослушивайте события.

Также подумайте, не является ли этот элемент является кнопкой вместо ссылки? Если это так, вы должны использовать элемент button.

Если значение атрибута href начинается сmailto:, то браузер попытается открыть почтовый клиент по клику:

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

Эта ссылка поместит адрес электронной почты example@example.com в качестве получателя для вновь созданного сообщения электронной почты.

Вы также можете добавлять адреса для cc (carbon copy - копия) или bcc (blind carbon copy - скрытая копия) получателей, используя следующий синтаксис:

<a href="mailto:example@example.com?cc=john@example.com&bcc=jane@example.com">Отправить почту</a>

Вы также можете заполнить тему и тело для нового письма:

<a href="mailto:example@example.com?subject=Example+subject&body=Message+text">Отправить почту</a>

Эти значения должны быть закодированы в URL.

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