Ссылки внутри страницы html для создания оглавления на сайте

Если на странице сайта размещена объемная статья, то для удобства пользователей ее можно разбить на разделы, составив оглавление со ссылками, которые будут быстро перемещать вас на нужный фрагмент текста. Этот прием html получил название "ссылки внутри страницы". С их помощью вы будете осуществлять переходы по странице, пролистывая ненужные части текста.

Суть создания внутренних ссылок заключается в создании якорей, которым мы даем произвольное название cо знаком # (например, как в примере #section1, #section2, #section3 и т.д.), которые ссылаются на элементы страницы.

В этом случае идентификатор «section1» может быть присвоен любой части или разделу веб-страницы. Ссылка будет указывать на раздел с идентификатором section1.  Атрибут href знает, что «section1» — это не обычная ссылка, а идентификатор, так как в её начале указан символ «#». Очевидно, что вебмастер не должен использовать имена классов в атрибуте href, поскольку атрибут href их не понимает.
Пример содержания (ссылки на отрывки текста):

<a href="#section1">Пункт 1 оглавления</a>
<a href="#section2">Пункт 2 оглавления</a>
<a href="#section3">Пункт 3</a>

В тексте присутствуют отрывки, на которые ссылаются пункты оглавления. Пример:

<p id="section1">Отрезок текста, на который ссылается пункт 1 оглавления</p>, или <h3 id="section1">Отрезок текста, на который ссылается пункт 1 оглавления</h3> (в том случае если ссылаетесь на подзаголовки поста).

Некоторый отрезок текста статьи...

<div id="razdel2">Отрезок текста, на который ссылается пункт 1 оглавления</p>

продолжение основного текста статьи. Можно оформить в виде ссылки:

<a name="heading3">Отрезок текста, на который ссылается пункт 1 оглавления</a>

некоторый текст статьи...
Ссылок внутри страницы может быть сколько угодно. Вы можете прописать в эти ссылки атрибут title – всплывающая подсказка,  target=" blank" – открывать в новом окне. Это будет выглядеть следующим образом:

<a href="#heading1" target=" blank" title=”всплывающая подсказка” >Пункт 1 оглавления</a>

Частным случаем использования внутренних ссылок является создание простой кнопку "Наверх". Код кнопки html имеет вид:

<a href="#top">Наверх</a>

В верхней части сайта в теге <body> задается блок html, на который ссылается кнопка "Наверх":

 <p><a name="top"></a></p> 

Общая схема создания ссылок для навигации

Подведем итог статьи в виде общего кода для навигации ссылками внутри одной статьи на сайте. Общий код html с относительными ссылками будет выглядеть так:

<h1>Название статьи</h1>
<h2>Оглавление</h2>
<a href="#punkt1">Раздел 1</a> <!--создаём якорь, указав #id элемента-->
<a href="#punkt2">Раздел 2</a>
<a href="#punkt3">Раздел 3 3</a>
<a href="#punkt4">Раздел 4</a>
<p id="punkt1">Первый абзац раздела 1</p> <!--добавляем соответствующий id элементу-->
<p id="punkt2">...</p>
<p id="punkt3">...</p>
<p id="punkt4">...</p>

Для тех, кто привык воспринимать информацию в графическом виде приготовила инфографику:

ссылки внутри страницы
2 ответа к «Ссылки внутри страницы html для создания оглавления на сайте»

Добавить комментарий

Ваш адрес email не будет опубликован.