Пошук уроків, статей та іншого контенту
Вчить семантично оформлювати контактну інформацію автора або організації за допомогою address.
addressЕлемент <address> призначений для контактної інформації автора сторінки, документа або організації, яка відповідає за його вміст.
Контактна інформація може містити:
ім’я автора;
адресу електронної пошти;
номер телефону;
посилання на профіль автора;
поштову адресу організації;
інші способи зв’язку.
<address>
Автор: Олена Коваль<br>
Email: <a href="mailto:olena@example.com">olena@example.com</a><br>
Телефон: <a href="tel:+380441234567">+38 (044) 123-45-67</a>
</address>Браузер зазвичай відображає вміст <address> курсивом. Це лише стандартне стилістичне оформлення, а не головна особливість елемента. Семантика полягає в тому, що браузер, пошукові системи та допоміжні технології розуміють цей фрагмент як контактну інформацію.
Якщо контактна інформація стосується всього документа, <address> можна розмістити у <footer> сторінки.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Студія «Форма»</title>
<style>
body {
max-width: 760px;
margin: 0 auto;
padding: 32px;
font-family: Arial, sans-serif;
line-height: 1.6;
}
footer {
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid #ccc;
}
address {
font-style: normal;
}
address a {
color: #1558a6;
}
</style>
</head>
<body>
<header>
<h1>Студія «Форма»</h1>
</header>
<main>
<p>
Ми створюємо інтерфейси для вебзастосунків і допомагаємо командам
покращувати користувацький досвід.
</p>
</main>
<footer>
<address>
<strong>Студія «Форма»</strong><br>
Вулиця Хрещатик, 10, Київ, Україна<br>
Email:
<a href="mailto:hello@forma.example">hello@forma.example</a><br>
Телефон:
<a href="tel:+380441234567">+38 (044) 123-45-67</a>
</address>
</footer>
</body>
</html>У цьому прикладі <address> описує контакти організації, яка відповідає за весь сайт.
Елемент <address> також можна розмістити всередині <article>. У такому разі він описує автора або організацію, відповідальну саме за цю статтю.
<article>
<h1>Як працює каскадність CSS</h1>
<p>
Каскадність визначає, які стилі застосовуються до елемента,
якщо на нього впливають кілька CSS-правил.
</p>
<footer>
<address>
Автор:
<a href="/authors/iryna-melnyk">Ірина Мельник</a>,
<a href="mailto:iryna@example.com">iryna@example.com</a>
</address>
</footer>
</article>У цьому випадку контактна інформація пов’язана не з усією сторінкою, а з конкретним <article>.
addressУсередині <address> можна використовувати звичайний текст і HTML-елементи для форматування та створення посилань:
<address>
<strong>Команда підтримки</strong><br>
Email:
<a href="mailto:support@example.com">support@example.com</a><br>
Телефон:
<a href="tel:+380501112233">+38 (050) 111-22-33</a><br>
<a href="/contact">Форма зворотного зв’язку</a>
</address>Для перенесення рядків у простих контактних блоках часто використовують <br>. Якщо контактна інформація має складну структуру, її можна розмістити в окремих елементах:
<address>
<p><strong>ТОВ «Приклад»</strong></p>
<p>
Email:
<a href="mailto:info@example.com">info@example.com</a>
</p>
<p>
Телефон:
<a href="tel:+380931234567">+38 (093) 123-45-67</a>
</p>
</address>Вибір структури залежить від того, як потрібно оформити блок. Важливо, щоб уся інформація справді була контактною і стосувалася автора або відповідальної організації.
address і звичайною поштовою адресоюНазва елемента може створювати враження, що <address> призначений для будь-якої фізичної адреси. Насправді він має ширше, але конкретне значення: контактна інформація автора або відповідальної організації.
Поштова адреса компанії може бути частиною <address>:
<address>
ТОВ «Приклад»<br>
вул. Незалежності, 25<br>
Київ, 01001, Україна
</address>Але адреса доставки товару або адреса місця на карті не обов’язково повинна бути <address>:
<p>
Доставка здійснюється за адресою:
вул. Соборна, 15, Львів
</p>У цьому прикладі вказано адресу доставки, а не контакти автора чи організації. Тому звичайного текстового елемента достатньо.
addressСтандартний стиль браузера часто робить текст <address> курсивним. Якщо такий вигляд не відповідає дизайну, його можна змінити за допомогою CSS:
<footer class="site-footer">
<address>
<strong>Вебстудія «Код»</strong><br>
<a href="mailto:hello@code.example">hello@code.example</a><br>
<a href="tel:+380671234567">+38 (067) 123-45-67</a>
</address>
</footer>.site-footer {
padding: 24px;
background-color: #f1f5f9;
}
.site-footer address {
font-style: normal;
color: #334155;
}
.site-footer a {
color: #2563eb;
}Властивість font-style: normal прибирає курсив, але не змінює семантику елемента.
address і footerЕлементи <address> та <footer> мають різні ролі:
<footer> позначає нижню частину сторінки або окремого розділу;
<address> позначає контактну інформацію автора або організації.
Вони часто використовуються разом:
<footer>
<p>© 2025 Приклад</p>
<address>
<a href="mailto:info@example.com">info@example.com</a>
</address>
</footer>Однак <address> не зобов’язаний бути всередині <footer>. Він може розташовуватися в іншій частині документа, якщо це логічно відповідає структурі:
<main>
<h1>Сторінка автора</h1>
<address>
Автор: <a href="mailto:author@example.com">author@example.com</a>
</address>
</main>Контактні дані варто робити функціональними, коли це доречно:
mailto: відкриває поштовий клієнт;
tel: дає змогу зателефонувати з пристрою, який підтримує телефонні виклики.
<address>
Email:
<a href="mailto:team@example.com">team@example.com</a><br>
Телефон:
<a href="tel:+380441234567">+38 (044) 123-45-67</a>
</address>Текст посилання має бути зрозумілим без додаткового контексту. Уникайте загальних підписів на кшталт «натисніть тут», якщо поруч можна вказати призначення посилання.
address для будь-якого тексту з адресою<!-- Неправильно, якщо це лише адреса доставки -->
<address>
Доставити на вул. Лісову, 8
</address>Краще:
<p>Доставити на вул. Лісову, 8.</p><address> має описувати контакти автора або відповідальної сторони, а не будь-яку географічну адресу.
address замість контейнера для довільного тексту<!-- Неправильно -->
<address>
Ми працюємо щодня з 9:00 до 18:00.
</address>Години роботи самі по собі не є контактною інформацією. Їх краще оформити звичайним текстом:
<p>Ми працюємо щодня з 9:00 до 18:00.</p>Якщо години роботи подаються разом із контактами, вони можуть бути поруч із <address>, але не повинні автоматично потрапляти всередину нього.
<address> для візуального курсиву<!-- Неправильно з семантичного погляду -->
<address>Цей текст має бути курсивним</address>Для візуального оформлення використовуйте CSS:
<p class="italic-text">Цей текст має бути курсивним.</p>.italic-text {
font-style: italic;
}Якщо користувачеві потрібно написати або зателефонувати, звичайний текст менш зручний:
<!-- Менш зручно -->
<address>
Email: support@example.com
</address>Краще:
<address>
Email:
<a href="mailto:support@example.com">support@example.com</a>
</address>Створіть статтю з такими частинами:
заголовок статті;
короткий текст;
ім’я автора;
посилання на email автора;
footer сторінки з контактами організації;
CSS, який прибирає курсив стандартного оформлення <address>.
Приклад структури:
<article>
<h1>Основи семантичної розмітки</h1>
<p>
Семантичні HTML-елементи описують значення та роль частин документа.
</p>
<footer>
<address>
Автор:
<a href="mailto:author@example.com">author@example.com</a>
</address>
</footer>
</article><address> призначений для контактної інформації автора або відповідальної організації.
Контакти можуть містити email, телефон, ім’я автора, посилання та поштову адресу організації.
Для контактів усієї сторінки <address> часто розміщують у <footer>.
Усередині <article> цей елемент може описувати автора саме цієї статті.
<address> не слід використовувати для будь-якої поштової адреси, адреси доставки або довільного курсивного тексту.
Вигляд елемента можна змінити за допомогою CSS, не втрачаючи його семантики.