§ 30. Гиперссылки в НТМL

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

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

Элемент <a> — HTML-элемент, который создаёт гиперссылку. Между открывающим и закрывающим тегами размещают текст или изображение-ссылку. Именно это содержимое видит пользователь и активирует щелчком.

Атрибут href — атрибут элемента <a>, в котором указывают адрес назначения ссылки. В нём записывают URL сайта, путь к файлу или ссылку на фрагмент документа. Без правильного href браузеру некуда выполнять переход.

Фрагмент документа — именованная часть страницы, на которую можно перейти, указав её идентификатор после символа #. Идентификатор задают целевому элементу с помощью атрибута id. Такой механизм нужен для оглавлений, меню и быстрого перехода к разделам.

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

Переход задаётся элементом <a> и адресом в href, а содержимое между тегами становится видимой ссылкой. Например, в записи <a href="index.html">Главная</a> браузер показывает текст «Главная». Разделение адреса и текста нужно потому, что пользователю удобнее видеть короткое описание, а не длинный технический путь.

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

Чтобы ссылка вела к определённому месту другой или той же страницы, этому месту задают идентификатор, а в адрес добавляют символ # и его значение. Например, целевой элемент может иметь запись <div id="conclusions">. В ссылке на него указывают #conclusions или results.html#conclusions, если фрагмент находится в другом файле.

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

Ссылка может вести не только на веб-страницу, но и на файл для открытия или скачивания. Браузер определяет действие по адресу и типу файла: HTML обычно открывается как страница, а архив часто предлагается сохранить. Поэтому достаточно правильно указать путь в href, например <a href="files/report.pdf">Отчёт</a>.

Виды гиперссылок и запись адреса

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

Относительный путь читают от папки, где расположен текущий HTML-файл. Если файл находится во вложенной папке, её имя включают в путь, например pages/about.html. Такая проверка помогает не перепутать адрес страницы с адресом, который браузер должен использовать.

Разбор задач

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

1. Запишите имя целевого файла: index.html.
2. Поместите это имя в кавычках после href=.
3. Добавьте между тегами <a> и </a> текст «Главная».

Ответ: <a href="index.html">Главная</a>. При щелчке браузер ищет index.html в той же папке, где находится текущая страница.

Задача 2. На странице about.html создайте ссылку на внешний сайт https://example.com с осмысленным текстом. Полный адрес уже известен, поэтому относительный путь здесь не подходит. Нужно отдельно указать URL и понятную пользователю надпись.

1. Выберите текст, описывающий ресурс, например «Сайт проекта».
2. Запишите полный адрес https://example.com в атрибут href.
3. Проверьте, что выбранный текст находится внутри элемента <a>.

Ответ: <a href="https://example.com">Сайт проекта</a>. Пользователь увидит осмысленную надпись, а переход произойдёт на внешний сайт.

Задача 3. Добавьте ссылку «К выводам», ведущую к разделу с идентификатором conclusions на странице results.html. В этой задаче адрес состоит из имени файла и фрагмента после символа #. На целевом разделе обязательно должен быть установлен тот же идентификатор.

1. Укажите файл назначения: results.html.
2. Добавьте к нему #conclusions, получив адрес results.html#conclusions.
3. В целевом разделе запишите атрибут id="conclusions".
4. Поместите текст «К выводам» между тегами ссылки.

Ответ: <a href="results.html#conclusions">К выводам</a>, а у целевого элемента должно быть <... id="conclusions">. Если написание id совпадает полностью, браузер откроет results.html и прокрутит её к разделу выводов.

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

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

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

Ошибка в относительном пути возникает, если не учесть папку текущего HTML-файла. Например, файл pages/about.html ищут не в той папке, когда пишут about.html вместо нужного пути. Сверьте расположение обоих файлов и мысленно пройдите путь от текущего документа.

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

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

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

Знание структуры файлов и папок помогает составлять относительные адреса. Оно особенно полезно, когда страницы распределены по нескольким вложенным каталогам.

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

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

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