Якорная ссылка HTML (Или Якорь по другому) - это замечательный инструмент, который позволит облегчить навигацию по большому тексту. Якоря, действительно, удобны и просты для размещения в HTML-коде. Например, я, в свое время, написал инструкцию как установить шрифт в Photoshop, Windows 10, Word🔗 и применял якорные ссылки html в качестве пунктов "Содержания" для перехода к нужным разделам статьи. Так же использовал подобный принцип и здесь (в Дзен этот принцип не работает). Но делу, друзья:
Итак, как мы уже поняли, для навигации "Содержания" здесь применятся - Якорная ссылка html. Разберемся поподробней, что это за такой "Зверь".
Якорная ссылка - это самая обычная ссылка вида <а></а>, имеющая уникальное имя - "name" или идентификатор "id", в языке html запишется, например, так ⤵️:
<a name="top"></a> и <a id="top"></a>
На месте "top" может быть любое слово, придуманное Вами, и написанное латинскими буквами. При этом между тегами <а></а> ставить текст необязательно - это, своего рода метка, к которой будет осуществляться переход в любую часть текста, от нажатой гиперссылки в тексте.
Значит, чтобы перейти к нашему якорю, нужно создать дополнительную ссылку следующего вида ⤵️:
<a href="#top">Наверх</a>
Как видите, отличие лишь в том, что в тег <а></а> введен атрибут href и обязательное значение в виде символа решетки "#" перед словом придуманным Вами, в нашем случае это "top". Здесь важно, обязательно, поставить текст для создания кликабельной ссылки.
HTML код якорных ссылок
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Быстрый переход внутри документа</title> </head> <body> <p><a name="top"></a></p> <p>...</p> <p><a href="#top">Наверх</a></p> </body> </html>
Якорная ссылка на другую страницу
Фактически, разница будет минимальной и код гиперссылки будет выглядеть так ⤵️:
<a href="anysite.ru/text.html#bottom">Перейти к нижней части текста</a>.
Как видите, к символу # прибавляется ссылка на нужную страницу anysite.ru/text.html#bottom.
Наглядный пример якорной ссылки, нажав -> Видоурок: Как установить новый шрифт на компьютер🔗 Вы перейдете сразу к ссылке-якорю раздела видеоурок! Попробуйте! Код HTML же будет выглядеть следующим образом ⤵️:
<a href="/222-kak-ustanovit-shrift-v-photoshop-windows-10-word.html#videourok_1" target="_blank"><u>Видоурок:Как установить новый шрифт на компьютер?</u></a>
Сделать ссылку-якорь в Wordpress
Создать такие маркерные ссылки в самых популярных новостных движках, в том числе и Wordpress, не составит труда, ибо алгоритм не отличается от описанного в этой статье. Для облегчения работы с якорями существует множество модулей, плагинов, которые без труда можно найти в сети интернет, например, Better Anchor Links
Если не работают якорные ссылки
- Проверьте совпадение значений атрибутов "name" , "href", т.е. <a name="top"></a> и <a href="#top">Наверх</a>;
- Не поставлена ссылка - якорь;
- Не поставлена решетка # в атрибуте href, <a href="#top">;
- Не закрыт тег <a>, т.е. <a href="#top"></a>.