Якорная ссылка html: Как сделать, примеры

Якорная ссылка HTML (Или Якорь по другому) - это замечательный инструмент, который позволит облегчить навигацию по большому тексту. Якоря, действительно, удобны и просты для размещения в HTML-коде. Например, я, давеча, написал инструкцию как установить шрифт в Photoshop, Windows 10, Word🔗 и применял якорные ссылки html в качестве пунктов "Содержания" для перехода к нужным разделам статьи. Так же использовал подобный принцип и здесь. Но делу, друзья


Якорная ссылка 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>.
Добавить комментарий

Оставить комментарий

    • Смайлы и люди
      Животные и природа
      Еда и напитки
      Активность
      Путешествия и места
      Предметы
      Символы
      Флаги