Якорі

Якорем називається закладка з унікальним ім'ям на певному місці веб-сторінки, призначена для створення переходу до неї за посиланням. Якорі зручно застосовувати в документах великого обсягу, щоб можна було швидко переходити до потрібного розділу.

Для створення якоря слід спочатку зробити закладку в відповідному місці і дати їй ім'я за допомогою атрибута name тега <a> (приклад 1). Як значення href для переходу до цього якоря використовується ім'я закладки з символом решітки (#) спереду.

Приклад 1. Створення якоря

See the Pen KKMLKWE by Vadym6917012 (@vadym6917012) on CodePen.

Між тегами <a name="top"> і </a> текст не обов'язковий, так як потрібно лише вказати місце розташування переходу за посиланням, що знаходиться внизу сторінки. Ім'я посилання в якорі починається з символу #, після чого йде ім'я якоря, воно вибирається будь-яке, відповідне до тематики. Головне, щоб значення атрибутів name і href співпадали (символ решітки не береться до уваги).

З якорями пов'язана одна особливість роботи браузера. Після переходу до зазначеного якоря натискання на кнопку «Назад» повертає нема на попередню переглянуту сторінку, а до посилання, з якого був зроблений перехід до якоря. Виходить, що для переходу до попереднього документу треба натиснути кнопку «Назад» два рази.

Посилання можна також зробити на закладку, що знаходиться в іншій веб-сторінці і навіть іншому сайті. Для цього в атрибуті href тега <a> треба вказати адресу документа і в кінці додати символ решітки # та ім'я закладки (приклад 2).

Приклад 2. Посилання на закладку з іншої веб-сторінки

See the Pen BaypeOP by Sofiia (persifal17) on CodePen.

В даному прикладі показано створення посилання на файл text.html, при відкритті цього файлу відбувається перехід на закладку з ім'ям bottom.

Якщо на веб-сторінці міститься посилання на якір, а самого якоря немає, то ніякої помилки не виникне.