§ 30. Гиперссылки в HTML

Определения и обозначения

Гиперссылка — элемент веб-страницы, по которому переходят к другому документу, странице или фрагменту страницы. Она связывает отдельные материалы и превращает набор файлов в удобный сайт. Благодаря ссылкам пользователь может открыть нужный ресурс без ручного ввода его адреса.

Элемент a — парный HTML-элемент, задающий ссылку и содержащий видимый текст или другой объект-переход. Его записывают с открывающим и закрывающим тегами: содержимое между ними становится активной частью страницы. Этот элемент нужен, чтобы браузер распознал область, по которой можно щёлкнуть.

Атрибут href — атрибут элемента a, в значении которого указывают адрес назначения ссылки. Именно он сообщает браузеру, какой документ или фрагмент следует открыть после действия пользователя. Если href отсутствует или записан неверно, ссылка не получает корректного направления.

Якорь — обозначенный фрагмент веб-страницы, к которому можно перейти по ссылке. Обычно фрагменту присваивают уникальный идентификатор id, а в адресе ссылки перед ним ставят символ #. Якоря удобны для оглавлений, длинных статей и кнопок «К началу».

Как это устроено

Гиперссылка состоит из открывающего тега <a>, атрибута href, текста ссылки и закрывающего тега </a>. Например, запись <a href="contacts.html">Контакты</a> объединяет адрес и видимую надпись в один элемент. Текст помещают внутрь элемента, потому что именно эта область должна реагировать на щелчок, а закрывающий тег показывает, где ссылка заканчивается.

Адрес в href определяет, куда браузер отправит пользователя. Абсолютный адрес содержит полный путь, включая протокол и имя сайта, поэтому не зависит от расположения текущего файла. Относительный адрес отсчитывается от текущей страницы: это удобно, когда все файлы принадлежат одному сайту и его структуру можно выразить путями вроде contacts.html или pages/about.html.

Для перехода к фрагменту той же страницы сначала обозначают цель: например, заголовку или разделу задают id="contents". В href записывают #contents, потому что символ # отделяет имя якоря от обычного адреса. Совпадение id и имени после # необходимо: браузер ищет элемент с таким идентификатором и прокручивает страницу к нему.

Атрибут target задаёт, где открыть документ, найденный по href. Если target не указан, переход обычно происходит в текущем окне или вкладке, поэтому пользователь покидает открытый документ. Значение target="_blank" обычно открывает ресурс в новой вкладке, что удобно для внешних материалов, но не следует применять без причины: большое количество новых вкладок усложняет навигацию.

Текст ссылки должен заранее сообщать о её назначении: «Расписание занятий» понятнее, чем «нажмите здесь». Это помогает быстро просматривать страницу и понимать смысл ссылок без чтения соседнего текста. Понятные подписи особенно важны для оглавлений и навигации, где несколько ссылок расположены рядом.

Элементы и атрибуты гиперссылок в HTML

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

Разбор задач

Ссылка на внешний ресурс

Нужно записать ссылку с текстом «Официальный сайт» на ресурс https://example.com. Это внешний адрес, поэтому относительный путь здесь не подходит. Требуется сохранить полный URL в атрибуте href, а нужную пользователю надпись поместить между тегами элемента a.

1. Выбираем парный элемент <a>, потому что ссылка должна содержать видимый текст.
2. Записываем полный адрес в кавычках после href=.
3. Помещаем текст «Официальный сайт» между открывающим и закрывающим тегами.

Ответ: <a href="https://example.com">Официальный сайт</a>. Браузер покажет указанную надпись как ссылку и при щелчке обратится к внешнему ресурсу.

Ссылка на файл в той же папке

Со страницы index.html нужно перейти к contacts.html, который находится рядом с ней в одной папке. Полное имя сайта указывать не нужно, поскольку оба файла являются частью текущего проекта. Достаточно записать имя целевого файла как относительный адрес.

1. Проверяем расположение файлов: index.html и contacts.html должны находиться в одной папке.
2. Выбираем относительный адрес contacts.html без протокола и доменного имени.
3. Создаём ссылку и задаём ей понятный текст, например «Контакты».

Ответ: <a href="contacts.html">Контакты</a>. При открытии ссылки браузер найдёт contacts.html относительно текущего index.html.

Переход к якорю в текущем документе

На странице article.html нужна ссылка «К содержанию», ведущая к разделу с id="contents". Так как цель находится в том же документе, перед именем идентификатора ставят символ #, а отдельный полный URL не нужен. Открывать другой документ не требуется, поэтому target можно не указывать: переход останется в текущем окне.

1. Проверяем, что целевой раздел действительно имеет запись id="contents".
2. Формируем адрес якоря: #contents.
3. Записываем его в href и помещаем «К содержанию» между тегами ссылки.

Ответ: <a href="#contents">К содержанию</a>. Отсутствие target означает открытие в текущем окне, а совпадение contents в href и id обеспечивает переход к нужному разделу.

Типичные ошибки

Адрес иногда пишут вне href или забывают кавычки вокруг его значения. Так браузер не получает правильно оформленного назначения и воспринимает запись не так, как ожидается. Проверьте, что адрес находится после href= и заключён в двойные кавычки.

Абсолютный и относительный адрес могут перепутать: например, для локального файла указывают несуществующий внешний путь. Ошибка возникает, когда не учитывают расположение текущего документа и целевого файла. Сверьте адрес с файловой структурой сайта и решите, нужен ли полный URL или путь внутри проекта.

Незакрытый тег </a> или текст за пределами элемента нарушает структуру HTML-кода. Браузер может распространить ссылку на соседнее содержимое или неправильно обработать разметку. Проверьте, что каждый открывающий тег имеет закрывающий, а подпись находится между ними.

При ссылке на якорь иногда забывают символ # или задают id, не совпадающий с именем в адресе. Тогда браузер не находит цель и переход внутри страницы не выполняется. Сравните посимвольно значение id и часть href после #, включая регистр букв.

Связь с другими темами

До изучения гиперссылок нужно понимать назначение HTML-тегов, структуру документа и правила записи атрибутов. Без этого трудно отличить содержимое элемента от его настроек и правильно закрыть тег.

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

Гиперссылки применяются при создании меню сайта, оглавлений и переходов между разделами. Поэтому они соединяют отдельные страницы в единую систему, по которой пользователь может последовательно перемещаться.

Что запомнить

• Гиперссылка создаётся парным элементом <a>.
• Адрес перехода записывают в атрибуте href.
• Текст между тегами <a> и </a> становится видимой ссылкой.
• Абсолютный адрес содержит полный путь к внешнему ресурсу.
• Относительный адрес задаёт путь внутри текущего сайта.
• Для перехода к фрагменту страницы используют id якоря и символ #.
• Атрибут target задаёт способ открытия документа.