HTML з нуля: посилання-якір у HTML. Урок №7

Продовжуємо глибоко занурюватися у світ основ HTML. Сьогодні поговоримо про те, як працювати з якорями у HTML. Не хвилюйтеся, ми тут не про морські пригоди! У цьому уроці ви дізнаєтеся, що таке HTML-якорі, як створювати посилання на них на одній сторінці та як переходити до якорів на інших сторінках. 🚀

Це один із важливих елементів HTML, який стане в пригоді під час створення структурованих веб-сторінок або односторінкових сайтів.

Що таке посилання-якір у HTML?

Якір — це спеціальна мітка, що слугує для швидкого переходу до певного місця на веб-сторінці. Уявіть собі зміст книги: кожен розділ пов’язаний з певною сторінкою — так само працює якоря у HTML.

Часто якорі використовуються для:

• Навігації в межах односторінкових сайтів (landing page).
• Швидкого переходу до конкретних розділів статті (наприклад, як у Вікіпедії).

Приклад посилання-якоря

Ось як виглядає простий приклад:

<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! 😊