Гиперссылка: создание и форматирование¶

Гиперссылка — это ссылка на другой документ, файл или ресурс в электронном тексте, при переходе по которой пользователь попадает на указанный адрес. В HTML-документах гиперссылки реализуются с помощью тега <a> (от англ. anchor — якорь), а в текстовых редакторах — средствами форматирования. Термин введён Тимом Бернерсом-Ли в 1990 году в проекте World Wide Web.

¶Основы HTML-гиперссылок

Создание гиперссылки в HTML сводится к использованию тега <a> с обязательным атрибутом href (от англ. hypertext reference), указывающим адрес назначения. Простейший пример:

``html <a href="https://example.com">Пример сайта</a> ``

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

``html <a href="https://example.com"><img src="logo.png" alt="Логотип"></a> ``

¶Виды адресов

¶Абсолютные ссылки

Абсолютный URL содержит полный путь к ресурсу, включая протокол и доменное имя:

``html <a href="https://ru.wikipedia.org/wiki/HTML">HTML в Википедии</a> ``

Такие ссылки работают независимо от расположения текущего документа.

¶Относительные ссылки

Относительный путь задаётся без указания домена и разрешается относительно каталога текущего документа:

``html <a href="about.html">О нас</a> <a href="../images/photo.jpg">Фотография</a> ``

Обозначения ./ и ../ указывают соответственно текущий каталог и родительский каталог.

¶Ссылки на якоря внутри страницы

Для перехода к конкретному месту на той же странице используется атрибут id у целевого элемента и ссылка вида #id:

``html <a href="#section2">К разделу 2</a> ... <h2 id="section2">Раздел 2</h2> ``

¶Ссылки на файлы и почту

Гиперссылка может вести на файл для скачивания или открывать почтовый клиент:

``html <a href="document.pdf">Скачать документ</a> <a href="mailto:info@example.com">Написать письмо</a> <a href="tel:+74951234567">Позвонить</a> ``

¶Дополнительные атрибуты

Пример ссылки, открывающейся в новой вкладке:

``html <a href="https://example.com"; target="_blank" rel="noopener noreferrer">Открыть</a> ``

Атрибут rel="noopener" предотвращает доступ открытой страницы к объекту window исходной вкладки — это рекомендуемая практика безопасности.

¶Оформление ссылок в CSS

Внешний вид гиперссылок задаётся каскадными таблицами стилей. По умолчанию браузеры отображают непосещённые ссылки синим, посещённые — фиолетовым, активную (нажатую) — красным. Стандартное оформление переопределяется псевдоклассами:

``css a { color: #0645ad; text-decoration: none; } a:hover { text-decoration: underline; } a:visited { color: #663366; } ``

¶Гиперссылки в других средах

¶Текстовые редакторы

В Microsoft Word, Google Docs, LibreOffice Writer гиперссылка создаётся выделением текста и нажатием сочетания клавиш Ctrl+K (или через меню «Вставка → Ссылка»). В редакторах разметки Markdown ссылка записывается как [текст](адрес).

¶Электронная почта и мессенджеры

В HTML-письмах ссылки создаются так же, как на веб-страницах. Мессенджеры и социальные сети часто автоматически превращают вставленные URL в кликабельные ссылки.

¶PDF-документы

В Adobe Acrobat и аналогичных программах ссылка добавляется инструментом «Создать ссылку» и может вести на веб-страницу, другой PDF-файл или внутреннюю страницу документа.

¶Практические рекомендации

• Текст ссылки должен описывать назначение перехода («Документация по HTML» вместо «Нажмите сюда») — это повышает доступность и поисковую оптимизацию.
• Для внешних ссылок, открывающихся в новой вкладке, рекомендуется добавлять rel="noopener noreferrer".
• Относительные ссылки предпочтительнее абсолютных при разработке сайтов — они упрощают перенос проекта на другой домен.
• Пустой атрибут href (или href="#") делает элемент ссылкой без назначения, что нарушает принципы доступности; вместо этого используют тег <button>.

¶Историческая справка

Концепция гиперссылки была описана Ванневаром Бушем в статье 1945 года «As We May Think», где он предложил устройство «memex» для ассоциативного доступа к документам. Тим Бернерс-Ли реализовал гиперссылки в первом веб-браузере WorldWideWeb в 1990 году, сделав их основой навигации по сети. Атрибут href и синтаксис тега <a> сохраняются без изменений с первой версии HTML.

¶Источники

• HTML Living Standard — WHATWG
• «HTML5: Up and Running», Марк Пилгрим
• «Справочник по HTML и CSS», Джон Дакетт
• MDN Web Docs — Mozilla