Styling an h1 Subtitle Across Major Browsers

You have a title and a subtitle for your article, which fills a page. Having a main title and a subtitle is common in magazines, books, and websites. But you want to format the subtitle so it inherits most of the style of the title. You want the effect to be consistent across all major browsers, but you may not know exactly what default styles each browser will apply, especially if browser versions vary. That touch of design is a challenge.

Of course, you’d use the HTML h1 element for the title. But nothing else on the page should get h1 and a subtitle probably should not get h2 or be put into a p element, because that could make the subtitle’s style too different.

The solution is to put the whole title, that is both the main title and the subtitle, into the same h1 element and surround one of them with a span element, which you name with an id (like id="h1-subtitle"), and then you style the span only for the differences from the h1 style. You don’t even have to style h1 itself, since there will already be styling in place for that. You only need to address how the span is unlike the h1.

You probably also want a line break between the main title and the subtitle. In that case, you’d add a br element inside the h1 element, usually in lieu of the space that would normally go there. A colon is optional; that depends on your editorial preference.

Here’s a hypothetical example:

In your HTML:

<h1>The Moon Landing:<br /><span id="h1-subtitle">A Closer Look at the Touch-Down</span></h1>

In your CSS stylesheet file:

span#h1-subtitle {font-size: 75%;}

If you don’t use a line break but instead you have a space separating the main title from the subtitle, the space can be either before or inside the span, as you like. Spaces get style, so the position can make a difference, but maybe not much in your case.

I know the br element no longer needs a slash, but I find it less confusing to me later if I include it, so I did here. That’s a matter of coding style, and that, too, is your choice.

If you use schema.org markup, I suggest this span start tag for the main title:

For the subtitle, where the difference in the schema.org markup is in the itemprop value: