Тег <address>

Тег <address> (укр. — “адреса”) в HTML використовується для позначення контактної інформації, яка відноситься до найближчого батьківського елемента (зазвичай — автора статті, сайту, документа тощо). Контент всередині тега <address> зазвичай відображається курсивом браузером за замовчуванням.

Тег не призначений виключно для фізичних адрес — сюди можуть входити:

  • ім’я автора;
  • email;
  • телефон;
  • URL сайту;
  • фізична адреса;
  • інші контактні дані.

Атрибути

Специфічні атрибути

Тег <address> не має специфічних (унікальних) атрибутів.

Глобальні атрибути

Тег <address> підтримує всі глобальні атрибути HTML:

  • id — унікальний ідентифікатор. Наприклад:
<address id="site-author">
    Автор: Іван Іванович
</address>
  • class — для CSS-стилізації. Наприклад:
<address class="contact-info">
    Email: [email protected]
</address>
  • style — для інлайн-стилів. Наприклад:
<address style="color: gray;">
    Телефон: +380123456789
</address>
  • title — підказка при наведенні. Наприклад:
<address title="Контактні дані">
    Email: [email protected]
</address>
  • lang — вказує мову вмісту. Наприклад:
<address lang="uk">
    Україна, Київ
</address>

Приклад використання

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання address</title>
    <style>
        address {
            font-style: normal;
            color: darkblue;
            margin-top: 20px;
            padding: 10px;
            border-top: 1px solid #ccc;
        }
    </style>
</head>
<body>

<h2>Контактна інформація сайту:</h2>

<address>
    ТОВ "Приклад"<br>
    вул. Хрещатик, 1<br>
    Київ, Україна<br>
    Тел.: +380 (44) 123-45-67<br>
    Email: <a href="mailto:[email protected]">[email protected]</a><br>
    Веб-сайт: <a href="https://example.com">example.com</a>
</address>

</body>
</html>

Додаткові моменти

  • Тег <address> не використовується для позначення поштових адрес у формі — для цього краще використовувати звичайну розмітку <p>, <div>, тощо.
  • Семантично вказує, що блок містить контактні дані.
  • Може бути використаний як для контактів всього сайту (в футері), так і для контактів автора статті чи окремої секції.
  • Підвищує доступність і машинне розпізнавання даних (SEO, мікророзмітка, парсинг контактів).
  • За замовчуванням більшість браузерів стилізують <address> курсивом — це можна змінювати через CSS.
  • Підтримується всіма сучасними браузерами.