Якорь в HTML — это мощный инструмент, позволяющий организовать навигацию внутри веб-страницы. С его помощью можно создавать ссылки, которые перенесут пользователя к различным разделам страницы без перезагрузки.
Чтобы создать якорь, необходимо использовать пару тегов: <a>
для определения ссылки и id
или name
для указания целевого элемента. Рассмотрим на примерах.
Пример 1: Использование id
<a href="#section1">Перейти к разделу 1</a>
...
<div id="section1">Содержимое раздела 1</div>
Клик по ссылке с атрибутом href
, содержащим #
и идентификатор целевого элемента, приведет к переходу к <div>
, у которого id="section1"
.
Пример 2: Использование name (устарело)
<a href="#section2">Перейти к разделу 2</a>
...
<a name="section2"></a>Содержимое раздела 2
Хотя использование атрибута name
возможно, его применение устарело и рекомендуется использовать id
.
Такие якорные ссылки html могут быть расположены как на одной странице, так и служить переходом к якорям на других страницах. В последнем случае атрибут href
будет содержать полный URL страницы вместе с якорем. Пример: <a href="http://example.com/page.html#section3">
.
Якоря повышают удобство навигации по длинным страницам и помогают пользователю быстро находить интересующую информацию.