I have a title and subtitle like so:

The Programmer

Saving the world with bikesheds and perl hacks.

Which I'm representing like this:

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

However perhaps this is mo开发者_StackOverflowre appropriate:

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

But since it seem to make sense to put a subtitle class on the element wouldn't this be better:

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

Which would be more appropriate?

In HTML4, I'd maybe go for your 2nd approach but change the class name to tagline if you're not quite comfortable having a class of subtitle on a non-heading tag:

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

In HTML5 you could use a <section>, <header> and <hgroup> tag and wrap the <h1> and <h2> version, giving you something like:

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

(Alternatively you could use an <article> tag instead of a <section> tag - or any other sectioning tag - due to the change in the way HTML5 works out the document outline).

Well i think it that using proper markup it's more appropriate, if it's an header (like the start of a chapter) you should definitly use <h2>. If it's just a way of emphasize content i think it's better to use the CSS class so that you explain what it is.

If you use html 5 you may be intersted in teh <header> tag like in this example:

<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>

here and here there are some quick info on the header tag in html5.

You can also read this chapter of "Dive into html5" for more complete reference (read the whole book while you are at it, it's good!)

Sometimes such "subtitles" are more of a teaser or short description (but in your case it actually seems like a subtitle); if you felt it was part of the title, you could stick it in the <h1> tag and perform special formatting. It's just a question of semantics: if you feel this is more a part of the header or more a part of the body, or neither.

I'd say my suggestion would be more appropriate, semantically and for screen readers, in this particular case. But the second case works well too, assuming these aren't huge descriptions.

First one is looking good. 2nd approach is also good, but for that you have to write a css class.