Html оглавление для страница

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Создание содержания статьи на сайте:
  • Как сделать якорную ссылку HTML тегами;
  • Пример HTML и CSS кода для создания содержания.

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

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

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

  

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

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

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

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

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

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

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

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

  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/.

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

  Источник

  Ссылки внутри страницы

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

  Элемент, на который требуется сделать ссылку, обозначается идентификатором, а адрес ссылки меняет свой вид на #id, как показано в примере 1.

  Пример 1. Ссылка на заголовок

  Результат данного примера показан на рис. 1. К каждому заголовку добавлен уникальный идентификатор через атрибут id , а сама ссылка имеет вид #id, где id — идентификатор элемента на который делается переход.

  

  Рис. 1. Ссылки на заголовки

  Как видите, по своему виду такие ссылки ничем не отличаются от ссылок на другой сайт. Но стоит открыть любую ссылку в примере, как браузер переместит фокус к заголовку, на который ведёт ссылка. При этом немного поменяется и адресная строка, в конец пути будет добавлено #t1 или подобное. Если нажать кнопку «Назад» в браузере, то мы вернёмся обратно к началу страницы и адресная строка примет исходный вид. Это позволяет передавать ссылки вида webref.ru/layout/#title, при открытии такой ссылки в браузере будет загружена страница и сделан переход к элементу с идентификатором title.

  Псевдокласс :target

  CSS позволяет управлять видом элемента, на который был сделан переход, с помощью псевдокласса :target , как показано в примере 2.

  Пример 2. Использование :target

  Теперь, если переходить по ссылкам оглавления, то заголовки будут менять свой цвет и фон (рис. 2).

  

  Рис. 2. Стиль заголовка при переходе

  Источник