Ссылка-якорь – это термин, который используется для обозначения ссылок, перенаправляющих пользователей на определенную область экрана. Якорные ссылки направляют пользователей в нужный раздел сайта. Чаще всего такие невидимые отметки используются на одностраничных сайтах.
Создание ссылки-якоря (anchor link) предполагает наличие двух основных элементов: самой ссылки, указывающей на определенный раздел или элемент на странице, и якоря, к которому эта ссылка ведет. Чтобы создать такую ссылку при помощи HTML, можно использовать следующий подход:
- Определите якорь: Якорем может быть любой элемент на странице, к которому вы хотите создать ссылку. Обычно это заголовок или определенный раздел. Для этого элемента нужно задать уникальный идентификатор (ID). Например:
<h2 id=»section1″>Заголовок раздела</h2>
Создайте ссылку: Чтобы создать ссылку на этот якорь, используйте тег
<a>
с атрибутомhref
, в котором указывается ID якоря, предваренный символом решетки (#). Например:<a href=»#section1″>Перейти к разделу</a>
Когда пользователь кликает по такой ссылке, браузер переносит его к элементу с соответствующим ID.
Пример использования в HTML-документе:
<!DOCTYPE html>
<html>
<head>
<title>Пример страницы с якорной ссылкой</title>
</head>
<body><h1>Пример страницы</h1>
<!— Ссылка, которая ведет к якорю —>
<a href=»#section1″>Перейти к разделу «Заголовок раздела»</a><!— Контент страницы… —>
<!— Якорь —>
<h2 id=»section1»>Заголовок раздела</h2>
<p>Текст раздела…</p></body>
</html>