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

  1. Пример использования якоря
  2. Действие якоря
  3. Показания к применению якоря
  4. Как создать и установить якорь на веб-странице
  5. Имя якоря
  6. Код якоря
    1. Код классического якоря (тег <а>)
    2. Код правильного якоря
    3. «невидимый» и «видимый» якоря
    4. Код самого простого якоря
    5. Якорь в заголовке, в списке, в таблице.
      Якорь в любом открывающем теге элемента HTML
  7. Ссылка на якорь
    1. Код ссылки на якорь, в пределах одной страницы
    2. Код ссылки на якорь, расположенный на другой странице
    3. Код ссылки на якорь, расположенный на другом домене (блоге, сайте)
    4. Абсолютная ссылка

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

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

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

Чтобы создать и установить якорь на веб-странице,
нужно вставить код якоря в код html-документа и
присвоить якорю уникальное имя в пределах его страницы.

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

На одной странице (по одному веб-адресу) не может быть двух якорей с одинаковым именем. Если на одной странице будут находиться якоря с одинаковым именем, то они – либо совсем не будут работать, либо будет открываться только первый из них (это зависит от браузера пользователя).

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

Общий вид современного кода якоря в HTML представляет собой конструкцию из любого открывающего тега HTML и его атрибута, задающего уникальное имя (идентификатор) для якоря.

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

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

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

Код невидимого якоря:
<a name=»razdel»></a> или <a id=»razdel»></a>
Код видимого якоря:
<a name=»razdel»>ТЕКСТ</a> или <a id=»razdel»> ТЕКСТ </a>
где, слово «ТЕКСТ» – видимая часть текста якоря (анкор). Этот текст (анкор) будет «отсвечивать» в месте установки якоря.

И тут возникает вопрос в правильности выбора атрибута.
Какой из них правильней будет использовать – name или id ???
Если работают-то оба ???

Относительно выбора атрибута name или id, то по отношению тега <a> – прекрасно работают оба варианта, поскольку тег <a> отлично поддерживает оба из них. Лично я, долгое время использовал конструкцию вида <p><a name=»razdel»></a></p>, которую вручную вставлял в HTML-код текста непосредственно перед заголовком (тегом <Н>). При этом, якорь красиво открывал страницу сайта в месте его установки, с небольшим пробелом вверху экрана.

Через некоторое время, после очередного обновления своего HTML-редактора, я заметил, что он автоматически заменяет name на id, и везде ставит якоря, вида <a id=»razdel»></a>

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

Но! С другой стороны – атрибут name, как раз-таки и придуман для создания якорей. При чём, этот атрибут придуман ещё на заре Интернет-времён и поддерживается ещё в древнейшем HTML 3.2. А это значит, что наш дорогой «name» уже присутствует на миллионах веб-страниц и его ещё не скоро отправят на помойку. Просто не смогут!

Таким образом получается что, с точки зрения классики веб-языков и истории создания кода якорей, то – более правильным будет атрибут name. Ну, а с точки зрения удобства, универсальности и прогресса, то, естественно – код правильного якоря должен быть написан через атрибут id и иметь вид: <a id=»razdel»></a>

Но, два раза правильно – так не бывает! Где же истина?
И, как будет более правильно, <a name=»razdel»></a> или <a id=»razdel»></a>?

Истину, как всегда, можно узреть в корне проблемы, задавшись вопросом – «А при чём здесь вообще тег <a>, если атрибут id поддерживают почти все теги HTML?». Если атрибут id имеет такую широкую поддержку, то не проще будет пользоваться именно им? Ведь тогда код якоря значительно упрощается и сводится к виду id=»razdel», который можно установить почти в любой открывающий тег HTML и XHTML!

Атрибут («id») поддерживают теги списков (ul, ol, li, dl, dd, dt), теги таблицы (table, tr, td…), теги блоков и абзацев (div, p) и ещё семь десятков открывающих тегов других элементов HTML. И, во все из них можно вставить или попытаться вставить якорь, при помощи атрибута «id». Делается это достаточно просто – в открывающий тег требемого элемента нужно добавить конструкцию, вида id=»razdel», где, естественно, слово «razdel» – это уникальное имя якоря в пределах его страницы. Если такая конструкция там уже есть, например – она может быть сделана верстальщиком шаблона сайта, значит – ничего делать не нужно. Якорь уже стоит. Надо только запомнить его имя и сделать ссылку на него.

Якорь в заголовке, в списке, в таблице.
Якорь в любом открывающем теге элемента HTML…

(к оглавлению)

