Современное оформление статьи на сайте, это не просто расставление стилистических тегов и добавление картинок, но и правильная и понятная навигация. Поэтому, к вопросу о том как сделать содержание в статье, нужно подойти серьезно.
Ниже подготовил самое важное, что нужно знать по материалу. Так что, переходите к изучению материала и внедряйте в свои сайты и блоги.
Создание содержания в статье на сайте
Красиво оформленное содержание или оглавление статьи на сайте либо блоге, несет в себе сразу две важные вещи:
- Улучшается навигация по статье. Читатель понимает что где находится и, уже на этапе изучения содержания, знает какой именно раздел его интересует.
- Улучшаются SEO показатели. Материалы с оглавлением котируется гораздо выше, чем без них.
Навигация по сайту делается при помощи якорных ссылок. Поэтому, сначала разберемся как они работают и где применяются.
Как сделать якорную ссылку HTML тегами
Существует два элемента:
- Якорь. Помечается место в документе, куда будем ссылаться.
- Якорная ссылка. Ссылка, указывающая на якорь.
Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.
Исходя из этого, первое что нужно сделать для правильной навигации по сайту, разметить статью якорями. Делается это следующим образом, находим кусок текста (обычно это заголовки либо изображения) и добавляем код:
<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/.
На этом все. Из этого материала вы должны были понять как сделать содержание в статье сайта или блога и улучшить навигацию. Внедряйте знания в свои проекты и удачи вам. Остались вопросы, пишите в комментариях.