Якорь html

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

Три основных вопроса:

1. Что это?
2. Зачем мне это нужно?
3. Как это работает?

Что это?

Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу. Ссылка с якорем содержит символ #, после которого идёт идентификатор.

Переход пользователя по ссылке на якорь приводит его (пользователя) к месту установки якоря, к «заякоренной» намеченной точке на веб-странице. Иными словами, при переходе пользователя по ссылке на якорь – веб-страница откроется в браузере не со своего сначала, а сразу в том месте, где этот якорь установлен.

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

Итого:
– устанавливаем на странице несколько якорей в разных местах
– указываем адрес с якорем в необходимых ссылках
– получаем навигацию на одной странице

Зачем мне это нужно?

Действительно, зачем? Средняя страница занимает порядка 2000 слов (этот объем “любят” роботы поисковых систем), это примерно 4 экрана браузера.

Зачем нужна внутренняя навигация на странице, пользователь и так всё пролистает при чтении.

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

Пример 1. Только перелинковка, браузер будет открывать все страницы с самого начала.

Вы действительно думаете, что пользователь в поиске нужной ему информации будет ТАК гулять по Вашему сайту? Листать 2-ю и 3-ю страницу? Нет, не будет – уйдет с сайта.

Пример 2. Перелинковка с якорями – использование якоря позволяет доставить пользователя сразу к нужному месту другой страницы.

Совсем другое дело :)

Как это работает?

Чтобы создать и установить якорь на веб-странице, нужно вставить код якоря в код html-документа и присвоить якорю уникальное имя в пределах его страницы. Имя якоря – это его условный идентификатор, по которому браузер находит якорь на странице. Имя якоря может быть любым. Желательно, оно должно соответствовать тематике страницы и содержать, минимум три символа. Имя якоря может содержать цифры и латинские буквы в любой комбинации. Выбор имени для якоря ничем не ограничивается, кроме одного – оно должно быть уникальным в пределах страницы своего месторасположения. На одной странице (по одному веб-адресу) не может быть двух якорей с одинаковым именем. Якоря с одинаковым именем, расположенные на разных веб-страницах (по разным веб-адресам) – будут прекрасно работать.

Изначально, для создания пользовательских якорей, в HTML был задуман тег <a> и его атрибут name. Параллельно атрибуту name, у тега <a> существовал атрибут id, который тоже расценивался как якорь на веб-странице. Так они и стали родоначальниками классических якорей – тег <a> и его атрибуты – name и (или) id

Код классического якоря создаётся при помощи тега <a>
При этом – имя якоря (его идентификатор) задаётся через атрибуты тега <a> – name или id
Таким образом, код классического якоря,вставляемый в документ HTML будет иметь вид

<a name="info1"></a> или <a id="info1"></a>

где, слово “info1” – это произвольное уникальное имя якоря в пределах страницы его местонахождения.

Правильные якоря бывают видимыми и невидимыми. «Видимым» называется тот якорь, который имеет анкор – видимую часть элемента. Как правило, это текстовая часть.

Код невидимого якоря:

<a name="info1"></a> или <a id="info1"></a>

Код видимого якоря:

<a name="info1">Читать здесь</a>

или 

<a id="info1">Читать здесь</a>

где текст  «Читать здесь» – видимая часть текста якоря (анкор).

Относительно выбора атрибута name или id, то по отношению тега <a> – прекрасно работают оба варианта, поскольку тег <a> отлично поддерживает оба из них.

Но атрибут (идентификатор) «id» стал более предпочтительным, поскольку он более универсален. Атрибут (идентификатор) «id» легко обрабатывается браузером и поддерживается большинством тегов XHTML и HTML. В то время, когда атрибут name – это очень специфичный атрибут, который поддерживается только тегом <a>.

Если при помощи идентификатора id можно вставить якорь, практически в любой элемент веб-разметки, то при помощи атрибута name можно использовать якорь только с тегом <a>.
С точки зрения классики веб-языков и истории создания кода якорей более правильным будет атрибут name.

С точки зрения удобства, универсальности и прогресса, то, естественно – код правильного якоря должен быть написан через атрибут id и иметь вид: 

<a id="razdel"></a>

ВАЖНО: для Турбостраниц Яндекса вариант выше не работает. Валидатор Яндекса выдает ошибку. “…отсутствует или указан у неподдерживаемого элемента. В качестве якоря можно использовать контент в виде аккордеона или заголовок h1–h6”. Яндекс.Турбо понимает только два вида якоря.

для заголовка (h1, h2, h3, h4, h5, h6)

<h1 id="info1">Текст заголовка...

для списка (ul, ol, dl) и его элементов (li, dt, dd)

<ul id="info1">тело списка...

<li id="info1">тело элемента списка...

для элементов таблицы (table, caption, col, colgroup, tbody, td, tfoot, th, thead, tr)

<table id="info1">тело таблицы или её элемента...

Ссылка на якорь создаётся при помощи тега <a> и его атрибута href. Ссылка на якорь ничем не отличается от обычной ссылки, с той только разницей, что к адресу веб-документа добавляется решётка (#) и имя якоря.

Вот пример ссылки с якорем на страницу “Глубина просмотра” к отметке “Конец страницы”, сама ссылка выглядит вот так:

"<a href="/yuzabiliti/glubina-prosmotra.html#end">Глубина просмотра</a>"

а на самой странице сделан якорь end.

Существует еще якорь “без якоря”

Это вариант ссылки https://seotable.ru/yuzabiliti/yakor-html.html#, т.е. с указанием # в конце URL. Сам якорь предварительно не задается – при нажатии на такую ссылку, браузер прокручивает страницу к началу.

Именно так работает кнопка “Наверх” на всех сайтах.

В чем отличие обычной ссылки и ссылки с пустым якорем (отличие в один символ на конце URL)?

https://seotable.ru/yuzabiliti/yakor-html.html – перезагружает страницу с сервера
https://seotable.ru/yuzabiliti/yakor-html.html# – не перезагружает страницу, браузер перелистывает текущую страницу к началу

Хотя визуально результат выглядит одинаково.