Якоря

Якорем называется закладка с уникальным именем на определённом месте веб-страницы, предназначенная для перехода к ней по ссылке. Якоря удобно применять в документах большого объёма, чтобы можно было быстро переходить к нужному разделу.

Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей уникальное имя при помощи атрибута id (пример 1). В имени допустимо писать русские, латинские буквы и символы, нельзя только пробел. В качестве значения href для перехода к этому якорю используется значение id с символом решётки (#) впереди.

Пример 1. Создание якоря

<!DOCTYPE html>
<html>
 <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 совпадали (символ решётки не в счёт).

При щелчке по такой ссылке произойдёт переход к элементу в окне браузера.

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

Ссылку также можно сделать на якорь на другой веб-странице и даже на другом сайте. Для этого в атрибуте href элемента <a> надо указать полный адрес документа и в конце добавить символ решётки и имя якоря (пример 2).

Пример 2. Быстрый переход по Википедии

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Якорь в другом документе</title> </head> <body> <p><a href="https://ru.wikipedia.org/wiki/HTML5#Разметка">Разметка HTML 5</a></p> </body> </html>

В данном примере показано создание ссылки на страницу Википедии, при открытии ссылки происходит переход к разделу с якорем HTML_5.1.

Если на веб-странице содержится ссылка на якорь, а самого якоря нет, то никакой ошибки не возникнет. По этой причине решётку часто используют для пустых ссылок, когда ссылка нужна, но адрес пока не известен (пример 3) или нажатие обрабатывается программой на JavaScript.

Пример 3. Пустые ссылки

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>#</title>
 </head>
 <body>
  <p><a href="#">О нас</a>
   <a href="#">Проекты</a>
   <a href="#">Вакансии</a></p>
 </body>
</html>

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

Перейти к заданиям

Автор: Влад Мержевич
Последнее изменение: 02.06.2020