Урок 13 · HTML

Ссылки на разделы этой же страницы

Длинный урок удобно начать с оглавления. Ссылка с решёткой прокручивает страницу к элементу с тем же id.

Почему это следующий шаг

Символы и списки уже не мешают. Теперь страница может быть длиннее одного экрана, и по ней нужно ходить.

Как сделать

У цели должен быть уникальный id из латинских букв, цифр и дефиса. Ссылка href="#zadacha" ведёт на элемент id="zadacha". Id не повторяют. Не ставь id на каждый абзац: только на разделы, к которым есть зачем прыгать. Ссылка «к началу» может вести на id у h1.

<nav>
  <a href="#steps">К шагам</a>
</nav>
<h2 id="steps">Шаги</h2>
<p><a href="#top">Наверх</a></p>

Что проверить

• Оглавление прокручивает именно к заголовку, а не к началу сайта.
• Двух одинаковых id на странице нет.
• Адрес в строке после клика заканчивается на #имя.