Таким образом, учитывая что код самого простого якоря имеет вид id=»razdel», то код требуемого элемента разметки HTML, с установленным в него якорем, будет выглядеть, примерно так:

для заголовка (h1, h2, h3, h4, h5, h6)
<h1 id=»razdel»>Текст заголовка…
для списка (ul, ol, dl) и его элементов (li, dt, dd)
<ul id=»razdel»>тело списка…
<li id=»razdel»>тело элемента списка…
для элементов таблицы (table, caption, col, colgroup, tbody, td, tfoot, th, thead, tr)
<table id=»razdel»>тело таблицы или её элемента…
… и так далее, и тому подобные конструкции, вида:
<div id=»razdel»> или <p id=»razdel»>
и всё это будут – якоря в открывающих тегах элементов HTML.
(закрывающие теги для элементов, естественно – обязательно)

Прошу прощения за столь вольное обращение с написанием тегов, но я всего лишь хотел подчеркнуть собственное бессилие перед созиданием и проверкой семи десятков почти одинаковых примеров. И так понятно, что код якоря вида id=»razdel» можно вставить, практически в любой открывающий тег HTML. И такой якорь должен работать. Для примера, вся эта статья сделана именно такими якорями.

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

Все ссылки на якоря можно условно разделить на три группы:

1 группа – Локальные ссылки на якорь,
расположенный в пределах одной страницы
Код ссылки на якорь, расположенный в пределах одной и той же страницы, будет выглядеть так: <a href=»#razdel»>ТЕКСТ ССЫЛКИ</a> где, razdel – это уникальное имя якоря в пределах документа html, а ТЕКСТ ССЫЛКИ – это видимая текстовая часть (анкор) ссылки.

Если якорь и ссылка на него находятся в пределах одной страницы сайта или блога, то полный путь к якорю в ссылке указывать не обязательно, достаточно просто решётки и имени якоря – #razdel. Браузер сам найдёт якорь на странице, причём сделает это гораздо быстрее, нежели в случае с полным указанием абсолютного пути к якорю, когда потребуется перезагрузка страницы.

2 группа – Локальные ссылки на якорь,
расположенный в пределах одного домена (сайта, блога)
Код ссылки на якорь, расположенный на другой странице в том же домене имеет вид: <a href=»https://mehelps.ru/adress-stranici.html#razdel»>ТЕКСТ ССЫЛКИ</a> где, /adress-stranici.html – адрес веб-страницы без указания домена, razdel – уникальное имя якоря, в пределах именно той страницы, где он расположен.

Если якорь и ссылка на него находятся в пределах одного домена (сайта, блога), то имя домена в ссылке указывать не обязательно. Браузер сам отсчитает путь к документу и найдёт якорь на странице

3 группа – Абсолютные ссылки на якорь,
расположенный на другом домене (блоге, сайте)
Если якорь и ссылка на него находятся на страницах разных сайтов с разными доменными именами, то в такой ссылке нужно прописать полный (абсолютный) путь к веб-документу и якорю на нём. Делается это, с указанием протокола (обычно http), домена (доменного имени сайта), полного адреса страницы и уникального имени самого якоря. Код такой ссылки будет выглядеть так:
<a href=»https://mehelps.ru/yakor-v-html.html#razdel»>ТЕКСТ ССЫЛКИ</a> где, https://mehelps.ru/yakor-v-html.html – полный адрес страницы в Сети, с указанием домена, razdel – уникальное имя якоря, в пределах страницы его местонахождения.

Ссылка с указанием полного пути называется абсолютной ссылкой.
Абсолютные ссылки можно использовать для любых якорей, даже находящихся на одной и той же странице. Абсолютные ссылки наиболее предпочтительны для SEO-оптимизации страницы и сайта, ибо, зачастую – якоря, на которые сделаны абсолютные ссылки – могут быть засчитаны поисковиком за абсолютно разные веб-адреса и тексты. И, даже – якоря, на которые сделаны абсолютные ссылки – могут предлагаться отдельными позициями при выдаче в СЕРП (страницу поисковой выдачи). По крайней мере, у Google такое иногда наблюдается.

Недостаток работы абсолютной ссылки на якорь – полная перезагрузка страницы из сервера. Т.е. переход на якорь происходит с полной перезагрузкой страницы в браузер, даже если якорь и ссылка на него находятся на одной странице. Полная перезагрузка страницы занимает дополнительное время, создаёт дополнительную нагрузку на сетевое подключение, дополнительно жрёт трафик пользователя и самое главное – не работает без подключённого Интернета (в локальном или автономном режиме).

Источник: Компьютерный умник

 

Статья была полезной?