HTML тег address - Изучение HTML

Тег <address> предоставляет контактную информацию об авторе или владельце документа или статьи. Он может содержать адрес электронной почты, номер телефона, почтовый адрес, ссылку на сайт автора, аккаунты в социальных сетях и т. д.

На этой странице объясняется семантическое значение <address>, правила его размещения, распространённые ошибки, которых следует избегать, и способы сочетания с <footer>.

Что на самом деле означает `<address>`

Самое важное: <address> — это не универсальный контейнер для любого почтового адреса. Он специально предназначен для разметки контактных данных:

ближайшего элемента-предка <article> — то есть автора этой статьи, либо
документа в целом, если ближайшим предком является элемент <body> — то есть владельца страницы.

Таким образом, область применения блока <address> зависит от того, где он размещён:

Внутри <body> (как правило, в <footer> страницы) → он относится к автору или владельцу всего документа.
Внутри <article> → он относится к автору этой статьи.

Опасно

Не используйте <address> для произвольного почтового адреса, который является просто частью содержимого страницы — например, адреса для корреспонденции внутри записи блога, местоположения площадки на странице мероприятий или адреса магазина в описании товара. Это не контактные данные автора документа или статьи, поэтому такой текст должен быть обычным (или обёрнутым в <p>). Некорректное использование <address> передаёт ложную информацию вспомогательным технологиям и поисковым системам.

Синтаксис

Тег <address> является парным. Содержимое размещается между открывающим (<address>) и закрывающим (</address>) тегами.

Большинство браузеров добавляют разрыв строки до и после элемента и отображают текст курсивом. Это оформление можно переопределить с помощью CSS.

Обратите внимание: внутри <address> не должно быть заголовков (<h1>–<h6>), элементов секционирования, таких как <article> или <section>, а также других элементов <address>, <header> или <footer>.

Контактная информация на уровне документа

Если контактная информация относится ко всей странице, разместите <address> внутри <body> — как правило, в подвале страницы:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <address>
      Author: W3docs team<br />
      <a href="mailto:[email protected]">Contact Author</a>
    </address>
  </body>
</html>

Попробуйте сами »

Автор статьи

Для разметки контактных данных автора отдельной статьи разместите <address> внутри элемента <article> этой статьи (как правило, в <footer> статьи). Это канонический, семантически корректный способ использования тега:

<!DOCTYPE html>
<html>
  <head>
    <title>Article author</title>
  </head>
  <body>
    <article>
      <h2>Understanding Semantic HTML</h2>
      <p>Semantic elements describe their meaning to both the browser and the developer...</p>
      <footer>
        <p>Posted on June 17, 2026.</p>
        <address>
          Written by Jane Doe.<br />
          Contact: <a href="mailto:[email protected]">[email protected]</a><br />
          <a href="https://example.com/jane">example.com/jane</a>
        </address>
      </footer>
    </article>
  </body>
</html>

Использование `<address>` в подвале страницы

Когда данные об авторе или владельце относятся ко всему сайту, можно включить <address> вместе с другой информацией в <footer> страницы. В данном случае адрес является контактной информацией для владельца сайта — именно для этого и предназначен <address>. Обычный почтовый адрес компании без контекста автора или владельца не должен размещаться в <address>:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .header{
        height: 40px;
        padding: 20px 20px 0;
        background: #e1e1e1;
      }
      .main-content{
        height: 60vh;
        padding: 20px;
      }
      footer{
        padding: 10px 20px;
        background: #666666;
        color: white;
      }
      a{
        color: #00aaff;
      }
    </style>
  </head>
  <body>
    <div class="header">Header / Menu</div>
    <div class="main-content">
      <h1>Main content</h1>
      <p>This is some paragraph. </p>
    </div>
    <footer style="display:flex; justify-content:space-between; align-items:flex-end;">
      <p style="margin:0;">Company © W3docs. All rights reserved.</p>
      <address>
        Contact us: <a href="mailto:[email protected]">[email protected]</a>
      </address>
    </footer>
  </body>
</html>

Атрибуты

Тег <address> не имеет собственных атрибутов. Он поддерживает только Глобальные атрибуты и Атрибуты событий.

Практика

Каково назначение HTML-тега <address>?

Он предоставляет контактную информацию об авторе или владельце документа либо ближайшей статьи.Он добавляет заголовок на веб-страницу.Это универсальный контейнер для любого почтового адреса, встречающегося в содержимом страницы.Он изменяет цвет фона веб-страницы.Он используется для размещения основного содержимого веб-страницы.

Что на самом деле означает <address>