asd asdsa f
Разное

Как сделать навигацию по отдельно взятой статье?

Наверняка вы не раз видели на некоторых страницах в интернете маленькое меню в начале статьи для более удобной навигации по материалу. Пример такого меню можно посмотреть на странице про создание логотипа (в жёлтом блоке). Может быть моя менюшка сделана не особо красиво, однако вам никто не мешает с помощью CaSS придать ей любой вид. Самое широкое распространение этот приём получил в Википедии, там каждая статья имеет подобную навигацию.

navicia

Навигация в Википедии

Поисковые системы отлично относятся к хорошо структурированным материалам. Давно замечено, что наличие подобной навигации по статье даёт дополнительные плюсы при ранжировании документа. Как правило, подобным приёмом пользуются в достаточно объёмных статьях с несколькими подзаголовками. Ссылки из такого мини-меню указывают на эти подзаголовки и позволяют перемещаться по странице.

В коде это реализуется с помощью так называемых якорей (закладок). Тут всё очень просто. К примеру у нас есть статья с подзаголовками:

  • подзаголовок 1
  • подзаголовок 2
  • подзаголовок 3

Сначала делаем само меню. Для этого просто прописываем ссылки на подзаголовки такого вида:
<a href=»#name1″>подзаголовок 1</a>

<a href=»#name2″>подзаголовок 2</a>
<a href=»#name3″>подзаголовок 3</a>

Подзаголовок 1,2,3 — это анкоры ссылок, которые будут видны пользователям.

Теперь нам нужно установить в статье якоря (name1, name2, name3), куда эти ссылки будут вести. Допустим у нас подзаголовки обёрнуты в H3:
<h3>подзаголовок 1</h3>
………..
<h3>подзаголовок 2</h3>
………..
<h3>подзаголовок 3</h3>
………..
Дописываем подзаголовкам метки (якоря), то есть добавляем id=»name…» указанные в меню.
<h3 id=»name1″>подзаголовок 1</h3>
……….
<h3 id=»name2″>подзаголовок 2</h3>
……….
<h3 id=»name3″>подзаголовок 3</h3>
Теперь каждая ссылка из меню будет вести туда, где указан её якорь (name1, name2, name3). Якоря можно добавлять в любое место статьи, не обязательно в подзаголовки. Названия якорей (name1, name2, name3) можно выбирать любые, главное, чтобы они совпадали с параметром name=»#…» указанным в ссылках нашего меню.

About the author / 

Adam