time, address, abbr

<time>, <address> и <abbr> — семантические inline-элементы для разметки дат/времени, контактных данных и аббревиатур соответственно.

Зачем нужно

Эти элементы придают смысл контенту, который без семантики выглядит как обычный текст. <time> позволяет браузерам и поисковикам понять машиночитаемую дату; <address> указывает контактный блок владельца документа или статьи; <abbr> расшифровывает аббревиатуру при наведении и для screen readers. Все три улучшают SEO и a11y.

Где используется

  • <time> — даты публикации, события, дедлайны в статьях и карточках
  • <address> — подвалы сайтов, страницы «Контакты», блоки автора
  • <abbr> — техническая документация, юридические тексты, статьи с терминологией

Элемент <time>

Атрибут datetime содержит машиночитаемый формат даты (ISO 8601):

<!-- Дата публикации статьи -->
<article>
  <h2>Новые возможности CSS 2026</h2>
  <p>Опубликовано: <time datetime="2026-04-10">10 апреля 2026</time></p>
</article>

<!-- Дата и время -->
<time datetime="2026-04-10T09:30:00+03:00">10 апреля 2026, 09:30 МСК</time>

<!-- Только год -->
<time datetime="2026">в 2026 году</time>

<!-- Продолжительность -->
<time datetime="PT2H30M">2 часа 30 минут</time>

<!-- Событие с датой -->
<p>Вебинар состоится <time datetime="2026-05-01">1 мая</time>.</p>

Элемент <address>

Семантически означает контактную информацию для ближайшего <article> или <body>:

<!-- В подвале — контакты сайта -->
<footer>
  <address>
    <p>ООО «Пример»</p>
    <p><a href="mailto:info@example.com">info@example.com</a></p>
    <p><a href="tel:+74951234567">+7 (495) 123-45-67</a></p>
    <p>Москва, ул. Примерная, д. 1</p>
  </address>
</footer>

<!-- В статье — контакты автора -->
<article>
  <h1>Введение в HTML</h1>
  <address>
    Автор: <a href="mailto:author@example.com">Иван Иванов</a>
  </address>
  <p>Текст статьи...</p>
</article>

<address> не предназначен для произвольных почтовых адресов в тексте.

Элемент <abbr>

Атрибут title содержит расшифровку:

<!-- Базовое использование -->
<p>
  Используем <abbr title="Cascading Style Sheets">CSS</abbr>
  для оформления и <abbr title="HyperText Markup Language">HTML</abbr>
  для структуры.
</p>

<!-- Первое упоминание аббревиатуры в тексте — расшифровать -->
<p>
  <abbr title="Application Programming Interface">API</abbr> возвращает JSON.
  Последующие упоминания API можно не расшифровывать.
</p>

По умолчанию большинство браузеров показывают title при наведении курсора.

Частые ошибки

Ошибка Почему плохо Как правильно
<time> без datetime Нет машиночитаемого значения Всегда добавляй datetime с ISO-форматом
<address> для любых адресов в тексте Не соответствует семантике элемента Только для контактов автора/организации
<abbr> без title Расшифровка недоступна Всегда указывай title
<b> вместо <abbr> Нет семантики Используй <abbr> для аббревиатур

Связанные темы

Ресурсы