36. Якоря в HTML

В предыдущем уроке познакомились с ссылками в HTML. В этом уроке речь пойдет о якорях - ссылка на определенную часть страницы.

Примечание (10.2024)

Сначала покажу устаревший способ создания якоря.

Использование атрибута name

Якорь, это некая закладка на странице. Чтобы быстро перейти к какой-либо части на странице, используют якорь. Он делается просто: в нужном месте пишут ссылку <a>, дают ей имя при помощи атрибута name, далее пишут еще одну ссылку, уже из того места, откуда нам нужно перейти к якорю, но пишут ее с атрибутом href, в значении указывается символ решетка (#), а далее пишется имя закладки (якоря). Далее пример:

<a name = "top"></a>
<p height = "2000px"></p>
<a href = "#top">Наверх</a> 

Между тегами <a> ... </a> в закладке текст необязателен, так как мы просто указываем место перехода. Ссылка на закладку может быть с любой страницы. Далее пример:

<a href = "https://codebra.ru#bottom">Перейти к нижней части текста</a> 

Использование атрибута id

Атрибут name использовать неактуально. Вместо него используйте уникальный идентификатор id, с которым вы познакомились в этом уроке.

Далее пример:

<div id = "top"></div>
<p height = "2000px"></p>
<a href = "#top">Наверх</a> 

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

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

Похожие уроки Codebra

1. Напишите якорь с именем go (вместо <!-- якорь -->)
2. Сделайте ссылку на якорь с этим именем (вместо <!-- ссылка на якорь -->)

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.