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

Программист

Спасаем мир с помощью байкшед и perl-хаков.

Который я представляю следующим образом:

 <h1>The Programmer</h1>
<p><strong>Saving the world with bikesheds and perl hacks.</strong></p>
  

Однако, возможно, это более уместно:

 <h1>The Programmer</h1>
<p class="subtitle">Saving the world with bikesheds and perl hacks.</p>
  

Но поскольку, похоже, имеет смысл поместить subtitle класс в элемент, не было бы лучше:

 <h1>The Programmer</h1>
<h2>Saving the world with bikesheds and perl hacks.<h2>
  

Какой был бы более подходящим?

В HTML4 я бы, возможно, выбрал ваш второй подход, но изменил название класса на tagline, если вам не совсем удобно иметь класс subtitle в теге, не являющемся заголовком:

 <h1>The Programmer</h1>
<p class="tagline">Saving the world with bikesheds and perl hacks.</p>
  

В HTML5 вы могли бы использовать тег <section> , <header> и <hgroup> и обернуть версию <h1> и <h2> , получив что-то вроде:

 <section>
    <header>
        <hgroup>
            <h1>The Programmer</h1>
            <h2>Saving the world with bikesheds and perl hacks.<h2>
        </hgroup>
    </header>
    ...
</section>
  

(В качестве альтернативы вы могли бы использовать <article> тег вместо <section> тега — или любого другого разделяющего тега — из-за изменения способа, которым HTML5 обрабатывает структуру документа).

Ну, я думаю, что использование правильной разметки более уместно, если это заголовок (например, начало главы), который вы определенно должны использовать <h2> . Если это просто способ подчеркнуть контент, я думаю, лучше использовать класс CSS, чтобы вы объяснили, что это такое.

Если вы используете html 5, вы можете быть заинтересованы в теге <header >, как в этом примере:

 <header>
    <h1>The most important heading on this page</h1>
    <p>With some supplementary information</p>
</header>

<article>
<header>
    <h1>Title of this article</h1>
    <p>By Richard Clark</p>
</header>
    <p>...Lorem Ipsum dolor set amet...</p>
</article>
  

здесь и здесь приведена краткая информация о теге header в html5.

Вы также можете прочитать эту главу «Погружение в html5» для получения более полной справки (прочитайте всю книгу, пока вы за ней, это хорошо!)

Иногда такие «субтитры» представляют собой скорее тизер или краткое описание (но в вашем случае это действительно похоже на подзаголовок); если вы считаете, что это часть заголовка, вы можете вставить его в <h1> тег и выполнить специальное форматирование. Это просто вопрос семантики: если вы считаете, что это скорее часть заголовка или больше часть тела, или ни то, ни другое.

Я бы сказал, что мое предложение было бы более подходящим семантически и для программ чтения с экрана в данном конкретном случае. Но второй вариант тоже работает хорошо, если предположить, что это не слишком объемные описания.

Первый выглядит хорошо. второй подход тоже хорош, но для этого вам нужно написать класс css.