Как добавить якорные ссылки на сайте

Якорные ссылки являются важным элементом веб-страниц, позволяющим пользователям быстро перемещаться к определенным разделам контента. В этой статье мы рассмотрим, как создать и добавить якорные ссылки на веб-сайте. 😊

Станьте веб-разработчиком с нуля за 15 месяцев на курсе онлайн-университета Skypro. Преподаватели — практикующие эксперты из VK, «Альфа-Банка», Skyeng и других крупных компаний. В программе нет лишней теории, зато много практических заданий, а результаты курсовых можно положить в портфолио. Специалисты центра карьеры помогут с резюме, сопроводительными письмами и собеседованиями.

Что такое якорные ссылки?

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

Создание якоря в HTML

Для создания якоря в HTML используется атрибут id:

<h2 id="section1">Раздел 1</h2>

В этом примере мы создали якорь с идентификатором section1.

Курсы по программированию

Помогаем получить новую профессию с гарантией трудоустройства!

Подробнее

Создание якорной ссылки

Чтобы создать ссылку на якорь, используйте тег <a> с атрибутом href:

<a href="#section1">Перейти к разделу 1</a>

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

Пример использования якорных ссылок

Вот пример использования якорных ссылок на веб-странице:

<!-- Навигация -->
<nav>
  <a href="#section1">Раздел 1</a>
  <a href="#section2">Раздел 2</a>
  <a href="#section3">Раздел 3</a>
</nav>

<!-- Контент -->
<main>
  <h2 id="section1">Раздел 1</h2>
  <p>Текст раздела 1...</p>

  

  <h2 id="section2">Раздел 2</h2>
  <p>Текст раздела 2...</p>

  <h2 id="section3">Раздел 3</h2>
  <p>Текст раздела 3...</p>
</main>

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

На курсе Skypro «Веб-разработчик» освоите JavaScript, GitHub, Tilda, Postman, HTML, CSS и другие программы и инструменты, научитесь решать реальные задачи разработчика и работать в команде. Все учебные проекты можно положить в портфолио и устроиться на работу по новой специальности еще в процессе обучения.

Теперь вы знаете, как добавить якорные ссылки на ваш сайт. Удачи вам в изучении веб-разработки! 😃

Тест на профориентацию

За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии

Подробнее