Якорь– это очень полезный инструмент, который позволяет организовать документ и сделать его более удобным для чтения пользователем. Как и все HTML инструменты, этот тег подчиняется стандартному синтаксису, и работа с ним не вызывает каких-либо затруднений.

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

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

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

Якорь делается очень просто. Первым делом нужно создать в теле документа нужную метку. Именно за эту метку будет цепляться ссылка на странице – и переносить читателя на эту точку.

Метка создаётся стандартным для языка HTML способом. Можно использовать инструмент name, а можно задатьid элемента и ссылаться на него.

Примеры использования name и id

Инструмент name

Имя метки, указанное в кавычках, должно быть уникальным и отличаться от остальных имен на страничке. В противном случае алгоритм запутается.

Заполнение пространства между тегами в данном случае не обязательно, но приветствуется. Это упрощает ориентирование в коде.

Инструмент id

Данный способ ещё более простой. Достаточно приписать конкретному элементу на странице id номер.

В этом случае, заголовок h1 стал для нас якорем.

Для того, чтобы указать ссылку в странице на выбранный якорь, в обоих случаях мы используем одинаковую конструкцию. Стандартный код ссылки дополняется инструментом #.

Пример ссылки внутри старницы

Необходимо сослаться на пукт 1. Код имеет следующий вид:

При клике на данную ссылку, произойдет переход к пункту 1. При этом следует понимать, что пункт 1 должен быть выделен согласно описанию, представленному выше. (размечен элементом name или id1).

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

Здесь /adress-stranici – имя страницы на сервере, на которой описаны режимы работы и на которую следует отправить читателя.

Punkt1 – тот  режим, который нужно изучить на этой странице.

При нажатии на эту ссылку, пользователь попадет на страницу adress-stranlci, в точку, где установлен якорь с названием punkt1.