Бросаем якоря!

Все мы знаем, что такое анкор или гиперссылка – иногда расстановка внутренних и внешних ссылок становится смыслом всей работы блоггера, основой его заработка. Но про другую разновидность ссылок мы часто забываем, хотя они крайне полезны. Такие ссылки – якоря – улучшают юзабилити сайта (возможности пользования ресурсом для посетителей). А уж удобство юзабилити – одно из важнейших условий хорошего имиджа нашего блога и в глазах читателей, и в глазах поисковиков (по крайней мере, они постоянно это декларируют!)

Якорь и анкор

Вот как выглядит код гиперссылки или анкора:

<a href= “http://site.ru/post/” title=”текст всплывающий при наведении курсора на нашу ссылку” target=”_blank” >текст ссылки на пост</a>

Кстати, здесь мы видим знакомый атрибут title, который нам встречался и в коде для оптимизации изображений. Атрибут target=”_blank” указывает, что ссылка будет открываться в новом окне (чтобы читатель не ушел с текущей страницы, не дочитав ее).

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

Пример:

Нажмите на стрелочку, чтобы вернуться к началу этой статьи

Нажмите на стрелочку, чтобы увидеть финал статьи

Другими словами, якорь является ссылкой не на всю страницу целиком, а на ее определенную часть. Часть, которая отмечена якорем, будет отображаться в самом верху страницы, открывшейся по ссылке (или текущая страница «перемотается» так, чтобы нужный фрагмент оказался в самом ее верху).

Как поставить якорь в публикации?

Посмотрим на простейший код, который оформляет текст:

<p>Трам-пам-пам! Здесь у нас текст.</p>

Или это заголовок, например, второго уровня

<h2>Наш заголовок велик и прекрасен</h2>

Чтобы отметить любой элемент текста якорем, нужно добавить рядом с ним следующий код:

• для html

<a name="anchor"></a>

• для xhtml

<a id="anchor"></a>

Сначала разберемся, что мы написали: name=”anchor” или id=”anchor” – это атрибуты, устанавливающие якорь. Вариант id=”…” – более «продвинутый», более валидный, то есть, соответствующий последним стандартам W3C. Для шаблонов, написанных на языке xhtml нужно использовать только его. Но для шаблонов, созданных при помощи html – подойдет и атрибут name=»…»

Слово anchor в кавычках – просто пример. Вы можете написать там любые метки, которые будут вам понятны. Требования к таким меткам: они должны быть написаны латиницей и начинаться с буквы. Также, привыкайте всё писать строчными буквами – для xhtml это правило, а для html – хороший тон.

Вот как это будет выглядеть целиком:

<a name="anchor"></a><p>Трам-пам-пам! Здесь у нас текст.</p>

Обратите внимание, что в теги анкора не обязательно заключать какой-то текст. Это просто точка, к которой вернет нас ссылка.

Автоматическая постановка анкора в редакторе Вордпресс

В редакторе есть специальная кнопка с изображением якоря, которая вставляет якорь в текст статьи. Поставьте курсор на то место, где хотите «зацепиться», и впишите имя якоря во всплывающем окне:

Итак, мы расставили по тексту метки id=”anchor” или name=”anchor”, id=”anchor2” и т.д. Теперь будем на них ссылаться.

Как сослаться на якорь в текущей публикации?

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

<p>Вот наш текст со <a name=”#text1”>ссылкой на текст №1</a>.</p>

Выглядеть она будет, как обычная гиперссылка. Но при нажатии перенесет читателя к той части текста, которая была нами отмечена, как id=”text1”.

В примере с картинками код, окружающий картинку, выглядит так:

<a href=”#top”><img scr=»http;//site.ru/…/…/arrow_up.png» /></a>

То есть, вместо атрибута id стоит href.

Как сослаться на фрагмент другой страницы?

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

Но мы способны облегчить задачу, которую сами ставим перед посетителем. Он будет благодарен. А сделать это – легко. Прописываем обычную гиперссылку:

<p>Вот наш текст <a href= “http://site.ru/post/#text1” title=”” target=”_blank” >со ссылкой на фрагмент другого поста</a>.</p>

Найди 10 отличий!))) Мы подписали название анкора к адресу ссылки. Не забываем предварять эту метку знаком # — именно в ссылке.

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

И, вуаля! Теперь читатели непринужденно серфят по нашему блогу – им удобно, им приятно, им совершенно не хочется куда-то уходить…

А что еще нужно блоггеру?! — Ну, разве, чтобы вы делились его постом в социальных сетях и комментировали его!