HTML с нуля: ссылка-якорь в HTML. Урок №7

Продолжаем углубляться в основы HTML. Сегодня поговорим о работе с якорями в HTML. Не переживайте, речь пойдет не о морских приключениях! В этом уроке вы узнаете, что такое HTML-якоря, как создавать ссылки на них на одной странице и как переходить к якорям на других страницах. 🚀

Это важный элемент HTML, который пригодится для создания структурированных веб-страниц или лендингов.

Что такое ссылка-якорь в HTML?

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

Часто якоря применяются для:

• Навигации внутри лендингов (одностраничных сайтов).
• Быстрого перехода к нужным разделам статьи (например, как в Википедии).

Пример ссылки-якоря

Вот простой пример:

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

<h2 id="section1">Раздел 1</h2>
<p>Текст первого раздела...</p>

При клике на ссылку вы сразу попадёте в раздел с ID section1.

Как создать якорь на одной странице

Чтобы создать якорь, добавьте атрибут id к элементу, который будет служить меткой:

<a id="myAnchor">Текст или заголовок</a>

Теперь создадим ссылку на этот якорь:

<a href="#myAnchor">Перейти к тексту</a>

⚠️ Важно: имя якоря (id) должно быть на английском языке и уникальным на странице.

Как создать ссылку на якорь на другой странице

Для перехода на другую страницу к определенному разделу используйте формат:

<a href="page.html#myAnchor">Перейти к разделу на другой странице</a>

На целевой странице создайте якорь с соответствующим id:

<a id="myAnchor">Целевой текст</a>

Практический пример:

index.html

<p>Читать <a href="about.html#author">о авторе</a></p>

about.html

<h2 id="author">Об авторе</h2>
<p>Этот сайт создан для тех, кто изучает HTML с нуля!</p>

Совет: Якоря — незаменимы для улучшения пользовательского опыта. Теперь вы сможете легко структурировать контент и упрощать навигацию для посетителей.

Подписывайтесь на обновления блога Overcod, чтобы узнать больше о HTML! 😊