Практика: заголовок статьи с компактными метаданными

Назначение

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

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

Используйте header внутри article и настоящий заголовок подходящего уровня. Дату обозначьте time с машинным datetime. Гибкая строка метаданных переносится целыми фрагментами, а текст заголовка остаётся обычным потоком.

Пример

<style>.article-top{max-width:44rem}.article-top h2{font-size:2rem;line-height:1.2;text-wrap:balance}.article-meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;color:#405d4b}.article-top p{line-height:1.6}</style>
<article><header class="article-top"><h2>Как проверить готовность учебного HTML-документа</h2><div class="article-meta"><span>Учебный пример</span><time datetime="2026-01-15">15 января 2026</time></div><p>Проверьте структуру, ссылки и поведение на узком экране.</p></header></article>

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

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

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

Не указывайте выдуманную дату обновления на рабочей статье ради свежести. Не делайте важные метаданные слишком мелкими и бледными. Уровень h2 здесь выбран для фрагмента: на отдельной странице статьи обычно нужен соответствующий главный заголовок.

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

Замените название вдвое более длинным и проверьте масштаб 200%. Убедитесь, что метаданные не накладываются друг на друга. Для реальной статьи подставьте достоверную дату и согласуйте её с видимым текстом.

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

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

• Раскладка Grid
• Иллюстрация с подписью
• Клавиатурная проверка