Как сделать якорь ссылки

Что такое якорь ссылки? Это те же ссылки, но с переходом на конкретное место на странице сайта.

Чаще всего ссылки якори применяются в больших статьях, чтобы сразу сослаться на конкретное место. Также они всегда применяются при создании блока “содержание статьи” (если, конечно, такой блок вообще используется).

Синтаксис якоря ссылки:

<a href="#yakor_1">Ссылка-якорь 1</a>
<a href="#yakor_2">Ссылка-якорь 2</a>
...
...
<h2 id="yakor_1">Какой-то заголовок для якоря 1</h2>
<p>
...
</p>
<h2 id="yakor_2">Какой-то заголовок для якоря 2</h2>
<p>
...
</p>

Ссылка для якоря обладает следующими особенностями:

1. Если ссылка должна вести на эту же страницу, то просто указываем через решетку # название якоря. В нашем примере #yakor_1.





2. Если ссылка ведет на другую страницу, то нужно прописать ее адрес, а потом через решетку уже якорь:

<a href="/categ/adres_stranicy.html#yakor_1">Ссылка-якорь 1</a>

Место в которое ведет якорь должно быть помечено через id. Например, в нашем случае это id=”yakor_1″. Обратите внимание, что решетка отсутствует.

В выше рассмотренным примере мы применили якорь к тегу <h2>, но это лишь пример. Якорь можно вставлять в любом теге, который позволяет применить атрибут id.

Особенности перехода по якорю:

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

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



Читайте также:

• HTML тег <a> – подробное описание с примерами

• Названия html цветов (таблица кодов цветов)

• Специальные коды символов для HTML

• Как убрать/сделать подчеркивание ссылки

• Как создать favicon.ico для сайта

• Как сделать форму обратной связи на php с каптчей

← Перейти в каталог html уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.