Список публикаций: дата и описание без нарушения порядка чтения

Назначение

Дата публикации помогает ориентироваться в списке материалов, но не должна заслонять заголовок. Семантическая разметка сохраняет понятность списка без декоративной сетки.

Как это работает

Внутри каждого пункта находятся название, элемент time и краткое описание. Datetime задаёт машинно-читаемую дату. Порядок HTML остаётся основным порядком чтения, даже если оформление изменится.

Пример

<style>.publication-list{padding-inline-start:1.5rem}.publication-list li{margin-block:1rem}.publication-list h3{margin:0}.publication-list time{display:block;margin-block:.25rem;color:#46594d}.publication-list p{margin:0}</style>
<ul class="publication-list"><li><h3><a href="#first-note">Первая учебная заметка</a></h3><time datetime="2026-08-31">31 августа 2026</time><p>Разбор небольшого примера и самостоятельное упражнение.</p></li></ul>
<h2 id="first-note">Учебная заметка</h2>

Что должно получиться

Дата видна человеку и описана в пригодном для обработки формате. Адрес в примере локальный, а дата иллюстративная: рабочий список должен получать реальные сведения о материалах.

Граница применения и частая ошибка

Не обновляйте дату публикации только ради ощущения свежести, если материал не менялся. Время публикации и время существенного обновления — разные сведения. Не переставляйте дату и заголовок CSS-порядком так, чтобы визуальная последовательность противоречила чтению.

Самостоятельная проверка

Добавьте несколько пунктов с разной длиной названий и проверьте список без CSS. Затем укажите отдельную подпись «Обновлено» для действительно исправленной статьи, не подменяя ею исходную дату без объяснения.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.

Связанные материалы

• Клавиатура
• Подписи
• Адаптивность