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

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

1. Итак - что это?

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

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

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

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

2. И зачем мне это нужно?

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


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

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

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


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

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



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

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

Чтобы создать и установить якорь на веб-странице, нужно вставить код якоря в код 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, 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.

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

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



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

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

Хотя визуально результат выглядит одинаково.
  • Юзабилити (1270)

  • Форма обратной связи (860)

    Рассмотрим самый простой вариант формы обратной связи. Как сделать форму обратной связи на HTML? Вот такую?Работу формы можно посмотреть на сайте www.titovsergei.ruЧестный ответ - никак, HTML - это язык разметки (т.е. можно сделать только "скелет" формы), а нам нужны действия с данными. Как минимум нужна связка HTML+PHP. Причем данная связка будет работать только...

  • Якорь html (560)

    Три основных вопроса:1. Что это?2. Зачем мне это нужно?3. Как это работает?1. Итак - что это?Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу. Ссылка с якорем содержит символ #, после которого идёт идентификатор.Переход пользователя по ссылке на якорь приводит...

  • Раздел "контакты" (550)

    Мы хотим получить от пользователя обратную связь.Можно использовать:1. Форму обратной связи на сайте2. Номер телефона для связи3. Адрес электронной почтыНадо исходить из того, что бы пользователю было как можно проще. В этом отношении идеальный вариант - форма обратной связи. Нужно только написать и нажать кнопку "Отправить". Для варианта телефон...

  • Хлебные крошки (391)

  • Глубина просмотра (287)

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

  • Заголовки и шрифты (273)

    Зачем нужно как-то выделять заголовки на web-странице? Просто выделение жирным шрифтом недостаточно для робота - он не поймет, что это. То ли что-то важное выделили, то ли это заголовок.Для заголовков используются тэги h1, h2, h3 и h4. На странице должен быть только один тэг h1, остальных тэгов...