Возможно, скоро появится элемент SUBLINE или SUBHEAD, который будет наиболее подходящим:
http://www.techrepublic.com/blog/web-designer/html5-hgroup-is-dead-what-you-need-to-know/
Пока она не станет доступной, у нас остается попытка сделать H2 (или какой-либо другой элемент H x ) или P или Q действующими в качестве подлиний / подзаголовков. / субтитры и т. д. Когда это станет доступным, структура контента, предложенного в оригинальном посте, я полагаю, будет следующей (давайте предположим, что элемент SUBHEAD является тем, чем он в конечном итоге является):
<h1>A BLOG TITLE
<subhead>the best blog in the world</subhead>
</h1>
<h2>post_title1</h2>
<h2>post_title2</h2>
<h2>post_title3</h2>
Хотя я бы предпочел, чтобы это было:
<h1>A BLOG TITLE</h1>
<subhead>the best blog in the world</subhead>
<h2>post_title1</h2>
<h2>post_title2</h2>
<h2>post_title3</h2>
Тот простой факт, что конкретный элемент SUBHEAD следует за конкретным элементом H x в моем уме, семантически соединяет эти два элемента вместе, как H2 (как последующий брат, а не как ребенок или другой такой потомок) после H1 связывает эти два элемента.
В мире, где подавляющее большинство веб-разработчиков требуют, чтобы каждый элемент H x на их странице был разрешен как H1, OP здесь получает некоторую оценку за то, что он заинтересован в правильном структура заголовка и даже выход за его пределы и признание того, что субтитры не совпадают с заголовками.
Так как я не могу показать здесь обработанный код, Codepen в http://codepen.io/WebDevCA/pen/wzyIH показывает тест элемента SUBHEAD и показывает, что, на мой взгляд, его предпочтительное расположение в DOM - это сразу последующий селектор родного элемента к связанному элементу H x , а не как дочерний элемент внутри элемента H x .