Пошук уроків, статей та іншого контенту
Дізнаєтеся, як створювати посилання, налаштовувати їхні адреси, цілі відкриття та переходи всередині сторінки.
Посилання, або гіперпосилання, дає змогу перейти:
на іншу вебсторінку;
на інший сайт;
до певного місця поточної сторінки;
до файлу, електронної пошти або телефонного номера.
Посилання створюють за допомогою парного HTML-елемента <a>:
<a href="https://example.com">Відкрити сайт</a>Текст між відкривальним і закривальним тегами називають текстом посилання. Саме його зазвичай бачить і натискає користувач.
hrefАтрибут href містить адресу, за якою потрібно перейти:
<a href="https://developer.mozilla.org/">Документація MDN</a>Без href елемент <a> не має адреси переходу:
<a>Це неактивний текст</a>Абсолютна адреса містить повну адресу ресурсу разом із протоколом:
<a href="https://example.com/about">Про компанію</a>Такі адреси використовують для переходів на інші сайти або коли потрібна повна адреса сторінки.
Відносна адреса вказує шлях до файлу відносно поточного HTML-файлу.
Наприклад, якщо файли мають таку структуру:
project/
├── index.html
├── about.html
└── pages/
└── contacts.htmlПосилання з index.html на about.html:
<a href="about.html">Про нас</a>Посилання з index.html на contacts.html:
<a href="pages/contacts.html">Контакти</a>Щоб перейти з файлу в папці pages до файлу в батьківській папці, використовують ..:
<a href="../index.html">На головну</a>Крапка . означає поточну папку, а дві крапки .. — батьківську папку.
За замовчуванням сторінка відкривається в поточній вкладці браузера. Змінити місце відкриття можна за допомогою атрибута target.
Це поведінка за замовчуванням:
<a href="about.html">Про нас</a>Її можна записати явно за допомогою значення _self:
<a href="about.html" target="_self">Про нас</a>Значення _blank відкриває адресу в новій вкладці:
<a href="https://example.com" target="_blank">Відкрити сайт</a>Для посилань із target="_blank" зазвичай також додають:
<a
href="https://example.com"
target="_blank"
rel="noopener noreferrer"
>
Відкрити сайт у новій вкладці
</a>Атрибут rel="noopener noreferrer" допомагає не передавати новій сторінці доступ до об’єкта попередньої сторінки та не передавати їй інформацію про джерело переходу.
Інші значення target:
_parent — відкриває сторінку в батьківському контексті;
_top — відкриває сторінку в найвищому контексті.
Для звичайних сторінок найчастіше використовують _self або _blank.
Посилання може переміщати користувача до певного елемента на цій самій сторінці.
Для цього:
потрібному елементу задають унікальний атрибут id;
у href записують символ # і значення цього id.
<a href="#contacts">Перейти до контактів</a>
<h2 id="contacts">Контакти</h2>Після натискання браузер прокрутить сторінку до заголовка з id="contacts".
Значення id має бути унікальним у межах сторінки:
<section id="about">
<h2>Про нас</h2>
</section>
<section id="services">
<h2>Послуги</h2>
</section>
<nav>
<a href="#about">Про нас</a>
<a href="#services">Послуги</a>
</nav>Щоб повернутися на початок сторінки, можна додати id до верхнього елемента:
<body id="top">
<a href="#top">На початок</a>
</body>Або використати посилання з href="#":
<a href="#">На початок</a>Варіант із власним id є зрозумілішим і дає змогу явно визначити ціль переходу.
За допомогою спеціальних схем можна створити посилання для надсилання електронного листа або здійснення дзвінка.
Посилання на електронну пошту:
<a href="mailto:hello@example.com">
Написати нам
</a>Посилання на телефон:
<a href="tel:+380441234567">
+38 (044) 123-45-67
</a>На комп’ютері посилання mailto: відкриває налаштований поштовий клієнт, а tel: може відкрити програму для дзвінків. На мобільних пристроях tel: зазвичай пропонує зателефонувати за вказаним номером.
Браузер має стандартні стилі для посилань: зазвичай синій колір і підкреслення. Їх можна змінити за допомогою CSS.
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Стилізація посилань</title>
<style>
a {
color: #1769aa;
text-decoration: none;
}
a:hover {
color: #0d47a1;
text-decoration: underline;
}
a:visited {
color: #6a1b9a;
}
a:focus {
outline: 3px solid #ffb300;
outline-offset: 2px;
}
</style>
</head>
<body>
<h1>Навігація</h1>
<nav>
<a href="#about">Про нас</a>
<a href="#contacts">Контакти</a>
</nav>
<main>
<section id="about">
<h2>Про нас</h2>
<p>Ми створюємо навчальні матеріали для розробників.</p>
</section>
<section id="contacts">
<h2>Контакти</h2>
<p>
<a href="mailto:hello@example.com">Написати електронного листа</a>
</p>
<p>
<a href="tel:+380441234567">Зателефонувати</a>
</p>
</section>
</main>
</body>
</html>Для різних станів посилання можна використовувати псевдокласи:
:link — ще не відвідане посилання;
:visited — уже відвідане посилання;
:hover — курсор наведено на посилання;
:focus — посилання отримало фокус, наприклад після переходу клавішею Tab;
:active — момент натискання на посилання.
Приклад:
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
a:active {
color: orange;
}Стан :focus важливо стилізувати так, щоб посилання залишалося помітним під час навігації клавіатурою.
Для плавного переходу до елемента з певним id можна додати CSS-властивість scroll-behavior:
html {
scroll-behavior: smooth;
}Тоді перехід за посиланням виду href="#contacts" відбуватиметься плавно:
<a href="#contacts">Перейти до контактів</a>
<section id="contacts">
<h2>Контакти</h2>
</section>Ця властивість змінює лише спосіб прокручування, але не сам принцип роботи внутрішнього посилання.
Текст посилання має пояснювати, куди воно веде:
<a href="about.html">Дізнатися більше про компанію</a>Невдалий варіант:
<a href="about.html">Натисніть тут</a>Фраза «Натисніть тут» не повідомляє користувачу, що станеться після переходу. Описовий текст також допомагає користувачам, які переглядають список посилань за допомогою допоміжних технологій.
Не варто використовувати звичайний <div> замість <a> для переходу:
<div onclick="location.href='about.html'">Про нас</div>Елемент <a> уже має правильну семантику, підтримує клавіатурну навігацію та взаємодіє з браузером як посилання.
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Сторінка проєкту</title>
<style>
html {
scroll-behavior: smooth;
}
body {
max-width: 800px;
margin: 0 auto;
padding: 24px;
font-family: Arial, sans-serif;
line-height: 1.6;
}
nav {
display: flex;
gap: 16px;
margin-bottom: 40px;
}
a {
color: #1565c0;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:focus {
outline: 2px solid #ff9800;
outline-offset: 3px;
}
section {
min-height: 300px;
padding: 24px 0;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body id="top">
<header>
<h1>Мій навчальний проєкт</h1>
<nav aria-label="Основна навігація">
<a href="#about">Про проєкт</a>
<a href="#contacts">Контакти</a>
<a
href="https://example.com"
target="_blank"
rel="noopener noreferrer"
>
Інший сайт
</a>
</nav>
</header>
<main>
<section id="about">
<h2>Про проєкт</h2>
<p>
Це приклад сторінки з різними видами посилань.
</p>
<a href="#contacts">Перейти до контактів</a>
</section>
<section id="contacts">
<h2>Контакти</h2>
<p>
<a href="mailto:hello@example.com">
hello@example.com
</a>
</p>
<p>
<a href="tel:+380441234567">
+38 (044) 123-45-67
</a>
</p>
<p>
<a href="#top">Повернутися на початок</a>
</p>
</section>
</main>
</body>
</html>У цьому прикладі використано:
абсолютну адресу зовнішнього сайту;
відкриття зовнішнього сайту в новій вкладці;
переходи до секцій поточної сторінки;
посилання для електронної пошти;
посилання для телефонного номера;
CSS-стилі для різних станів посилання.
href<a>Про нас</a>Такий елемент не має адреси переходу. Потрібно додати href:
<a href="about.html">Про нас</a>Якщо файл розташований у папці pages, потрібно вказати цю папку:
<a href="pages/contacts.html">Контакти</a>id і href не збігаються<a href="#contacts">Контакти</a>
<section id="contact">
<h2>Контакти</h2>
</section>У цьому випадку перехід не знайде потрібний елемент. Значення мають збігатися:
<a href="#contacts">Контакти</a>
<section id="contacts">
<h2>Контакти</h2>
</section>id<section id="about">...</section>
<section id="about">...</section>На сторінці кожне значення id має використовуватися лише один раз.
# замість реальної адреси<a href="#">Про нас</a>Таке посилання не веде на сторінку «Про нас». Воно лише змінює позицію переходу в межах поточного документа. Для справжнього переходу потрібно вказати правильний шлях:
<a href="about.html">Про нас</a><a href="report.pdf">Читати тут</a>Краще описати призначення посилання:
<a href="report.pdf">Переглянути звіт у форматі PDF</a>Посилання створюють елементом <a>.
Атрибут href визначає адресу переходу.
Абсолютні адреси містять повний URL, а відносні — шлях до файлу в проєкті.
Атрибут target="_blank" відкриває посилання в новій вкладці.
Для переходу всередині сторінки використовують href="#ідентифікатор" і відповідний id.
Схеми mailto: і tel: створюють посилання для електронної пошти та телефону.
CSS-псевдокласи дають змогу стилізувати різні стани посилань.
Текст посилання має зрозуміло описувати його призначення.