Навигация по статье или как сделать содержание с якорной ссылкой

Как сделать содержание в статье на сайте или блоге и улучшить навигацию

Современное оформление статьи на сайте, это не просто расставление стилистических тегов и добавление картинок, но и правильная и понятная навигация. Поэтому, к вопросу о том как сделать содержание в статье, нужно подойти серьезно.

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

Создание содержания в статье на сайте

Красиво оформленное содержание или оглавление статьи на сайте либо блоге, несет в себе сразу две важные вещи:

  1. Улучшается навигация по статье. Читатель понимает что где находится и, уже на этапе изучения содержания, знает какой именно раздел его интересует.
  2. Улучшаются SEO показатели. Материалы с оглавлением котируется гораздо выше, чем без них.

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

Как сделать якорную ссылку HTML тегами

Существует два элемента:

  1. Якорь. Помечается место в документе, куда будем ссылаться.
  2. Якорная ссылка. Ссылка, указывающая на якорь.

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

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

<h3 id="soderzhanie-v-state-na-sajte-1-1">Как сделать якорную ссылку HTML тегами</h3>

Тем самым, мы пометили заголовок «Как сделать якорную ссылку HTML тегами» идентификатором «id=»soderzhanie-v-state-na-sajte-1-1″».

После этого, устанавливаем якорную ссылку. Она добавляется при помощи тега «а» с хештегом в атрибуте «href».

<a href="#soderzhanie-v-state-na-sajte-1-1">Как сделать якорную ссылку HTML тегами</a>

В результате, получаем ссылку в статье на интересующий блок.

Кроме того, якорная ссылка может содержать в себе не только адрес текущей статьи, но и адрес другой web-страницы. К примеру:

<a href="https://wamotvet.ru/webmaster/soderzhanie-v-state-na-sajte.html#soderzhanie-v-state-na-sajte-1-1">Как сделать якорную ссылку HTML тегами</a>

То есть, при помощи HTML, мы указали, что хотим перейти на страницу «https://wamotvet.ru/webmaster/soderzhanie-v-state-na-sajte.html» к «якорю soderzhanie-v-state-na-sajte-1-1».

Надеюсь с этим все понятно, потому что буду переходить дальше, к теме статьи. Если остались вопросы, либо перечитайте материал, либо задайте свой вопрос в комментариях.

Пример HTML и CSS кода для создания навигации по статье

Переходим к теме материала, а именно будем создавать содержание в статье нашего сайта.

Долго думал как интереснее написать этот раздел и не придумал ничего лучше, как просто показать то, что делаю я.

Перед написанием любой статьи, сразу составляю содержание. В моем случае, содержания бывают как одноуровневые, так и многоуровневые. Здесь нужно смотреть на такие пункты как:

  • информаю которую хочешь рассказать;
  • последовательность раскрываемого материала.

К примеру для этой статьи, мое содержание (оглавление) выглядит так:

<ul>
<li>Создание содержания статьи на сайте:
<ul>
<li>Как сделать якорную ссылку HTML тегами;</li>
<li>Пример HTML и CSS кода для создания содержания.</li>
</ul>
</li>
<li>Оглавление с плавной прокруткой страницы.</li>
</ul>

Далее, создаю копию этих же пунктов и переделываю их в заголовки <H2> и <H3>.

<h2>Создание содержания статьи на сайте</h2>
<h3>Как сделать якорную ссылку HTML тегами</h3>
<h3>Пример HTML и CSS кода для создания содержания</h3>
<h2>Оглавление с плавной прокруткой страницы</h2>

После этого, мне остается разметить код на якоря и якорные ссылки:

Навигация по статье сайта при помощи якорных ссылок

Кстати, я не добавляю теги вручную, это было бы очень долго. Ускорить работу поможет добавление нужных кнопок в текстовый редактор WordPress. Детально, процесс описывался здесь.

Вот, в принципе, и все. Содержание в статье создано, якоря расставлены, ссылки присутствуют. Осталось наполнить материал контентом и опубликовать для читателей.

Оглавление с плавной прокруткой страницы

Считаю что тема: «Как сделать содержание в статье на сайте или блоге» раскрыта в полной мере. И все же, не хотелось бы на этом останавливаться, а дать читателю нечто большее.

Как уже говорилось выше, навигация по статье сайта, это не просто красиво, но еще и эффективно. При помощи небольших манипуляций, вебмастер может постараться увеличить время пребывания посетителя на своем сайте.

Увеличение времени посещения сайта посетителем, благоприятно сказывается на поведенческих факторах. Что в будущем, приводит к лояльности со стороны поисковых систем.

Прокрутку от якорной ссылки к якорю, можно сделать не молниеносной, а плавной. На этом вебмастер выиграет доли секунд, но этого может хватить для поисковиков. Да и сам посетитель будет приятно удивлен анимацией на сайте.

Добавьте javascript в код сайта, либо вызовите его при помощи <link> из другого файла.

var linkNav = document.querySelectorAll('[href^="#"]'),
V = 2; // скорость, может иметь дробное значение через точку
for (var i = 0; i < linkNav.length; i++) {
linkNav[i].addEventListener('click', function(e) {
e.preventDefault();
var w = window.pageYOffset, // прокрутка
hash = this.href.replace(/[^#]*(.*)/, '$1'); // id элемента, к которому нужно перейти
t = document.querySelector(hash).getBoundingClientRect().top, // отступ от окна браузера до id
start = null;
requestAnimationFrame(step); // подробнее про функцию анимации [developer.mozilla.org]
function step(time) {
if (start === null) start = time;
var progress = time - start,
r = (t < 0 ? Math.max(w - progress/V, w + t) : Math.min(w + progress/V, w + t));
window.scrollTo(0,r);
if (r != w + t) {
requestAnimationFrame(step)
} else {
location.hash = hash // URL с хэшем
}
}
}, false);
}

После этого, навигация по статье сайта будет плавной. Пример реализации, можно посмотреть здесь: https://jsfiddle.net/Kilnart/37wyce01/1/.

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

Изучаете HTML и CSS? Пройдите курс от профессионального программиста!
Добавить комментарий