Гиперссылка (англ. hyperlink) в компьютерной терминологии — часть гипертекстового документа, ссылающаяся на другой элемент (команда, текст, заголовок, примечание, изображение) в самом документе, на другой объект (файл, директория, приложение), расположенный на локальном диске или в компьютерной сети, либо на элементы этого объекта.
Гиперссылка может быть добавлена к любому элементу гипертекстового документа и обычно выделяется графически. В HTML-документах текстовые ссылки по умолчанию выделяются синим цветом, при наведении на них курсором мыши в окне браузера изменяются, например, меняют цвет или выделяются подчеркиванием. При навигации в браузере с помощью клавиатуры текстовые и графические ссылки выделяются прямоугольной пунктирной рамочкой. Посещенная ранее ссылка обычно выделяется цветом, отличным от цвета непосещенной ссылки.
«Битой» ссылкой называют такую гиперссылку, которая ссылается на отсутствующий по каким-либо причинам объект, например, если документ или файл удален или перемещен администратором ресурса, на котором он был расположен, или если сам ресурс недоступен. Обычно в таком случае на странице появляется сообщение с кодом ошибки, но это происходит не всегда.
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега <a>, который имеет важнейший атрибут href. В качестве его значения используется URL-адрес документа.
Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Начинаются они с указания протокола передачи данных. Так, для веб-страниц это обычно HTTPS, соответственно, абсолютные ссылки начинаются с ключевого слова https://.
Пример 1. Использование абсолютных ссылок
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Абсолютная ссылка</title>
</head>
<body>
<p><a href="https://ya.ru">Поисковая система Яндекс</a></p>
</body>
</html>Относительные ссылки, как следует из их названия, построены относительно текущего документа или адреса.
//demo/
Эти две ссылки называются неполные и указывают веб-серверу загружать файл index.html, который находится в корне сайта или папке demo. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге.
/images/pic.gif
Слеш перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведет на рисунок pic.gif, который находится в папке images. А та в свою очередь размещена в корне сайта.
../help/me.html
Две точки перед именем указывают браузеру перейти на уровень выше в списке каталогов сайта.
manual/info.html
Если перед именем папки нет никаких дополнительных символов, вроде точек, то она размещена внутри текущего каталога.
Пример 2. Использование относительных ссылок
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Относительная ссылка</title>
</head>
<body>
<p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p>
<p><a href="tip.html">Как сделать такое же фото?</a></p>
</body>
</html>Иногда можно встретить в адресе ссылки путь в виде ./file/doc.html. Точка со слешем означает, что отсчет ведется от текущей папки. Подобная запись избыточна и ее можно сократить до file/doc.html.
По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега <a>.
_blank — загружает страницу в новую вкладку или новое окно браузера.
_self — загружает страницу в текущее окно.
_parent — загружает страницу во фрейм-родитель.
_top — отменяет все фреймы и загружает страницу в полном окне браузера.
Вместе с атрибутом target="_blank" обязательно используйте rel="noopener noreferrer".
Пример 3. Открытие документа в новом окне
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Новое окно</title>
</head>
<body>
<p><a href="https://webref.ru" target="_blank" rel="noopener noreferrer">Ссылка открывает новое окно на сайт webref.ru</a></p>
</body>
</html>Пример ссылки, открывающейся в новой вкладке
Кроме текста, в качестве ссылок можно использовать и рисунки. Изображение в этом случае надо поместить между тегами <a> и </a>.
Пример 5. Создание рисунка-ссылки
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Ссылка</title>
</head>
<body>
<p><a href="sample.html"><img src="images/sample.gif" width="50"
height="50" alt="Пример"></a></p>
</body>
</html>
Якорем называется закладка с уникальным именем на определённом месте веб-страницы, предназначенная для перехода к ней по ссылке. Якоря удобно применять в документах большого объёма, чтобы можно было быстро переходить к нужному разделу.
Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей уникальное имя при помощи атрибута id. В качестве значения href для перехода к этому якорю используется значение id с символом решётки (#) впереди.
Пример 7. Создание якоря
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Быстрый переход внутри документа</title>
</head>
<body>
<p id="top"></p>
<p>...</p>
<p><a href="#top">Наверх</a></p>
</body>
</html>Имя ссылки на якорь начинается с решётки (#), после чего идёт имя якоря. Главное, чтобы значения атрибутов id и href совпадали.