Семантика заголовка с подзаголовками

Kevin Powell, известный по ютуб-каналу про CSS, задал в твиттере вопрос: как семантически разметить заголовок как на фото? Есть верхний текст, основной заголовок и нижний текст. Весь этот текст объединён в один смысловой блок. Так как же это лучше сверстать?

Так как текст связан, тут хорошо подойдёт роль group. Также вспоминаем первое правило ARIA: не использовать ARIA. Поэтому подбираем элемент с ролью group, который есть в HTML. И такой существует как раз для нашей задачи — <hgroup>:

<hgroup>
  <p>Plant parenting simplified</p>
  <h1>From wilted to wow: Plant care made easy</h1>
  <p>Tired of drooping leaves? Learn how to revive your plants and create a thriving indoor oasis.</p>
</hgroup>

<hgroup> в спецификации HTML.