Как правильно назначать и использовать якорь HTML?

Сегодняшней темой для обсуждения будет якорь HTML. Данный элемент позволяет производить быстрые переходы как внутри страницы, так и во внешние документы. Якоря довольно часто используются веб-разработчиками. Так как они помогают организовать удобный для читателей сайт. В статье будет предоставлено подробное описание этого элемента и примеры эффективного использования.

Описание

Якорь HTML - это своего рода уникальная закладка веб-страницы. Он всегда имеет свое индивидуальное имя, которое не должно повторяться на одной странице. Основное предназначение якоря - быстрый переход с одной части документа к другой, к определенному местоположению. Особую эффективность данный элемент приносит, когда веб-страница имеет большие размеры. Из-за этого пользователям неудобно читать содержимое сайта. А якорь на странице HTML позволяет обеспечить быстрый переход.

Присвоение

Чтобы создать такую закладку на странице можно использовать два различных метода. Первый заключается в применении атрибута Name, а во втором случае необходимо употреблять атрибут ID. Далее мы рассмотрим каждый метод по отдельности. Переход в обоих случаях происходит при помощи тега «a», атрибут которого содержит имя или идентификатор. Например: «a href=”#footer”». Символ # сообщает браузеру, что ссылка введет на якорь.

Name

Атрибут Name создан специально для создания якоря на странице. Его значением может стать любой текст. Данный якорь HTML может использоваться только совместно с тегом «a».

Например вы хотите создать закладку в самом конце вашей страницы. Вам необходимо поместить тег «a name=”footer”»«/a» в нужную вам часть веб-документа. В другой области страницы вам придется создать ссылку на якорь, для этого добавьте запись «a href=”#footer ”»ссылка«/a». При нажатии на этот элемент браузер автоматически переведет вас к той части документа, где стоит закладка Footer.

ID

Для начала стоит сказать, что ID - это идентификатор, который не имеет прямого назначения для создания якорей. Но он позволяет создавать закладки на всей области документа без создания дополнительных ссылок. То есть, вы может применить атрибут ID к любому элементу HTML. А затем с использованием тега «a» сослаться на него. Приведем пример: элемент «p» находится в середине документа. Чтобы перейти к нему из начала страницы без использования полос прокрутки, добавим атрибут ID: «p id=”centr”»«/p». Далее создаем ссылку: «a href=”#centr”»Текст«/a». Таким образом, мы получаем быстрый доступ к любой части документа. Значением атрибута ID может быть произвольный текст.

Эффективное использование

В HTML ссылка-якорь очень часто применяется для построения навигации документа. Например, страница имеет огромное количество текстовой информации, которая в свою очередь поделена на отдельные параграфы или главы. Чтобы посетителям было удобно пользоваться сайтом, для быстрого перехода к отдельной части документа необходимо назначить закладки. Для этого в каждой главе создаем ссылку-якорь, либо используем ID идентификаторы. А сверху сделаем навигационную панель с содержанием всех ссылок. Интересен тот факт, что на якоря можно ссылаться с других веб-страниц. Достаточно добавить в конец ссылки значение атрибутов Name или ID. Не забывайте добавлять символ #. Схема в таком случае должна выглядеть так: основная ссылка#name(id).

Заключение

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